-
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
37 changed files
with
1,900 additions
and
549 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,21 @@ | ||
| import { html, css, LitElement } from 'lit'; | ||
| import { ContextProvider } from '@lit/context'; | ||
| import { customElement, property, state, query } from 'lit/decorators.js'; | ||
| import { Task } from '@lit/task'; | ||
| import { customElement, property, state } from 'lit/decorators.js'; | ||
| import { Canvas } from '../Canvas'; | ||
| import { canvasContext } from './context'; | ||
|
|
||
| async function checkWebGPUSupport() { | ||
| if ('gpu' in navigator) { | ||
| const gpu = await navigator.gpu.requestAdapter(); | ||
| if (!gpu) { | ||
| throw new Error('No WebGPU adapter available.'); | ||
| } | ||
| } else { | ||
| throw new Error('WebGPU is not supported by the browser.'); | ||
| } | ||
| } | ||
|
|
||
| @customElement('ic-canvas-lesson7') | ||
| export class InfiniteCanvas extends LitElement { | ||
| static styles = css` | ||
|
|
@@ -24,12 +36,13 @@ export class InfiniteCanvas extends LitElement { | |
| @property() | ||
| renderer = 'webgl'; | ||
|
|
||
| @property() | ||
| shaderCompilerPath = | ||
| 'https://unpkg.com/@antv/[email protected]/dist/pkg/glsl_wgsl_compiler_bg.wasm'; | ||
|
|
||
| @state() | ||
| zoom = 100; | ||
|
|
||
| @query('canvas', true) | ||
| $canvas: HTMLCanvasElement; | ||
|
|
||
| #provider = new ContextProvider(this, { context: canvasContext }); | ||
|
|
||
| #canvas: Canvas; | ||
|
|
@@ -50,49 +63,70 @@ export class InfiniteCanvas extends LitElement { | |
| super.disconnectedCallback(); | ||
| } | ||
|
|
||
| async firstUpdated() { | ||
| this.#canvas = await new Canvas({ | ||
| canvas: this.$canvas, | ||
| renderer: this.renderer as 'webgl' | 'webgpu', | ||
| }).initialized; | ||
|
|
||
| this.#provider.setValue(this.#canvas); | ||
|
|
||
| this.#canvas.camera.onchange = () => { | ||
| this.zoom = Math.round(this.#canvas.camera.zoom * 100); | ||
| }; | ||
|
|
||
| this.dispatchEvent(new CustomEvent('ic-ready', { detail: this.#canvas })); | ||
|
|
||
| const animate = (time?: DOMHighResTimeStamp) => { | ||
| this.dispatchEvent(new CustomEvent('ic-frame', { detail: time })); | ||
|
|
||
| this.#canvas.render(); | ||
| this.#rafHandle = window.requestAnimationFrame(animate); | ||
| }; | ||
| animate(); | ||
| } | ||
|
|
||
| private resize(event: CustomEvent) { | ||
| const detail = event.detail as { entries: ResizeObserverEntry[] }; | ||
| const { width, height } = detail.entries[0].contentRect; | ||
| const dpr = window.devicePixelRatio; | ||
|
|
||
| if (width && height) { | ||
| const $canvas = this.$canvas; | ||
| const $canvas = this.#canvas.getDOM(); | ||
| $canvas.width = width * dpr; | ||
| $canvas.height = height * dpr; | ||
| this.#canvas?.resize(width, height); | ||
| } | ||
| } | ||
|
|
||
| private initCanvas = new Task(this, { | ||
| task: async ([renderer, shaderCompilerPath]) => { | ||
| if (renderer === 'webgpu') { | ||
| await checkWebGPUSupport(); | ||
| } | ||
|
|
||
| const canvas = document.createElement('canvas'); | ||
|
|
||
| this.#canvas = await new Canvas({ | ||
| canvas, | ||
| renderer, | ||
| shaderCompilerPath, | ||
| }).initialized; | ||
|
|
||
| this.#provider.setValue(this.#canvas); | ||
|
|
||
| this.#canvas.camera.onchange = () => { | ||
| this.zoom = Math.round(this.#canvas.camera.zoom * 100); | ||
| }; | ||
|
|
||
| this.dispatchEvent(new CustomEvent('ic-ready', { detail: this.#canvas })); | ||
|
|
||
| const animate = (time?: DOMHighResTimeStamp) => { | ||
| this.dispatchEvent(new CustomEvent('ic-frame', { detail: time })); | ||
|
|
||
| this.#canvas.render(); | ||
| this.#rafHandle = window.requestAnimationFrame(animate); | ||
| }; | ||
| animate(); | ||
|
|
||
| return this.#canvas.getDOM(); | ||
| }, | ||
| args: () => | ||
| [this.renderer as 'webgl' | 'webgpu', this.shaderCompilerPath] as const, | ||
| }); | ||
|
|
||
| render() { | ||
| return html` | ||
| <sl-resize-observer> | ||
| <canvas></canvas> | ||
| <ic-zoom-toolbar-lesson7 zoom=${this.zoom}></ic-zoom-toolbar-lesson7> | ||
| </sl-resize-observer> | ||
| `; | ||
| return this.initCanvas.render({ | ||
| pending: () => html`<sl-spinner></sl-spinner>`, | ||
| complete: ($canvas) => html` | ||
| <sl-resize-observer> | ||
| ${$canvas} | ||
| <ic-zoom-toolbar-lesson7 zoom=${this.zoom}></ic-zoom-toolbar-lesson7> | ||
| </sl-resize-observer> | ||
| `, | ||
| error: (e: Error) => html`<sl-alert variant="danger" open> | ||
| <sl-icon slot="icon" name="exclamation-octagon"></sl-icon> | ||
| <strong>Initialize canvas failed</strong><br /> | ||
| ${e.message} | ||
| </sl-alert>`, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,21 @@ | ||
| import { html, css, LitElement } from 'lit'; | ||
| import { ContextProvider } from '@lit/context'; | ||
| import { customElement, property, state, query } from 'lit/decorators.js'; | ||
| import { Task } from '@lit/task'; | ||
| import { customElement, property, state } from 'lit/decorators.js'; | ||
| import { Canvas } from '../Canvas'; | ||
| import { canvasContext } from './context'; | ||
|
|
||
| async function checkWebGPUSupport() { | ||
| if ('gpu' in navigator) { | ||
| const gpu = await navigator.gpu.requestAdapter(); | ||
| if (!gpu) { | ||
| throw new Error('No WebGPU adapter available.'); | ||
| } | ||
| } else { | ||
| throw new Error('WebGPU is not supported by the browser.'); | ||
| } | ||
| } | ||
|
|
||
| @customElement('ic-canvas-lesson8') | ||
| export class InfiniteCanvas extends LitElement { | ||
| static styles = css` | ||
|
|
@@ -24,12 +36,13 @@ export class InfiniteCanvas extends LitElement { | |
| @property() | ||
| renderer = 'webgl'; | ||
|
|
||
| @property() | ||
| shaderCompilerPath = | ||
| 'https://unpkg.com/@antv/[email protected]/dist/pkg/glsl_wgsl_compiler_bg.wasm'; | ||
|
|
||
| @state() | ||
| zoom = 100; | ||
|
|
||
| @query('canvas', true) | ||
| $canvas: HTMLCanvasElement; | ||
|
|
||
| #provider = new ContextProvider(this, { context: canvasContext }); | ||
|
|
||
| #canvas: Canvas; | ||
|
|
@@ -50,49 +63,70 @@ export class InfiniteCanvas extends LitElement { | |
| super.disconnectedCallback(); | ||
| } | ||
|
|
||
| async firstUpdated() { | ||
| this.#canvas = await new Canvas({ | ||
| canvas: this.$canvas, | ||
| renderer: this.renderer as 'webgl' | 'webgpu', | ||
| }).initialized; | ||
|
|
||
| this.#provider.setValue(this.#canvas); | ||
|
|
||
| this.#canvas.pluginContext.hooks.cameraChange.tap(() => { | ||
| this.zoom = Math.round(this.#canvas.camera.zoom * 100); | ||
| }); | ||
|
|
||
| this.dispatchEvent(new CustomEvent('ic-ready', { detail: this.#canvas })); | ||
|
|
||
| const animate = (time?: DOMHighResTimeStamp) => { | ||
| this.dispatchEvent(new CustomEvent('ic-frame', { detail: time })); | ||
|
|
||
| this.#canvas.render(); | ||
| this.#rafHandle = window.requestAnimationFrame(animate); | ||
| }; | ||
| animate(); | ||
| } | ||
|
|
||
| private resize(event: CustomEvent) { | ||
| const detail = event.detail as { entries: ResizeObserverEntry[] }; | ||
| const { width, height } = detail.entries[0].contentRect; | ||
| const dpr = window.devicePixelRatio; | ||
|
|
||
| if (width && height) { | ||
| const $canvas = this.$canvas; | ||
| const $canvas = this.#canvas.getDOM(); | ||
| $canvas.width = width * dpr; | ||
| $canvas.height = height * dpr; | ||
| this.#canvas?.resize(width, height); | ||
| } | ||
| } | ||
|
|
||
| private initCanvas = new Task(this, { | ||
| task: async ([renderer, shaderCompilerPath]) => { | ||
| if (renderer === 'webgpu') { | ||
| await checkWebGPUSupport(); | ||
| } | ||
|
|
||
| const canvas = document.createElement('canvas'); | ||
|
|
||
| this.#canvas = await new Canvas({ | ||
| canvas, | ||
| renderer, | ||
| shaderCompilerPath, | ||
| }).initialized; | ||
|
|
||
| this.#provider.setValue(this.#canvas); | ||
|
|
||
| this.#canvas.pluginContext.hooks.cameraChange.tap(() => { | ||
| this.zoom = Math.round(this.#canvas.camera.zoom * 100); | ||
| }); | ||
|
|
||
| this.dispatchEvent(new CustomEvent('ic-ready', { detail: this.#canvas })); | ||
|
|
||
| const animate = (time?: DOMHighResTimeStamp) => { | ||
| this.dispatchEvent(new CustomEvent('ic-frame', { detail: time })); | ||
|
|
||
| this.#canvas.render(); | ||
| this.#rafHandle = window.requestAnimationFrame(animate); | ||
| }; | ||
| animate(); | ||
|
|
||
| return this.#canvas.getDOM(); | ||
| }, | ||
| args: () => | ||
| [this.renderer as 'webgl' | 'webgpu', this.shaderCompilerPath] as const, | ||
| }); | ||
|
|
||
| render() { | ||
| return html` | ||
| <sl-resize-observer> | ||
| <canvas></canvas> | ||
| <ic-zoom-toolbar-lesson8 zoom=${this.zoom}></ic-zoom-toolbar-lesson8> | ||
| </sl-resize-observer> | ||
| `; | ||
| return this.initCanvas.render({ | ||
| pending: () => html`<sl-spinner></sl-spinner>`, | ||
| complete: ($canvas) => html` | ||
| <sl-resize-observer> | ||
| ${$canvas} | ||
| <ic-zoom-toolbar-lesson8 zoom=${this.zoom}></ic-zoom-toolbar-lesson8> | ||
| </sl-resize-observer> | ||
| `, | ||
| error: (e: Error) => html`<sl-alert variant="danger" open> | ||
| <sl-icon slot="icon" name="exclamation-octagon"></sl-icon> | ||
| <strong>Initialize canvas failed</strong><br /> | ||
| ${e.message} | ||
| </sl-alert>`, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.