From f5b14f197368ce275d7a0ad2fc53e8940033e4fc Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Fri, 4 Aug 2023 15:35:27 -0700 Subject: [PATCH 1/3] Added a sample that shows WebGPU running from a web worker --- src/pages/samples/[slug].tsx | 1 + src/sample/worker/main.ts | 87 ++++++++++++++ src/sample/worker/worker.ts | 215 +++++++++++++++++++++++++++++++++++ 3 files changed, 303 insertions(+) create mode 100644 src/sample/worker/main.ts create mode 100644 src/sample/worker/worker.ts diff --git a/src/pages/samples/[slug].tsx b/src/pages/samples/[slug].tsx index 80b088aa..b323c430 100644 --- a/src/pages/samples/[slug].tsx +++ b/src/pages/samples/[slug].tsx @@ -44,6 +44,7 @@ export const pages: PageComponentType = { cornell: dynamic(() => import('../../sample/cornell/main')), gameOfLife: dynamic(() => import('../../sample/gameOfLife/main')), renderBundles: dynamic(() => import('../../sample/renderBundles/main')), + worker: dynamic(() => import('../../sample/worker/main')), }; function Page({ slug }: Props): JSX.Element { diff --git a/src/sample/worker/main.ts b/src/sample/worker/main.ts new file mode 100644 index 00000000..1a3d7306 --- /dev/null +++ b/src/sample/worker/main.ts @@ -0,0 +1,87 @@ +import { makeSample, SampleInit } from '../../components/SampleLayout'; + +const init: SampleInit = async ({ canvas, pageState }) => { + if (!pageState.active) return; + + // The web worker is created by passing a path to the worker's source file, which will then be + // executed on a separate thread. + const worker = new Worker(new URL("./worker.ts", import.meta.url)); + + // The primary way to communicate with the worker is to send and receive messages. + worker.addEventListener('message', (ev) => { + // The format of the message can be whatever you'd like, but it's helpful to decide on a + // consistent convention so that you can tell the message types apart as your apps grow in + // complexity. Here we establish a convention that all messages to and from the worker will + // have a `type` field that we can use to determine the content of the message. + switch(ev.data.type) { + case 'log': { + // Workers don't have a built-in mechanism for logging to the console, so it's useful to + // create a way to echo console messages. + console.log(ev.data.message); + break; + } + default: { + console.error(`Unknown Message Type: ${ev.data.type}`); + } + } + }); + + try { + // In order for the worker to display anything on the page, an OffscreenCanvas must be used. + // Here we can create one from our normal canvas by calling transferControlToOffscreen(). + // Anything drawn to the OffscreenCanvas that call returns will automatically be displayed on + // the source canvas on the page. + const offscreenCanvas = canvas.transferControlToOffscreen(); + const devicePixelRatio = window.devicePixelRatio || 1; + offscreenCanvas.width = canvas.clientWidth * devicePixelRatio; + offscreenCanvas.height = canvas.clientHeight * devicePixelRatio; + + // Send a message to the worker telling it to initialize WebGPU with the OffscreenCanvas. The + // array passed as the second argument here indicates that the OffscreenCanvas is to be + // transferred to the worker, meaning this main thread will lose access to it and it will be + // fully owned by the worker. + worker.postMessage({ type: 'init', offscreenCanvas }, [offscreenCanvas]); + } catch (err) { + // TODO: This catch is added here because React will call init twice with the same canvas, and + // the second time will fail the transferControlToOffscreen() because it's already been + // transferred. I'd love to know how to get around that. + console.warn(err.message); + worker.terminate(); + } +}; + +const WebGPUWorker: () => JSX.Element = () => + makeSample({ + name: 'WebGPU in a Worker', + description: `This example shows one method of using WebGPU in a web worker and presenting to + the main thread. It uses canvas.transferControlToOffscreen() to produce an offscreen canvas + which is them transferred to the worker where all the WebGPU calls are made.`, + init, + sources: [ + { + name: __filename.substring(__dirname.length + 1), + contents: __SOURCE__, + }, + { + name: './worker.ts', + // eslint-disable-next-line @typescript-eslint/no-var-requires + contents: require('!!raw-loader!./worker.ts').default, + }, + { + name: '../../shaders/basic.vert.wgsl', + contents: require('!!raw-loader!../../shaders/basic.vert.wgsl').default, + }, + { + name: '../../shaders/vertexPositionColor.frag.wgsl', + contents: require('!!raw-loader!../../shaders/vertexPositionColor.frag.wgsl').default, + }, + { + name: '../../meshes/cube.ts', + // eslint-disable-next-line @typescript-eslint/no-var-requires + contents: require('!!raw-loader!../../meshes/cube.ts').default, + }, + ], + filename: __filename, + }); + +export default WebGPUWorker; diff --git a/src/sample/worker/worker.ts b/src/sample/worker/worker.ts new file mode 100644 index 00000000..e2c909fb --- /dev/null +++ b/src/sample/worker/worker.ts @@ -0,0 +1,215 @@ +import { mat4, vec3 } from 'wgpu-matrix'; + +import { + cubeVertexArray, + cubeVertexSize, + cubeUVOffset, + cubePositionOffset, + cubeVertexCount, +} from '../../meshes/cube'; + +import basicVertWGSL from '../../shaders/basic.vert.wgsl'; +import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl'; + +// The worker process can instantiate a WebGPU device immediately, but it still needs an +// OffscreenCanvas to be able to display anything. Here we listen for an 'init' message from the +// main thread that will contain an OffscreenCanvas transferred from the page, and use that as the +// signal to begin WebGPU initialization. +self.addEventListener('message', (ev) => { + switch(ev.data.type) { + case 'init': { + try { + init(ev.data.offscreenCanvas); + } catch (err) { + self.postMessage({ + type: 'log', + message: `Error while initializing WebGPU in worker process: ${err.message}` + }); + } + break; + } + } +}); + +// Once we receive the OffscreenCanvas this init() function is called, which functions similarly +// to the init() method for all the other samples. The remainder of this file is largely identical +// to the rotatingCube sample. +async function init(canvas) { + const adapter = await navigator.gpu.requestAdapter(); + const device = await adapter.requestDevice(); + const context = canvas.getContext('webgpu'); + + const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); + + context.configure({ + device, + format: presentationFormat, + alphaMode: 'premultiplied', + }); + + // Create a vertex buffer from the cube data. + const verticesBuffer = device.createBuffer({ + size: cubeVertexArray.byteLength, + usage: GPUBufferUsage.VERTEX, + mappedAtCreation: true, + }); + new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray); + verticesBuffer.unmap(); + + const pipeline = device.createRenderPipeline({ + layout: 'auto', + vertex: { + module: device.createShaderModule({ + code: basicVertWGSL, + }), + entryPoint: 'main', + buffers: [ + { + arrayStride: cubeVertexSize, + attributes: [ + { + // position + shaderLocation: 0, + offset: cubePositionOffset, + format: 'float32x4', + }, + { + // uv + shaderLocation: 1, + offset: cubeUVOffset, + format: 'float32x2', + }, + ], + }, + ], + }, + fragment: { + module: device.createShaderModule({ + code: vertexPositionColorWGSL, + }), + entryPoint: 'main', + targets: [ + { + format: presentationFormat, + }, + ], + }, + primitive: { + topology: 'triangle-list', + + // Backface culling since the cube is solid piece of geometry. + // Faces pointing away from the camera will be occluded by faces + // pointing toward the camera. + cullMode: 'back', + }, + + // Enable depth testing so that the fragment closest to the camera + // is rendered in front. + depthStencil: { + depthWriteEnabled: true, + depthCompare: 'less', + format: 'depth24plus', + }, + }); + + const depthTexture = device.createTexture({ + size: [canvas.width, canvas.height], + format: 'depth24plus', + usage: GPUTextureUsage.RENDER_ATTACHMENT, + }); + + const uniformBufferSize = 4 * 16; // 4x4 matrix + const uniformBuffer = device.createBuffer({ + size: uniformBufferSize, + usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, + }); + + const uniformBindGroup = device.createBindGroup({ + layout: pipeline.getBindGroupLayout(0), + entries: [ + { + binding: 0, + resource: { + buffer: uniformBuffer, + }, + }, + ], + }); + + const renderPassDescriptor: GPURenderPassDescriptor = { + colorAttachments: [ + { + view: undefined, // Assigned later + + clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, + loadOp: 'clear', + storeOp: 'store', + }, + ], + depthStencilAttachment: { + view: depthTexture.createView(), + + depthClearValue: 1.0, + depthLoadOp: 'clear', + depthStoreOp: 'store', + }, + }; + + const aspect = canvas.width / canvas.height; + const projectionMatrix = mat4.perspective( + (2 * Math.PI) / 5, + aspect, + 1, + 100.0 + ); + const modelViewProjectionMatrix = mat4.create(); + + function getTransformationMatrix() { + const viewMatrix = mat4.identity(); + mat4.translate(viewMatrix, vec3.fromValues(0, 0, -4), viewMatrix); + const now = Date.now() / 1000; + mat4.rotate( + viewMatrix, + vec3.fromValues(Math.sin(now), Math.cos(now), 0), + 1, + viewMatrix + ); + + mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix); + + return modelViewProjectionMatrix as Float32Array; + } + + function frame() { + const transformationMatrix = getTransformationMatrix(); + device.queue.writeBuffer( + uniformBuffer, + 0, + transformationMatrix.buffer, + transformationMatrix.byteOffset, + transformationMatrix.byteLength + ); + renderPassDescriptor.colorAttachments[0].view = context + .getCurrentTexture() + .createView(); + + const commandEncoder = device.createCommandEncoder(); + const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor); + passEncoder.setPipeline(pipeline); + passEncoder.setBindGroup(0, uniformBindGroup); + passEncoder.setVertexBuffer(0, verticesBuffer); + passEncoder.draw(cubeVertexCount, 1, 0, 0); + passEncoder.end(); + device.queue.submit([commandEncoder.finish()]); + + requestAnimationFrame(frame); + } + + // Note: It is important to return control to the browser regularly in order for the worker to + // process events. You shouldn't simply loop infinitely with while(true) or similar! Using a + // traditional requestAnimationFrame() loop in the worker is one way to ensure that events are + // handled correctly by the worker. + requestAnimationFrame(frame); +} + +export {} \ No newline at end of file From 32a553ef7964f637478e351bc62e1a6ab7eafc14 Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Fri, 4 Aug 2023 17:55:16 -0700 Subject: [PATCH 2/3] Fix lint errors --- src/sample/worker/main.ts | 16 ++++++++++------ src/sample/worker/worker.ts | 24 ++++++++++++------------ 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/sample/worker/main.ts b/src/sample/worker/main.ts index 1a3d7306..2e13cad4 100644 --- a/src/sample/worker/main.ts +++ b/src/sample/worker/main.ts @@ -5,15 +5,15 @@ const init: SampleInit = async ({ canvas, pageState }) => { // The web worker is created by passing a path to the worker's source file, which will then be // executed on a separate thread. - const worker = new Worker(new URL("./worker.ts", import.meta.url)); + const worker = new Worker(new URL('./worker.ts', import.meta.url)); - // The primary way to communicate with the worker is to send and receive messages. + // The primary way to communicate with the worker is to send and receive messages. worker.addEventListener('message', (ev) => { // The format of the message can be whatever you'd like, but it's helpful to decide on a // consistent convention so that you can tell the message types apart as your apps grow in // complexity. Here we establish a convention that all messages to and from the worker will // have a `type` field that we can use to determine the content of the message. - switch(ev.data.type) { + switch (ev.data.type) { case 'log': { // Workers don't have a built-in mechanism for logging to the console, so it's useful to // create a way to echo console messages. @@ -35,7 +35,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { const devicePixelRatio = window.devicePixelRatio || 1; offscreenCanvas.width = canvas.clientWidth * devicePixelRatio; offscreenCanvas.height = canvas.clientHeight * devicePixelRatio; - + // Send a message to the worker telling it to initialize WebGPU with the OffscreenCanvas. The // array passed as the second argument here indicates that the OffscreenCanvas is to be // transferred to the worker, meaning this main thread will lose access to it and it will be @@ -44,7 +44,7 @@ const init: SampleInit = async ({ canvas, pageState }) => { } catch (err) { // TODO: This catch is added here because React will call init twice with the same canvas, and // the second time will fail the transferControlToOffscreen() because it's already been - // transferred. I'd love to know how to get around that. + // transferred. I'd love to know how to get around that. console.warn(err.message); worker.terminate(); } @@ -69,11 +69,15 @@ const WebGPUWorker: () => JSX.Element = () => }, { name: '../../shaders/basic.vert.wgsl', + // eslint-disable-next-line @typescript-eslint/no-var-requires contents: require('!!raw-loader!../../shaders/basic.vert.wgsl').default, }, { name: '../../shaders/vertexPositionColor.frag.wgsl', - contents: require('!!raw-loader!../../shaders/vertexPositionColor.frag.wgsl').default, + contents: + // eslint-disable-next-line @typescript-eslint/no-var-requires + require('!!raw-loader!../../shaders/vertexPositionColor.frag.wgsl') + .default, }, { name: '../../meshes/cube.ts', diff --git a/src/sample/worker/worker.ts b/src/sample/worker/worker.ts index e2c909fb..e6d3ff22 100644 --- a/src/sample/worker/worker.ts +++ b/src/sample/worker/worker.ts @@ -16,19 +16,19 @@ import vertexPositionColorWGSL from '../../shaders/vertexPositionColor.frag.wgsl // main thread that will contain an OffscreenCanvas transferred from the page, and use that as the // signal to begin WebGPU initialization. self.addEventListener('message', (ev) => { - switch(ev.data.type) { - case 'init': { - try { - init(ev.data.offscreenCanvas); - } catch (err) { - self.postMessage({ - type: 'log', - message: `Error while initializing WebGPU in worker process: ${err.message}` - }); - } - break; + switch (ev.data.type) { + case 'init': { + try { + init(ev.data.offscreenCanvas); + } catch (err) { + self.postMessage({ + type: 'log', + message: `Error while initializing WebGPU in worker process: ${err.message}`, + }); } + break; } + } }); // Once we receive the OffscreenCanvas this init() function is called, which functions similarly @@ -212,4 +212,4 @@ async function init(canvas) { requestAnimationFrame(frame); } -export {} \ No newline at end of file +export {}; From ae3e65f648865422e3ee491cb5e389db809a235f Mon Sep 17 00:00:00 2001 From: Brandon Jones Date: Sat, 5 Aug 2023 11:07:57 -0700 Subject: [PATCH 3/3] Update typescript version --- package-lock.json | 13 +++++++------ package.json | 3 ++- src/sample/worker/main.ts | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1a95ef35..86257e68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "license": "BSD-3-Clause", "dependencies": { "@types/dom-mediacapture-transform": "^0.1.5", - "@types/stats.js": "^0.17.0", "codemirror": "^5.58.2", "dat.gui": "^0.7.6", "file-loader": "^6.2.0", @@ -28,6 +27,7 @@ "@types/node": "^18.11.8", "@types/react": "^18.0.24", "@types/react-dom": "^18.0.8", + "@types/stats.js": "^0.17.0", "@typescript-eslint/eslint-plugin": "^5.41.0", "@typescript-eslint/parser": "^5.41.0", "@webgpu/types": "^0.1.21", @@ -37,7 +37,7 @@ "eslint-plugin-react": "^7.31.10", "prettier": "^2.7.1", "raw-loader": "^4.0.2", - "typescript": "^4.8.4" + "typescript": "^4.9.5" } }, "node_modules/@eslint/eslintrc": { @@ -561,7 +561,8 @@ "node_modules/@types/stats.js": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz", - "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==" + "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==", + "dev": true }, "node_modules/@types/tern": { "version": "0.23.3", @@ -3832,9 +3833,9 @@ } }, "node_modules/typescript": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz", - "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index 354f18a0..033330a8 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "scripts": { "lint": "eslint --ext .ts,.tsx src/", + "fix": "eslint --fix --ext .ts,.tsx src/", "start": "next dev", "build": "next build", "serve": "next start", @@ -44,6 +45,6 @@ "eslint-plugin-react": "^7.31.10", "prettier": "^2.7.1", "raw-loader": "^4.0.2", - "typescript": "^4.8.4" + "typescript": "^4.9.5" } } diff --git a/src/sample/worker/main.ts b/src/sample/worker/main.ts index 2e13cad4..b2e63123 100644 --- a/src/sample/worker/main.ts +++ b/src/sample/worker/main.ts @@ -55,7 +55,7 @@ const WebGPUWorker: () => JSX.Element = () => name: 'WebGPU in a Worker', description: `This example shows one method of using WebGPU in a web worker and presenting to the main thread. It uses canvas.transferControlToOffscreen() to produce an offscreen canvas - which is them transferred to the worker where all the WebGPU calls are made.`, + which is then transferred to the worker where all the WebGPU calls are made.`, init, sources: [ {