├── img
    └── webgpu.png
├── css
    └── example.css
├── LICENSE
├── README.md
├── utils
    ├── Timer.js
    └── utils.js
├── triangle.html
├── multi-canvas.html
├── cube.html
├── particles.html
├── pick.html
└── deferred.html


/img/webgpu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsherif/webgpu-examples/HEAD/img/webgpu.png


--------------------------------------------------------------------------------
/css/example.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |     margin: 0;
 3 |     overflow: hidden;
 4 | }
 5 | 
 6 | #description {
 7 | 	position: absolute;
 8 | 	top: 20px;
 9 | 	left: 20px;
10 | 	background-color: rgba(128, 128, 128, 0.95);
11 | 	color: white;
12 | 	padding: 0.5em;
13 | 	font-size: 18px;
14 | 	pointer-events: none;
15 | }
16 | 
17 | #description h2 {
18 | 	margin: 0;
19 | 	font-size: 1.1em;
20 | }
21 | 
22 | #description div {
23 | 	margin: 4px;
24 | }
25 | 
26 | #stats {
27 | 	position: fixed;
28 | 	bottom: 20px;
29 | 	left: 20px;
30 | 	background-color: rgba(128, 128, 128, 0.95);
31 | 	color: white;
32 | 	padding: 0.5em;
33 | 	font-size: 18px;
34 | 	z-index: 1;
35 | 	pointer-events: none;
36 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 Tarek Sherif
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | WebGPU Examples
 2 | ===============
 3 | 
 4 | Rendering algorithms implemented in WebGPU.
 5 | 
 6 | - [Triangle](https://tsherif.github.io/webgpu-examples/triangle.html): Creating vertex buffers and drawing a triangle.
 7 | - [Cube](https://tsherif.github.io/webgpu-examples/cube.html): Creating a texture from an ImageBitmap, setting up vertex and uniform buffers, and animating a 3D cube.
 8 | - [Particles](https://tsherif.github.io/webgpu-examples/particles.html): Simulating gravity on instanced particles using a compute shader.
 9 | - [Multiple Canvases](https://tsherif.github.io/webgpu-examples/multi-canvas.html): Rendering to multiple canvases with a single device instance.
10 | - [Picking](https://tsherif.github.io/webgpu-examples/pick.html): Interact with rendered objects using color picking.
11 | - [Deferred Rendering](https://tsherif.github.io/webgpu-examples/deferred.html): Rendering mesh data to a multisampled gBuffer then lighting in a separate pass.
12 | 
13 | Examples currently only run without special flags in Chrome on Windows and OSX. See the [Implementation Status](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status) page for updates on support. 
14 | 
15 | All examples are implemented in a single HTML file with minimal use of functions, modules, classes or other abstractions. The goal is to allow the reader to easily see, in sequential order, all WebGPU calls that are made. They can be run locally by serving them from a local HTTP server, e.g. `python -m http.server`.
16 | 
17 | 


--------------------------------------------------------------------------------
/utils/Timer.js:
--------------------------------------------------------------------------------
  1 | const DEFAULT_SAMPLE_COUNT = 50;
  2 | 
  3 | export class Timer {
  4 |     static PASS_START = 1;
  5 |     static PASS_END = 2;
  6 | 
  7 |     constructor(device, sampleCount = DEFAULT_SAMPLE_COUNT) {
  8 |         this.device = device;
  9 |         this.sampleCount = sampleCount;
 10 |         this.hasGPUTimer = device.features.has("timestamp-query");
 11 |         this.cpuTimers = {};
 12 |         this.cpuTimes = {};
 13 |         this.gpuTimers = {};
 14 |         this.gpuTimes = {}
 15 |     }
 16 | 
 17 |     gpuPassDescriptor(timerName, flags = Timer.PASS_START | Timer.PASS_END) {
 18 |         if (!this.hasGPUTimer) {
 19 |             return undefined;
 20 |         }
 21 | 
 22 |         if (!this.gpuTimers[timerName]) {
 23 |             const querySet = this.device.createQuerySet({
 24 |                 type: "timestamp",
 25 |                 count: 2
 26 |             });
 27 |     
 28 |             const resolveBuffer = this.device.createBuffer({
 29 |                 size: querySet.count * 8,
 30 |                 usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC
 31 |             });
 32 |     
 33 |             const resultBuffer = this.device.createBuffer({
 34 |                 size: resolveBuffer.size,
 35 |                 usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
 36 |             });   
 37 | 
 38 |             this.gpuTimers[timerName] = {
 39 |                 querySet,
 40 |                 resolveBuffer,
 41 |                 resultBuffer,
 42 |                 time: 0,
 43 |                 timeCount: 0,
 44 |             }
 45 | 
 46 |             this.gpuTimes[timerName] = 0;
 47 |         }
 48 | 
 49 |         const timer = this.gpuTimers[timerName];
 50 | 
 51 |         const descriptor = {
 52 |             querySet: timer.querySet
 53 |         };
 54 | 
 55 |         if (flags & Timer.PASS_START) {
 56 |             descriptor.beginningOfPassWriteIndex = 0;
 57 |         }
 58 | 
 59 |         if (flags & Timer.PASS_END) {
 60 |             descriptor.endOfPassWriteIndex = 1;
 61 |         }
 62 | 
 63 |         return descriptor;
 64 |     }
 65 | 
 66 |     gpuBeforeSubmit(commandEncoder, timerNames = Object.keys(this.gpuTimers)) {
 67 |         timerNames.forEach(timerName => {
 68 |             const timer = this.gpuTimers[timerName];
 69 | 
 70 |             if (timer && timer.resultBuffer.mapState === "unmapped") {
 71 |                 const { querySet, resolveBuffer, resultBuffer } = timer;
 72 | 
 73 |                 commandEncoder.resolveQuerySet(querySet, 0, querySet.count, resolveBuffer, 0);
 74 |                 commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, resultBuffer.size);
 75 |             }
 76 |         });
 77 |     }
 78 | 
 79 |     gpuAfterSubmit(timerNames = Object.keys(this.gpuTimers)) {
 80 |         timerNames.forEach(timerName => {
 81 |             const timer = this.gpuTimers[timerName];
 82 | 
 83 |             if (timer && timer.resultBuffer.mapState === "unmapped") {
 84 |                 const { resultBuffer } = timer;
 85 |                 resultBuffer.mapAsync(GPUMapMode.READ).then(() => {
 86 |                     const [start, end] = new BigInt64Array(resultBuffer.getMappedRange());
 87 |                     resultBuffer.unmap();
 88 |     
 89 |                     const time = Number(end - start);
 90 |     
 91 |                     if (time >= 0) {
 92 |                         timer.time += time;
 93 |                         ++timer.timeCount;
 94 |                     } else {
 95 |                         timer.time = 0;
 96 |                         timer.timeCount = 0;
 97 |                     }
 98 |     
 99 |                     if (timer.timeCount === this.sampleCount) {
100 |                         this.gpuTimes[timerName] = timer.time / this.sampleCount / 1000000;
101 |                         timer.time = 0;
102 |                         timer.timeCount = 0;
103 |                     }
104 |                 });
105 |             }
106 |         });
107 |     }
108 | 
109 |     cpuTimeStart(timerName) {
110 |         this.cpuTimers[timerName] ??= {
111 |             startTime: 0,
112 |             time: 0,
113 |             timeCount: 0
114 |         };
115 |         this.cpuTimes[timerName] ??= 0;
116 | 
117 |         this.cpuTimers[timerName].startTime = performance.now();
118 |     }
119 | 
120 | 
121 |     cpuTimeEnd(timerName) {
122 |         const timer = this.cpuTimers[timerName];
123 | 
124 |         timer.time += performance.now() - timer.startTime;
125 |         ++timer.timeCount;
126 | 
127 |         if (timer.timeCount === this.sampleCount) {
128 |             this.cpuTimes[timerName] = timer.time / this.sampleCount;
129 |             timer.time = 0;
130 |             timer.timeCount = 0;
131 |         }
132 |     }
133 | 
134 | }


--------------------------------------------------------------------------------
/triangle.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <link rel="stylesheet" href="css/example.css">
  6 | </head>
  7 | <!--
  8 |   The MIT License (MIT)
  9 | 
 10 |   Copyright (c) 2020 Tarek Sherif
 11 | 
 12 |   Permission is hereby granted, free of charge, to any person obtaining a copy of
 13 |   this software and associated documentation files (the "Software"), to deal in
 14 |   the Software without restriction, including without limitation the rights to
 15 |   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 16 |   the Software, and to permit persons to whom the Software is furnished to do so,
 17 |   subject to the following conditions:
 18 | 
 19 |   The above copyright notice and this permission notice shall be included in all
 20 |   copies or substantial portions of the Software.
 21 | 
 22 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 23 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 24 |   FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 25 |   COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 26 |   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 27 |   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 28 | -->
 29 | <body>
 30 | <canvas id="webgpu-canvas"></canvas>
 31 | <script type="module">
 32 | import { checkSupport, addDescription } from "./utils/utils.js";
 33 | 
 34 | checkSupport();
 35 | addDescription(
 36 |     "Triangle",
 37 |     "Loading vertex data and drawing a triangle.",
 38 |     "triangle.html"
 39 | );
 40 | 
 41 | (async () => {
 42 |     ///////////////////////////
 43 |     // Set up WebGPU adapter
 44 |     ///////////////////////////
 45 | 
 46 |     const adapter = await navigator.gpu.requestAdapter();
 47 |     const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 48 | 
 49 |     ////////////////////////////////////
 50 |     // Set up device and canvas context
 51 |     ////////////////////////////////////
 52 | 
 53 |     const device = await adapter.requestDevice();
 54 |     
 55 |     const canvas = document.getElementById("webgpu-canvas");
 56 |     canvas.width = window.innerWidth;
 57 |     canvas.height = window.innerHeight;
 58 | 
 59 |     const context = canvas.getContext("webgpu");
 60 |     context.configure({
 61 |         device,
 62 |         format: presentationFormat
 63 |     });
 64 | 
 65 |     ////////////////////////////////////////
 66 |     // Create vertex buffers and load data
 67 |     ////////////////////////////////////////
 68 | 
 69 |     const positionBuffer = device.createBuffer({
 70 |         size: 24,
 71 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 72 |     });
 73 |     device.queue.writeBuffer(positionBuffer, 0, new Float32Array([
 74 |         -0.5, -0.5,
 75 |         0.5, -0.5,
 76 |         0.0, 0.5
 77 |     ]));
 78 | 
 79 |     const colorBuffer = device.createBuffer({
 80 |         size: 12,
 81 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 82 |     });
 83 |     device.queue.writeBuffer(colorBuffer, 0, new Uint8Array([
 84 |         255, 0, 0, 255,
 85 |         0, 255, 0, 255,
 86 |         0, 0, 255, 255
 87 |     ]));
 88 | 
 89 |     ////////////////////////////////////////
 90 |     // Create shader module with both 
 91 |     // vertex and fragment shaders.
 92 |     ////////////////////////////////////////
 93 | 
 94 |     const triangleShaderModule = device.createShaderModule({
 95 |         code: `
 96 |             // Return for vertex shader includes
 97 |             // clip position and color passed on 
 98 |             // to fragment shader.
 99 |             struct VSOut {
100 |                 @builtin(position) position: vec4f,
101 |                 @location(0) color: vec4f
102 |             };
103 | 
104 |             @vertex
105 |             fn vs(
106 |                 @location(0) position : vec4f,
107 |                 @location(1) color: vec4f
108 |             ) -> VSOut {
109 |                 var vsOut: VSOut;
110 |                 vsOut.position = position;
111 |                 vsOut.color = color;
112 | 
113 |                 return vsOut;
114 |             }
115 | 
116 |             // Input to fragment shader is color from
117 |             // VSOut struct (matched by location).
118 |             @fragment
119 |             fn fs(
120 |                 @location(0) color: vec4f
121 |             ) -> @location(0) vec4f {
122 |                 return color;
123 |             }
124 |         `
125 |     });
126 | 
127 |     ///////////////////////////
128 |     // Create render pipeline
129 |     ///////////////////////////
130 | 
131 |     const pipeline = device.createRenderPipeline({
132 |         layout: 'auto',
133 |         vertex: {
134 |             module: triangleShaderModule,
135 |             entryPoint: "vs",
136 |             buffers: [
137 |                 {
138 |                     arrayStride: 8,
139 |                     attributes: [{
140 |                         shaderLocation: 0,
141 |                         format: "float32x2",
142 |                         offset: 0
143 |                     }]
144 |                 },
145 |                 {
146 |                     arrayStride: 4,
147 |                     attributes: [{
148 |                         shaderLocation: 1,
149 |                         format: "unorm8x4",
150 |                         offset: 0
151 |                     }]
152 |                 }
153 |             ]
154 |         },
155 |         fragment: {
156 |             module: triangleShaderModule,
157 |             entryPoint: "fs",
158 |             targets: [{
159 |                 format: presentationFormat
160 |             }]
161 |         },
162 |         multisample: {
163 |             count: 4
164 |         },
165 |         primitive: {
166 |             topology: "triangle-list"
167 |         }
168 |     });
169 | 
170 |     ////////////////////////////////////
171 |     // Create and submit command buffer
172 |     // with 1 render pass.
173 |     ////////////////////////////////////
174 | 
175 |     let msaaTexture = device.createTexture({
176 |         label: 'msaa texture',
177 |         size: [canvas.width, canvas.height],
178 |         format: presentationFormat,
179 |         usage: GPUTextureUsage.RENDER_ATTACHMENT,
180 |         sampleCount: 4
181 |     });
182 | 
183 |     function draw() {
184 |         const commandEncoder = device.createCommandEncoder();
185 |         const renderPass = commandEncoder.beginRenderPass({
186 |             colorAttachments: [{
187 |                 view: msaaTexture.createView(),
188 |                 resolveTarget: context.getCurrentTexture().createView(),
189 |                 loadOp: 'clear',
190 |                 storeOp: 'store',
191 |                 clearValue: [0, 0, 0, 1]
192 |             }]
193 |         });
194 |         renderPass.setPipeline(pipeline);
195 | 
196 |         // First argument here refers to array index
197 |         // in pipeline vertexState.vertexBuffers
198 |         renderPass.setVertexBuffer(0, positionBuffer);
199 |         renderPass.setVertexBuffer(1, colorBuffer);
200 |         
201 |         // Draw 3 vertices.
202 |         renderPass.draw(3);
203 | 
204 |         renderPass.end();
205 | 
206 |         device.queue.submit([commandEncoder.finish()]);
207 |     }
208 | 
209 |     window.addEventListener("resize", () => {
210 |         canvas.width = window.innerWidth;
211 |         canvas.height = window.innerHeight;
212 | 
213 |         msaaTexture.destroy();
214 |         msaaTexture = device.createTexture({
215 |             label: 'msaa texture',
216 |             size: [canvas.width, canvas.height],
217 |             format: presentationFormat,
218 |             usage: GPUTextureUsage.RENDER_ATTACHMENT,
219 |             sampleCount: 4
220 |         });
221 | 
222 |         draw();
223 |     });
224 | 
225 |     draw();
226 | 
227 |     
228 | })();
229 | </script>
230 | </body>
231 | </html>


--------------------------------------------------------------------------------
/multi-canvas.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <link rel="stylesheet" href="css/example.css">
  6 |     <script src="utils/gl-matrix.js"></script>
  7 |     <style>
  8 |         html, body {
  9 |             overflow: auto;
 10 |         }
 11 | 
 12 |         canvas {
 13 |             margin: 10px;
 14 |             border: 1px solid red;
 15 |             border-radius: 10px;
 16 |         }
 17 |     </style>
 18 | </head>
 19 | <!--
 20 |   The MIT License (MIT)
 21 | 
 22 |   Copyright (c) 2024 Tarek Sherif
 23 | 
 24 |   Permission is hereby granted, free of charge, to any person obtaining a copy of
 25 |   this software and associated documentation files (the "Software"), to deal in
 26 |   the Software without restriction, including without limitation the rights to
 27 |   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 28 |   the Software, and to permit persons to whom the Software is furnished to do so,
 29 |   subject to the following conditions:
 30 | 
 31 |   The above copyright notice and this permission notice shall be included in all
 32 |   copies or substantial portions of the Software.
 33 | 
 34 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 35 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 36 |   FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 37 |   COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 38 |   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 39 |   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 40 | -->
 41 | <body>
 42 | <div id="stats">
 43 |     <div>
 44 |         CPU Time: <span id="cpu-time"></span>
 45 |     </div>
 46 |     <div>
 47 |         GPU Time: <span id="gpu-time"></span>
 48 |     </div>
 49 | </div>
 50 | <script type="module">
 51 | import { checkSupport, addDescription, loadImageBitmaps, createCube, xformMatrix, randomRange, getMipLevelCount, generate2DMipmap } from "./utils/utils.js";
 52 | import { Timer } from "./utils/Timer.js";
 53 | 
 54 | const { mat4 } = glMatrix;
 55 | const NUM_CANVASES = 100;
 56 | 
 57 | checkSupport();
 58 | addDescription(
 59 |     "Multiple Canvases",
 60 |     `Rendering to ${NUM_CANVASES} canvases from a single device instance.`,
 61 |     "multi-canvas.html"
 62 | );
 63 | 
 64 | (async () => {
 65 |     //////////////////////////////////////////
 66 |     // Set up WebGPU adapter, load
 67 |     // texture image
 68 |     //////////////////////////////////////////
 69 | 
 70 |     const [adapter, [image]] = await Promise.all([
 71 |         navigator.gpu.requestAdapter(),
 72 |         loadImageBitmaps(["img/webgpu.png"])
 73 |     ]);
 74 | 
 75 |     const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 76 | 
 77 |     ////////////////////////////////////
 78 |     // Set up device and canvas context
 79 |     ////////////////////////////////////
 80 | 
 81 |     const device = await adapter.requestDevice({
 82 |         requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
 83 |     });
 84 | 
 85 |     const timer = new Timer(device);
 86 | 
 87 |     const cpuTimeDisplay = document.getElementById("cpu-time");
 88 |     const gpuTimeDisplay = document.getElementById("gpu-time");
 89 | 
 90 |     ////////////////////////////////////////
 91 |     // Create vertex buffers and load data
 92 |     ////////////////////////////////////////
 93 | 
 94 |     const cubeData = createCube();
 95 |     const numVertices = cubeData.positions.length / 3;
 96 | 
 97 |     const positionBuffer = device.createBuffer({
 98 |         size: cubeData.positions.byteLength,
 99 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
100 |     });
101 |     const normalBuffer = device.createBuffer({
102 |         size: cubeData.normals.byteLength,
103 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
104 |     });
105 |     const uvBuffer = device.createBuffer({
106 |         size: cubeData.uvs.byteLength,
107 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
108 |     });
109 | 
110 |     device.queue.writeBuffer(positionBuffer, 0, cubeData.positions);
111 |     device.queue.writeBuffer(normalBuffer, 0, cubeData.normals);
112 |     device.queue.writeBuffer(uvBuffer, 0, cubeData.uvs);
113 | 
114 |     /////////////////
115 |     // Uniform data
116 |     /////////////////
117 | 
118 |     const eyePosition = new Float32Array([1, 1, 1]);
119 |     const lightPosition = new Float32Array([1, 1, 1]);
120 | 
121 |     ////////////////////////////
122 |     // Create uniform buffers
123 |     ////////////////////////////
124 | 
125 |     const fragmentUniformBuffer = device.createBuffer({
126 |         size: 32,
127 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
128 |     });
129 | 
130 |     device.queue.writeBuffer(fragmentUniformBuffer, 0, eyePosition);
131 |     device.queue.writeBuffer(fragmentUniformBuffer, 16, lightPosition);
132 | 
133 |     /////////////////////////////////////////
134 |     // Create texture, sampler and load data
135 |     /////////////////////////////////////////
136 | 
137 |     const sampler = device.createSampler({
138 |         minFilter: "linear",
139 |         magFilter: "linear",
140 |         mipmapFilter: "linear"
141 |     });
142 | 
143 |     const texture = device.createTexture({
144 |         size: [image.width, image.height],
145 |         format: "rgba8unorm",
146 |         mipLevelCount: getMipLevelCount(image.width, image.height),
147 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
148 |     });
149 | 
150 |     device.queue.copyExternalImageToTexture(
151 |         { source: image, flipY: true },
152 |         { texture },
153 |         {
154 |             width: image.width,
155 |             height: image.height
156 |         }
157 |     );
158 | 
159 |     generate2DMipmap(device, texture);
160 | 
161 |     ///////////////////////////
162 |     // Create shader module
163 |     ///////////////////////////  
164 | 
165 |     const cubeShaderModule = device.createShaderModule({
166 |         code: `
167 |             struct VertexUniforms {
168 |                 worldMatrix: mat4x4f ,
169 |                 viewProjectionMatrix: mat4x4f 
170 |             };
171 | 
172 |             @group(0) @binding(0) var<uniform> vertexUniforms: VertexUniforms;
173 | 
174 |             struct VSOut{
175 |                 @builtin(position) clipPosition: vec4f,
176 |                 @location(0) worldPosition: vec3f,
177 |                 @location(1) normal: vec3f,
178 |                 @location(2) uv: vec2f
179 |             };
180 | 
181 |             @vertex
182 |             fn vs(
183 |                 @location(0) position: vec4f,
184 |                 @location(1) normal: vec3f,
185 |                 @location(2) uv: vec2f,
186 |             ) -> VSOut {
187 |                 let worldPosition: vec4f = vertexUniforms.worldMatrix * position;
188 | 
189 |                 var vsOut: VSOut;
190 |                 vsOut.clipPosition = vertexUniforms.viewProjectionMatrix * worldPosition;
191 |                 vsOut.worldPosition = worldPosition.xyz;
192 |                 vsOut.normal = (vertexUniforms.worldMatrix * vec4f(normal, 0.0)).xyz;
193 |                 vsOut.uv = uv;
194 | 
195 |                 return vsOut;
196 |             }
197 | 
198 |             struct FragmentUniforms {
199 |                 eyePosition: vec4f,
200 |                 lightPosition: vec4f
201 |             };
202 | 
203 |             @group(0) @binding(1) var<uniform> fragmentUniforms: FragmentUniforms;
204 |             @group(0) @binding(2) var textureSampler: sampler;
205 |             @group(0) @binding(3) var textureData: texture_2d<f32>;
206 | 
207 |             @fragment
208 |             fn fs(fsIn: VSOut) -> @location(0) vec4f {
209 |                 let surfaceColor: vec3f = textureSample(textureData, textureSampler, fsIn.uv).rgb;
210 | 
211 |                 let normal: vec3f = normalize(fsIn.normal);
212 |                 let eyeVec: vec3f = normalize(fragmentUniforms.eyePosition.xyz - fsIn.worldPosition);
213 |                 let incidentVec: vec3f = normalize(fsIn.worldPosition - fragmentUniforms.lightPosition.xyz);
214 |                 let lightVec: vec3f = -incidentVec;
215 |                 let diffuse: f32 = max(dot(lightVec, normal), 0.0);
216 |                 let highlight: f32 = pow(max(dot(eyeVec, reflect(incidentVec, normal)), 0.0), 100.0);
217 |                 let ambient: f32 = 0.1;
218 |                 return vec4f(surfaceColor * (diffuse + highlight + ambient), 1.0);
219 |             }
220 | 
221 |         `
222 |     });
223 | 
224 |     ///////////////////////////
225 |     // Create render pipeline
226 |     ///////////////////////////
227 | 
228 |     const pipeline = device.createRenderPipeline({
229 |         layout: 'auto',
230 |         vertex: {
231 |             module: cubeShaderModule,
232 |             entryPoint: "vs",
233 |             buffers: [
234 |                 {
235 |                     arrayStride: 12,
236 |                     attributes: [{
237 |                         shaderLocation: 0,
238 |                         format: "float32x3",
239 |                         offset: 0
240 |                     }]
241 |                 },
242 |                 {
243 |                     arrayStride: 12,
244 |                     attributes: [{
245 |                         shaderLocation: 1,
246 |                         format: "float32x3",
247 |                         offset: 0
248 |                     }]
249 |                 },
250 |                 {
251 |                     arrayStride: 8,
252 |                     attributes: [{
253 |                         shaderLocation: 2,
254 |                         format: "float32x2",
255 |                         offset: 0
256 |                     }]
257 |                 }
258 |             ]
259 |         },
260 |         fragment: {
261 |             module: cubeShaderModule,
262 |             entryPoint: "fs",
263 |             targets: [{
264 |                 format: presentationFormat
265 |             }]
266 |         },
267 |         multisample: {
268 |             count: 4
269 |         },
270 |         primitive: {
271 |             topology: "triangle-list",
272 |         },
273 |         depthStencil: {
274 |             format: "depth24plus",
275 |             depthWriteEnabled: true,
276 |             depthCompare: "less"
277 |         }
278 |     });
279 | 
280 |     const canvases = new Array(NUM_CANVASES).fill(null).map(() => {
281 |         const canvas = document.createElement("canvas");
282 |         canvas.width = randomRange(100, 300);
283 |         canvas.height = randomRange(100, 300);
284 | 
285 |         document.body.appendChild(canvas);
286 | 
287 |         const context = canvas.getContext("webgpu");
288 |         context.configure({
289 |             device,
290 |             format: presentationFormat
291 |         });
292 | 
293 |         const projectionMatrix = mat4.create();
294 |         const viewMatrix = mat4.create();
295 |         const viewProjectionMatrix = mat4.create();
296 | 
297 |         mat4.perspective(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 10.0)
298 |         mat4.lookAt(viewMatrix, [1, 1, 1], [0, 0, 0], [0, 1, 0]);
299 |         mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
300 | 
301 |         const rotation = [
302 |             randomRange(0, 2 * Math.PI),
303 |             randomRange(0, 2 * Math.PI),
304 |             randomRange(0, 2 * Math.PI)
305 |         ];
306 | 
307 |         const modelMatrix = mat4.create();
308 |         xformMatrix(modelMatrix, null, rotation, null);
309 | 
310 |         const vertexUniformBuffer = device.createBuffer({
311 |             size: 128,
312 |             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
313 |         });
314 | 
315 |         device.queue.writeBuffer(vertexUniformBuffer, 64, viewProjectionMatrix);
316 | 
317 |         const bindGroup = device.createBindGroup({
318 |             layout: pipeline.getBindGroupLayout(0),
319 |             entries: [
320 |                 {
321 |                     binding: 0,
322 |                     resource: {
323 |                         buffer: vertexUniformBuffer
324 |                     }
325 |                 },
326 |                 {
327 |                     binding: 1,
328 |                     resource: {
329 |                         buffer: fragmentUniformBuffer
330 |                     }
331 |                 },
332 |                 {
333 |                     binding: 2,
334 |                     resource: sampler
335 |                 },
336 |                 {
337 |                     binding: 3,
338 |                     resource: texture.createView()
339 |                 }
340 | 
341 |             ]
342 |         });
343 | 
344 |         const msaaTexture = device.createTexture({
345 |             label: 'msaa texture',
346 |             size: [canvas.width, canvas.height],
347 |             format: presentationFormat,
348 |             usage: GPUTextureUsage.RENDER_ATTACHMENT,
349 |             sampleCount: 4
350 |         });
351 | 
352 |         const depthTexture = device.createTexture({
353 |             size: [canvas.width, canvas.height],
354 |             format: "depth24plus",
355 |             usage:  GPUTextureUsage.RENDER_ATTACHMENT,
356 |             sampleCount: 4
357 |         });
358 | 
359 |         const renderPassDescriptor = {
360 |             colorAttachments: [{
361 |                 view: msaaTexture.createView(),
362 |                 resolveTarget: context.getCurrentTexture().createView(),
363 |                 loadOp: 'clear',
364 |                 storeOp: 'store',
365 |                 clearValue: [0, 0, 0, 1]
366 |             }],
367 |             depthStencilAttachment: {
368 |                 view: depthTexture.createView(),
369 |                 depthClearValue: 1,
370 |                 depthLoadOp: 'clear',
371 |                 depthStoreOp: "store"
372 |             }
373 |         };
374 |     
375 |         return {
376 |             canvas, 
377 |             context,
378 |             rotation,
379 |             modelMatrix,
380 |             bindGroup,
381 |             vertexUniformBuffer,
382 |             msaaTexture,
383 |             depthTexture,
384 |             renderPassDescriptor
385 |         }
386 |     });
387 | 
388 |     canvases[0].renderPassDescriptor.timestampWrites =  timer.gpuPassDescriptor("frame", Timer.PASS_START);
389 |     canvases.at(-1).renderPassDescriptor.timestampWrites =  timer.gpuPassDescriptor("frame", Timer.PASS_END);
390 | 
391 |     let lastTime;
392 |     requestAnimationFrame(function draw(time) {
393 |         timer.cpuTimeStart("frame");
394 | 
395 |         lastTime = lastTime ?? time;
396 |         const dt = time - lastTime;
397 |         lastTime = time;
398 | 
399 |         const commandEncoder = device.createCommandEncoder();
400 |         canvases.forEach(c => {
401 | 
402 |             /////////////////////////
403 |             // Update model matrix
404 |             /////////////////////////
405 |             
406 |             c.rotation[0] += 0.001 * dt;
407 |             c.rotation[1] += 0.002 * dt;
408 |             xformMatrix(c.modelMatrix, null, c.rotation, null);
409 |             
410 |             device.queue.writeBuffer(c.vertexUniformBuffer, 0, c.modelMatrix);
411 | 
412 |             c.renderPassDescriptor.colorAttachments[0].resolveTarget = c.context.getCurrentTexture().createView();
413 | 
414 |             const renderPass = commandEncoder.beginRenderPass(c.renderPassDescriptor);
415 |             renderPass.setPipeline(pipeline);
416 | 
417 |             // First argument here refers to array index
418 |             // in pipeline vertexState.vertexBuffers
419 |             renderPass.setVertexBuffer(0, positionBuffer);
420 |             renderPass.setVertexBuffer(1, normalBuffer);
421 |             renderPass.setVertexBuffer(2, uvBuffer);
422 | 
423 |             // First argument here refers to array index
424 |             // in pipeline layout.bindGroupLayouts
425 |             renderPass.setBindGroup(0, c.bindGroup);
426 |             
427 |             renderPass.draw(numVertices);
428 |             renderPass.end();
429 |         });
430 | 
431 |         timer.gpuBeforeSubmit(commandEncoder, ["frame"]);
432 | 
433 |         device.queue.submit([commandEncoder.finish()]);
434 | 
435 |         timer.gpuAfterSubmit(["frame"]);
436 |         timer.cpuTimeEnd("frame");
437 | 
438 |         cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
439 |         gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["frame"].toFixed(2)}ms` : "N/A";
440 | 
441 |         requestAnimationFrame(draw);
442 |     });
443 | })();
444 | </script>
445 | </body>
446 | </html>
447 | 


--------------------------------------------------------------------------------
/cube.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <link rel="stylesheet" href="css/example.css">
  6 |     <script src="utils/gl-matrix.js"></script>
  7 | </head>
  8 | <!--
  9 |   The MIT License (MIT)
 10 | 
 11 |   Copyright (c) 2020 Tarek Sherif
 12 | 
 13 |   Permission is hereby granted, free of charge, to any person obtaining a copy of
 14 |   this software and associated documentation files (the "Software"), to deal in
 15 |   the Software without restriction, including without limitation the rights to
 16 |   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 17 |   the Software, and to permit persons to whom the Software is furnished to do so,
 18 |   subject to the following conditions:
 19 | 
 20 |   The above copyright notice and this permission notice shall be included in all
 21 |   copies or substantial portions of the Software.
 22 | 
 23 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 24 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 25 |   FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 26 |   COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 27 |   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 28 |   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 29 | -->
 30 | <body>
 31 | <canvas id="webgpu-canvas"></canvas>
 32 | <div id="stats">
 33 |     <div id="device-info"></div>
 34 |     <div>
 35 |         CPU Frame Time: <span id="cpu-time"></span>
 36 |     </div>
 37 |     <div>
 38 |         GPU Draw Time: <span id="gpu-time"></span>
 39 |     </div>
 40 | </div>
 41 | <script type="module">
 42 | import { checkSupport, addDescription, loadImageBitmaps, createCube, xformMatrix, getMipLevelCount, generate2DMipmap, parseAdapterInfo } from "./utils/utils.js";
 43 | import { Timer } from "./utils/Timer.js";
 44 | 
 45 | const { mat4 } = glMatrix;
 46 | 
 47 | checkSupport();
 48 | addDescription(
 49 |     "Textured, Lit Cube",
 50 |     "Creating a texture from an ImageBitmap, setting up vertex and uniform buffers, and animating a 3D cube.",
 51 |     "cube.html"
 52 | );
 53 | 
 54 | (async () => {
 55 |     //////////////////////////////////////////
 56 |     // Set up WebGPU adapter, load
 57 |     // texture image
 58 |     //////////////////////////////////////////
 59 | 
 60 |     const [adapter, [image]] = await Promise.all([
 61 |         navigator.gpu.requestAdapter(),
 62 |         loadImageBitmaps(["img/webgpu.png"])
 63 |     ]);
 64 | 
 65 |     const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 66 | 
 67 |     ////////////////////////////////////
 68 |     // Set up device and canvas context
 69 |     ////////////////////////////////////
 70 | 
 71 |     const [adapterInfo, device] = await Promise.all([
 72 |         adapter.requestAdapterInfo(),
 73 |         adapter.requestDevice({
 74 |             requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
 75 |         })
 76 |     ]);
 77 |     
 78 |     const canvas = document.getElementById("webgpu-canvas");
 79 |     canvas.width = window.innerWidth;
 80 |     canvas.height = window.innerHeight;
 81 | 
 82 |     const context = canvas.getContext("webgpu");
 83 |     context.configure({
 84 |         device,
 85 |         format: presentationFormat
 86 |     });
 87 | 
 88 |     document.getElementById("device-info").innerText = parseAdapterInfo(adapterInfo);
 89 | 
 90 |     const timer = new Timer(device);
 91 | 
 92 |     const cpuTimeDisplay = document.getElementById("cpu-time");
 93 |     const gpuTimeDisplay = document.getElementById("gpu-time");
 94 |     
 95 |     ////////////////////////////////////////
 96 |     // Create vertex buffers and load data
 97 |     ////////////////////////////////////////
 98 | 
 99 |     const cubeData = createCube();
100 |     const numVertices = cubeData.positions.length / 3;
101 | 
102 |     const positionBuffer = device.createBuffer({
103 |         size: cubeData.positions.byteLength,
104 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
105 |     });
106 |     const normalBuffer = device.createBuffer({
107 |         size: cubeData.normals.byteLength,
108 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
109 |     });
110 |     const uvBuffer = device.createBuffer({
111 |         size: cubeData.uvs.byteLength,
112 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
113 |     });
114 | 
115 |     device.queue.writeBuffer(positionBuffer, 0, cubeData.positions);
116 |     device.queue.writeBuffer(normalBuffer, 0, cubeData.normals);
117 |     device.queue.writeBuffer(uvBuffer, 0, cubeData.uvs);
118 | 
119 |     /////////////////
120 |     // Uniform data
121 |     /////////////////
122 | 
123 |     const eyePosition = new Float32Array([1, 1, 1]);
124 |     const lightPosition = new Float32Array([1, 1, 1]);
125 | 
126 |     const projectionMatrix = mat4.create();
127 |     const viewMatrix = mat4.create();
128 |     const modelMatrix = mat4.create();
129 |     const viewProjectionMatrix = mat4.create();
130 |     const rotation = [0, 0, 0];
131 | 
132 |     mat4.perspectiveZO(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 10.0)
133 |     mat4.lookAt(viewMatrix, [1, 1, 1], [0, 0, 0], [0, 1, 0]);
134 |     mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
135 | 
136 |     ////////////////////////////
137 |     // Create uniform buffers
138 |     ////////////////////////////
139 | 
140 |     const vertexUniformBuffer = device.createBuffer({
141 |         size: 128,
142 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
143 |     });
144 | 
145 |     const fragmentUniformBuffer = device.createBuffer({
146 |         size: 32,
147 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
148 |     });
149 | 
150 |     device.queue.writeBuffer(vertexUniformBuffer, 64, viewProjectionMatrix);
151 |     device.queue.writeBuffer(fragmentUniformBuffer, 0, eyePosition);
152 |     device.queue.writeBuffer(fragmentUniformBuffer, 16, lightPosition);
153 | 
154 |     /////////////////////////////////////////
155 |     // Create texture, sampler and load data
156 |     /////////////////////////////////////////
157 | 
158 |     const sampler = device.createSampler({
159 |         minFilter: "linear",
160 |         magFilter: "linear",
161 |         mipmapFilter: "linear"
162 |     });
163 | 
164 |     const texture = device.createTexture({
165 |         size: [image.width, image.height],
166 |         format: "rgba8unorm",
167 |         mipLevelCount: getMipLevelCount(image.width, image.height),
168 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
169 |     });
170 | 
171 |     device.queue.copyExternalImageToTexture(
172 |         { source: image, flipY: true },
173 |         { texture },
174 |         {
175 |             width: image.width,
176 |             height: image.height
177 |         }
178 |     );
179 | 
180 |     generate2DMipmap(device, texture);
181 | 
182 |     ///////////////////////////
183 |     // Create shader module
184 |     ///////////////////////////  
185 | 
186 |     const cubeShaderModule = device.createShaderModule({
187 |         code: `
188 |             struct VertexUniforms {
189 |                 worldMatrix: mat4x4f ,
190 |                 viewProjectionMatrix: mat4x4f 
191 |             };
192 | 
193 |             @group(0) @binding(0) var<uniform> vertexUniforms: VertexUniforms;
194 | 
195 |             struct VSOut{
196 |                 @builtin(position) clipPosition: vec4f,
197 |                 @location(0) worldPosition: vec3f,
198 |                 @location(1) normal: vec3f,
199 |                 @location(2) uv: vec2f
200 |             };
201 | 
202 |             @vertex
203 |             fn vs(
204 |                 @location(0) position: vec4f,
205 |                 @location(1) normal: vec3f,
206 |                 @location(2) uv: vec2f,
207 |             ) -> VSOut {
208 |                 let worldPosition: vec4f = vertexUniforms.worldMatrix * position;
209 | 
210 |                 var vsOut: VSOut;
211 |                 vsOut.clipPosition = vertexUniforms.viewProjectionMatrix * worldPosition;
212 |                 vsOut.worldPosition = worldPosition.xyz;
213 |                 vsOut.normal = (vertexUniforms.worldMatrix * vec4f(normal, 0.0)).xyz;
214 |                 vsOut.uv = uv;
215 | 
216 |                 return vsOut;
217 |             }
218 | 
219 |             struct FragmentUniforms {
220 |                 eyePosition: vec4f,
221 |                 lightPosition: vec4f
222 |             };
223 | 
224 |             @group(0) @binding(1) var<uniform> fragmentUniforms: FragmentUniforms;
225 |             @group(0) @binding(2) var textureSampler: sampler;
226 |             @group(0) @binding(3) var textureData: texture_2d<f32>;
227 | 
228 |             @fragment
229 |             fn fs(fsIn: VSOut) -> @location(0) vec4f {
230 |                 let surfaceColor: vec3f = textureSample(textureData, textureSampler, fsIn.uv).rgb;
231 | 
232 |                 let normal: vec3f = normalize(fsIn.normal);
233 |                 let eyeVec: vec3f = normalize(fragmentUniforms.eyePosition.xyz - fsIn.worldPosition);
234 |                 let incidentVec: vec3f = normalize(fsIn.worldPosition - fragmentUniforms.lightPosition.xyz);
235 |                 let lightVec: vec3f = -incidentVec;
236 |                 let diffuse: f32 = max(dot(lightVec, normal), 0.0);
237 |                 let highlight: f32 = pow(max(dot(eyeVec, reflect(incidentVec, normal)), 0.0), 100.0);
238 |                 let ambient: f32 = 0.1;
239 |                 return vec4f(surfaceColor * (diffuse + highlight + ambient), 1.0);
240 |             }
241 | 
242 |         `
243 |     });
244 | 
245 |     ///////////////////////////
246 |     // Create render pipeline
247 |     ///////////////////////////
248 | 
249 |     const pipeline = device.createRenderPipeline({
250 |         layout: 'auto',
251 |         vertex: {
252 |             module: cubeShaderModule,
253 |             entryPoint: "vs",
254 |             buffers: [
255 |                 {
256 |                     arrayStride: 12,
257 |                     attributes: [{
258 |                         shaderLocation: 0,
259 |                         format: "float32x3",
260 |                         offset: 0
261 |                     }]
262 |                 },
263 |                 {
264 |                     arrayStride: 12,
265 |                     attributes: [{
266 |                         shaderLocation: 1,
267 |                         format: "float32x3",
268 |                         offset: 0
269 |                     }]
270 |                 },
271 |                 {
272 |                     arrayStride: 8,
273 |                     attributes: [{
274 |                         shaderLocation: 2,
275 |                         format: "float32x2",
276 |                         offset: 0
277 |                     }]
278 |                 }
279 |             ]
280 |         },
281 |         fragment: {
282 |             module: cubeShaderModule,
283 |             entryPoint: "fs",
284 |             targets: [{
285 |                 format: presentationFormat
286 |             }]
287 |         },
288 |         multisample: {
289 |             count: 4
290 |         },
291 |         primitive: {
292 |             topology: "triangle-list",
293 |             cullMode: "back"
294 |         },
295 |         depthStencil: {
296 |             format: "depth24plus",
297 |             depthWriteEnabled: true,
298 |             depthCompare: "less"
299 |         }
300 |     });
301 | 
302 |     const sceneUniformBindGroup = device.createBindGroup({
303 |         layout: pipeline.getBindGroupLayout(0),
304 |         entries: [
305 |             {
306 |                 binding: 0,
307 |                 resource: {
308 |                     buffer: vertexUniformBuffer
309 |                 }
310 |             },
311 |             {
312 |                 binding: 1,
313 |                 resource: {
314 |                     buffer: fragmentUniformBuffer
315 |                 }
316 |             },
317 |             {
318 |                 binding: 2,
319 |                 resource: sampler
320 |             },
321 |             {
322 |                 binding: 3,
323 |                 resource: texture.createView()
324 |             }
325 | 
326 |         ]
327 |     });
328 | 
329 |     ///////////////////////////
330 |     // Render pass description
331 |     ///////////////////////////
332 | 
333 |     let msaaTexture = device.createTexture({
334 |         label: 'msaa texture',
335 |         size: [canvas.width, canvas.height],
336 |         format: presentationFormat,
337 |         usage: GPUTextureUsage.RENDER_ATTACHMENT,
338 |         sampleCount: 4
339 |     });
340 |     
341 |     let depthTexture = device.createTexture({
342 |         size: [canvas.width, canvas.height],
343 |         format: "depth24plus",
344 |         usage:  GPUTextureUsage.RENDER_ATTACHMENT,
345 |         sampleCount: 4
346 |     });
347 | 
348 |     const renderPassDescription = {
349 |         colorAttachments: [{
350 |             view: msaaTexture.createView(),
351 |             resolveTarget: context.getCurrentTexture().createView(),
352 |             loadOp: 'clear',
353 |             storeOp: 'store',
354 |             clearValue: [0, 0, 0, 1]
355 |         }],
356 |         depthStencilAttachment: {
357 |             view: depthTexture.createView(),
358 |             depthClearValue: 1,
359 |             depthLoadOp: 'clear',
360 |             depthStoreOp: "store"
361 |         },
362 |         timestampWrites: timer.gpuPassDescriptor("draw")
363 |     };
364 | 
365 |     window.addEventListener("resize", () => {
366 |         canvas.width = window.innerWidth;
367 |         canvas.height = window.innerHeight;
368 | 
369 |         mat4.perspectiveZO(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 10.0)
370 |         mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
371 | 
372 |         device.queue.writeBuffer(vertexUniformBuffer, 64, viewProjectionMatrix);
373 | 
374 |         msaaTexture.destroy();
375 |         msaaTexture = device.createTexture({
376 |             label: 'msaa texture',
377 |             size: [canvas.width, canvas.height],
378 |             format: presentationFormat,
379 |             usage: GPUTextureUsage.RENDER_ATTACHMENT,
380 |             sampleCount: 4
381 |         });
382 | 
383 |         depthTexture.destroy();
384 |         depthTexture = device.createTexture({
385 |             size: [canvas.width, canvas.height],
386 |             format: "depth24plus",
387 |             usage:  GPUTextureUsage.RENDER_ATTACHMENT,
388 |             sampleCount: 4
389 |         });
390 | 
391 |         renderPassDescription.colorAttachments[0].view = msaaTexture.createView()
392 |         renderPassDescription.depthStencilAttachment.view = depthTexture.createView()
393 |     });
394 | 
395 |     let lastTime;
396 |     requestAnimationFrame(function draw(time) {
397 |         timer.cpuTimeStart("frame");
398 | 
399 |         lastTime = lastTime ?? time;
400 |         const dt = time - lastTime;
401 |         lastTime = time;
402 | 
403 |         /////////////////////////
404 |         // Update uniform buffer
405 |         /////////////////////////
406 |         
407 |         rotation[0] += 0.001 * dt;
408 |         rotation[1] += 0.002 * dt;
409 | 
410 |         xformMatrix(modelMatrix, null, rotation, null);
411 |         
412 |         device.queue.writeBuffer(vertexUniformBuffer, 0, modelMatrix);
413 | 
414 | 
415 |         renderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();
416 | 
417 |         const commandEncoder = device.createCommandEncoder();
418 |         const renderPass = commandEncoder.beginRenderPass(renderPassDescription);
419 | 
420 |         renderPass.setPipeline(pipeline);
421 | 
422 |         // First argument here refers to array index
423 |         // in pipeline vertexState.vertexBuffers
424 |         renderPass.setVertexBuffer(0, positionBuffer);
425 |         renderPass.setVertexBuffer(1, normalBuffer);
426 |         renderPass.setVertexBuffer(2, uvBuffer);
427 | 
428 |         // First argument here refers to array index
429 |         // in pipeline layout.bindGroupLayouts
430 |         renderPass.setBindGroup(0, sceneUniformBindGroup);
431 |         
432 |         renderPass.draw(numVertices, 1);
433 |         renderPass.end();
434 | 
435 |         timer.gpuBeforeSubmit(commandEncoder);
436 | 
437 |         device.queue.submit([commandEncoder.finish()]);
438 | 
439 |         timer.gpuAfterSubmit();
440 |         timer.cpuTimeEnd("frame");
441 | 
442 |         cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
443 |         gpuTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["draw"].toFixed(2)}ms` : "N/A";
444 | 
445 |         requestAnimationFrame(draw);
446 |     });
447 | })();
448 | </script>
449 | </body>
450 | </html>
451 | 


--------------------------------------------------------------------------------
/utils/utils.js:
--------------------------------------------------------------------------------
  1 | ///////////////////////////////////////////////////////////////////////////////////
  2 | // The MIT License (MIT)
  3 | //
  4 | // Copyright (c) 2020 Tarek Sherif
  5 | //
  6 | // Permission is hereby granted, free of charge, to any person obtaining a copy of
  7 | // this software and associated documentation files (the "Software"), to deal in
  8 | // the Software without restriction, including without limitation the rights to
  9 | // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 10 | // the Software, and to permit persons to whom the Software is furnished to do so,
 11 | // subject to the following conditions:
 12 | //
 13 | // The above copyright notice and this permission notice shall be included in all
 14 | // copies or substantial portions of the Software.
 15 | //
 16 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 17 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 18 | // FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 19 | // COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 20 | // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 21 | // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 22 | ///////////////////////////////////////////////////////////////////////////////////
 23 | 
 24 | let translateMat;
 25 | let rotateXMat;
 26 | let rotateYMat;
 27 | let rotateZMat;
 28 | let scaleMat;
 29 | let mat4;
 30 | 
 31 | if (window.glMatrix) {
 32 |     mat4 = glMatrix.mat4;
 33 |     translateMat = mat4.create();
 34 |     rotateXMat = mat4.create();
 35 |     rotateYMat = mat4.create();
 36 |     rotateZMat = mat4.create();
 37 |     scaleMat = mat4.create();
 38 | }
 39 | 
 40 | const ZEROS = [0, 0, 0];
 41 | const ONES = [1, 1, 1];
 42 | 
 43 | let textureDataCanvas = document.createElement("canvas");
 44 | let textureDataCtx = textureDataCanvas.getContext("2d");
 45 | 
 46 |     
 47 | export function checkSupport() {
 48 |     if (!navigator.gpu) {
 49 |         document.body.innerHTML = `
 50 |             <h1>WebGPU not supported!</h1>
 51 |             <div>
 52 |                 WebGPU is currently only supported in <a href="https://www.google.com/chrome/index.html">Google Chrome</a>.
 53 |             </div>
 54 |             <div>
 55 |                 See the <a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status">Implementation Status</a> page for more details.
 56 |             </div>
 57 |         `;
 58 | 
 59 |         throw new Error("WebGPU not supported");
 60 |     }
 61 | }
 62 | 
 63 | export function addDescription(title, description, url) {
 64 |     title = `WebGPU Example: ${title}`;
 65 | 
 66 |     const titleElement = document.createElement("title");
 67 |     titleElement.innerText = title;
 68 |     document.head.appendChild(titleElement);
 69 | 
 70 |     const descriptionElement = document.createElement("div");
 71 |     descriptionElement.id = "description";
 72 |     descriptionElement.style.width = "400px";
 73 |     descriptionElement.innerHTML = `
 74 |         <h2>${title}</h2>
 75 |         <div>${description}</div>
 76 |         <div><a href="https://github.com/tsherif/webgpu-examples/blob/gh-pages/${url}">Source Code</a></div>
 77 |     `;
 78 |     document.body.appendChild(descriptionElement);
 79 | }
 80 | 
 81 | export function xformMatrix(xform, translate, rotate, scale) {
 82 |     translate = translate || ZEROS;
 83 |     rotate = rotate || ZEROS;
 84 |     scale = scale || ONES;
 85 | 
 86 |     mat4.fromTranslation(translateMat, translate);
 87 |     mat4.fromXRotation(rotateXMat, rotate[0]);
 88 |     mat4.fromYRotation(rotateYMat, rotate[1]);
 89 |     mat4.fromZRotation(rotateZMat, rotate[2]);
 90 |     mat4.fromScaling(scaleMat, scale);
 91 | 
 92 |     mat4.multiply(xform, rotateXMat, scaleMat);
 93 |     mat4.multiply(xform, rotateYMat, xform);
 94 |     mat4.multiply(xform, rotateZMat, xform);
 95 |     mat4.multiply(xform, translateMat, xform);
 96 | }
 97 | 
 98 | export function getImageData(img) {
 99 |     textureDataCanvas.width = img.width;
100 |     textureDataCanvas.height = img.height;
101 |     textureDataCtx.drawImage(img, 0, 0);
102 |     return textureDataCtx.getImageData(0, 0, img.width, img.height).data;
103 | }
104 | 
105 | export function createCube(options) {
106 |     options = options || {};
107 | 
108 |     let dimensions = options.dimensions || [1, 1, 1];
109 |     let position = options.position || [-dimensions[0] / 2, -dimensions[1] / 2, -dimensions[2] / 2];
110 |     let x = position[0];
111 |     let y = position[1];
112 |     let z = position[2];
113 |     let width = dimensions[0];
114 |     let height = dimensions[1];
115 |     let depth = dimensions[2];
116 | 
117 |     let fbl = {x: x,         y: y,          z: z + depth};
118 |     let fbr = {x: x + width, y: y,          z: z + depth};
119 |     let ftl = {x: x,         y: y + height, z: z + depth};
120 |     let ftr = {x: x + width, y: y + height, z: z + depth};
121 |     let bbl = {x: x,         y: y,          z: z };
122 |     let bbr = {x: x + width, y: y,          z: z };
123 |     let btl = {x: x,         y: y + height, z: z };
124 |     let btr = {x: x + width, y: y + height, z: z };
125 | 
126 |     let positions = new Float32Array([
127 |         //front
128 |         fbl.x, fbl.y, fbl.z,
129 |         fbr.x, fbr.y, fbr.z,
130 |         ftl.x, ftl.y, ftl.z,
131 |         ftl.x, ftl.y, ftl.z,
132 |         fbr.x, fbr.y, fbr.z,
133 |         ftr.x, ftr.y, ftr.z,
134 | 
135 |         //right
136 |         fbr.x, fbr.y, fbr.z,
137 |         bbr.x, bbr.y, bbr.z,
138 |         ftr.x, ftr.y, ftr.z,
139 |         ftr.x, ftr.y, ftr.z,
140 |         bbr.x, bbr.y, bbr.z,
141 |         btr.x, btr.y, btr.z,
142 | 
143 |         //back
144 |         fbr.x, bbr.y, bbr.z,
145 |         bbl.x, bbl.y, bbl.z,
146 |         btr.x, btr.y, btr.z,
147 |         btr.x, btr.y, btr.z,
148 |         bbl.x, bbl.y, bbl.z,
149 |         btl.x, btl.y, btl.z,
150 | 
151 |         //left
152 |         bbl.x, bbl.y, bbl.z,
153 |         fbl.x, fbl.y, fbl.z,
154 |         btl.x, btl.y, btl.z,
155 |         btl.x, btl.y, btl.z,
156 |         fbl.x, fbl.y, fbl.z,
157 |         ftl.x, ftl.y, ftl.z,
158 | 
159 |         //top
160 |         ftl.x, ftl.y, ftl.z,
161 |         ftr.x, ftr.y, ftr.z,
162 |         btl.x, btl.y, btl.z,
163 |         btl.x, btl.y, btl.z,
164 |         ftr.x, ftr.y, ftr.z,
165 |         btr.x, btr.y, btr.z,
166 | 
167 |         //bottom
168 |         bbl.x, bbl.y, bbl.z,
169 |         bbr.x, bbr.y, bbr.z,
170 |         fbl.x, fbl.y, fbl.z,
171 |         fbl.x, fbl.y, fbl.z,
172 |         bbr.x, bbr.y, bbr.z,
173 |         fbr.x, fbr.y, fbr.z
174 |     ]);
175 | 
176 |     let uvs = new Float32Array([
177 |         //front
178 |         0, 0,
179 |         1, 0,
180 |         0, 1,
181 |         0, 1,
182 |         1, 0,
183 |         1, 1,
184 | 
185 |         //right
186 |         0, 0,
187 |         1, 0,
188 |         0, 1,
189 |         0, 1,
190 |         1, 0,
191 |         1, 1,
192 | 
193 |         //back
194 |         0, 0,
195 |         1, 0,
196 |         0, 1,
197 |         0, 1,
198 |         1, 0,
199 |         1, 1,
200 | 
201 |         //left
202 |         0, 0,
203 |         1, 0,
204 |         0, 1,
205 |         0, 1,
206 |         1, 0,
207 |         1, 1,
208 | 
209 |         //top
210 |         0, 0,
211 |         1, 0,
212 |         0, 1,
213 |         0, 1,
214 |         1, 0,
215 |         1, 1,
216 | 
217 |         //bottom
218 |         0, 0,
219 |         1, 0,
220 |         0, 1,
221 |         0, 1,
222 |         1, 0,
223 |         1, 1
224 |     ]);
225 | 
226 |     let normals = new Float32Array([
227 |         // front
228 |         0, 0, 1,
229 |         0, 0, 1,
230 |         0, 0, 1,
231 |         0, 0, 1,
232 |         0, 0, 1,
233 |         0, 0, 1,
234 | 
235 |         // right
236 |         1, 0, 0,
237 |         1, 0, 0,
238 |         1, 0, 0,
239 |         1, 0, 0,
240 |         1, 0, 0,
241 |         1, 0, 0,
242 | 
243 |         // back
244 |         0, 0, -1,
245 |         0, 0, -1,
246 |         0, 0, -1,
247 |         0, 0, -1,
248 |         0, 0, -1,
249 |         0, 0, -1,
250 | 
251 |         // left
252 |         -1, 0, 0,
253 |         -1, 0, 0,
254 |         -1, 0, 0,
255 |         -1, 0, 0,
256 |         -1, 0, 0,
257 |         -1, 0, 0,
258 | 
259 |         // top
260 |         0, 1, 0,
261 |         0, 1, 0,
262 |         0, 1, 0,
263 |         0, 1, 0,
264 |         0, 1, 0,
265 |         0, 1, 0,
266 | 
267 |         // bottom
268 |         0, -1, 0,
269 |         0, -1, 0,
270 |         0, -1, 0,
271 |         0, -1, 0,
272 |         0, -1, 0,
273 |         0, -1, 0
274 |     ]);
275 | 
276 |     return {
277 |         positions,
278 |         normals,
279 |         uvs
280 |     };
281 | 
282 | }
283 | 
284 | export function createSphere(options) {
285 |     options = options || {};
286 | 
287 |     let longBands = options.longBands || 32;
288 |     let latBands = options.latBands || 32;
289 |     let radius = options.radius || 1;
290 |     let lat_step = Math.PI / latBands;
291 |     let long_step = 2 * Math.PI / longBands;
292 |     let num_positions = longBands * latBands * 4;
293 |     let num_indices = longBands * latBands * 6;
294 |     let lat_angle, long_angle;
295 |     let positions = new Float32Array(num_positions * 3);
296 |     let normals = new Float32Array(num_positions * 3);
297 |     let uvs = new Float32Array(num_positions * 2);
298 |     let indices = new Uint32Array(num_indices);
299 |     let x1, x2, x3, x4,
300 |         y1, y2,
301 |         z1, z2, z3, z4,
302 |         u1, u2,
303 |         v1, v2;
304 |     let i, j;
305 |     let k = 0, l = 0;
306 |     let vi, ti;
307 | 
308 |     for (i = 0; i < latBands; i++) {
309 |         lat_angle = i * lat_step;
310 |         y1 = Math.cos(lat_angle);
311 |         y2 = Math.cos(lat_angle + lat_step);
312 |         for (j = 0; j < longBands; j++) {
313 |             long_angle = j * long_step;
314 |             x1 = Math.sin(lat_angle) * Math.cos(long_angle);
315 |             x2 = Math.sin(lat_angle) * Math.cos(long_angle + long_step);
316 |             x3 = Math.sin(lat_angle + lat_step) * Math.cos(long_angle);
317 |             x4 = Math.sin(lat_angle + lat_step) * Math.cos(long_angle + long_step);
318 |             z1 = Math.sin(lat_angle) * Math.sin(long_angle);
319 |             z2 = Math.sin(lat_angle) * Math.sin(long_angle + long_step);
320 |             z3 = Math.sin(lat_angle + lat_step) * Math.sin(long_angle);
321 |             z4 = Math.sin(lat_angle + lat_step) * Math.sin(long_angle + long_step);
322 |             u1 = 1 - j / longBands;
323 |             u2 = 1 - (j + 1) / longBands;
324 |             v1 = 1 - i / latBands;
325 |             v2 = 1 - (i + 1) / latBands;
326 |             vi = k * 3;
327 |             ti = k * 2;
328 | 
329 |             positions[vi] = x1 * radius;
330 |             positions[vi+1] = y1 * radius;
331 |             positions[vi+2] = z1 * radius; //v0
332 | 
333 |             positions[vi+3] = x2 * radius;
334 |             positions[vi+4] = y1 * radius;
335 |             positions[vi+5] = z2 * radius; //v1
336 | 
337 |             positions[vi+6] = x3 * radius;
338 |             positions[vi+7] = y2 * radius;
339 |             positions[vi+8] = z3 * radius; // v2
340 | 
341 | 
342 |             positions[vi+9] = x4 * radius;
343 |             positions[vi+10] = y2 * radius;
344 |             positions[vi+11] = z4 * radius; // v3
345 | 
346 |             normals[vi] = x1;
347 |             normals[vi+1] = y1;
348 |             normals[vi+2] = z1;
349 | 
350 |             normals[vi+3] = x2;
351 |             normals[vi+4] = y1;
352 |             normals[vi+5] = z2;
353 | 
354 |             normals[vi+6] = x3;
355 |             normals[vi+7] = y2;
356 |             normals[vi+8] = z3;
357 | 
358 |             normals[vi+9] = x4;
359 |             normals[vi+10] = y2;
360 |             normals[vi+11] = z4;
361 | 
362 |             uvs[ti] = u1;
363 |             uvs[ti+1] = v1;
364 | 
365 |             uvs[ti+2] = u2;
366 |             uvs[ti+3] = v1;
367 | 
368 |             uvs[ti+4] = u1;
369 |             uvs[ti+5] = v2;
370 | 
371 |             uvs[ti+6] = u2;
372 |             uvs[ti+7] = v2;
373 | 
374 |             indices[l    ] = k;
375 |             indices[l + 1] = k + 1;
376 |             indices[l + 2] = k + 2;
377 |             indices[l + 3] = k + 2;
378 |             indices[l + 4] = k + 1;
379 |             indices[l + 5] = k + 3;
380 | 
381 |             k += 4;
382 |             l += 6;
383 |         }
384 |     }
385 | 
386 |     return {
387 |         positions,
388 |         normals,
389 |         uvs,
390 |         indices
391 |     };
392 | }
393 | 
394 | export function createQuad() {
395 |     return {
396 |         positions: new Float32Array([
397 |             -1, -1,
398 |             1, -1,
399 |             -1, 1,
400 |             1, 1,
401 |         ]),
402 |         normals: new Float32Array([
403 |             0, 0, 1,
404 |             0, 0, 1,
405 |             0, 0, 1,
406 |             0, 0, 1
407 |         ]),
408 |         uvs: new Float32Array([
409 |             0, 0,
410 |             1, 0,
411 |             0, 1,
412 |             1, 1,
413 |         ])
414 |     }
415 | }
416 | 
417 | export function loadImageBitmaps(urls) {
418 |     return Promise.all(
419 |         urls.map(
420 |             url => 
421 |                 fetch(url)
422 |                     .then(resp => resp.blob())
423 |                     .then(blob => createImageBitmap(blob, { colorSpaceConversion: 'none' }))
424 |         )
425 |     );
426 | }
427 | 
428 | export function randomRange(min, max) {
429 |     return min + Math.random() * (max - min);
430 | }
431 | 
432 | export function parseAdapterInfo(info) {
433 |     let gpuInfo = "";
434 |     if (info.vendor) {
435 |         gpuInfo = `GPU: ${info.vendor}`;
436 |         if (info.architecture) {
437 |             gpuInfo += ` (${info.architecture})`
438 |         }
439 |     }
440 | 
441 |     return gpuInfo;
442 | }
443 | 
444 | export function getMipLevelCount(width, height = 0, depth = 0) {
445 |     return 1 + Math.floor(Math.log2(Math.max(width, height, depth)));
446 | }
447 | 
448 | // From: https://webgpufundamentals.org/webgpu/lessons/webgpu-importing-textures.html
449 | export const generate2DMipmap = (() => {
450 |     let sampler;
451 |     let module;
452 | 
453 |     const pipelines = {};
454 | 
455 |     return function generate2DMipmap(device, texture) {
456 |         module ??= device.createShaderModule({
457 |             label: "generateMipmap shader module",
458 |             code: `
459 |                 struct VSOut {
460 |                     @builtin(position) position: vec4f,
461 |                     @location(0) uv: vec2f
462 |                 }
463 | 
464 |                 @vertex 
465 |                 fn vs(@builtin(vertex_index) index: u32) -> VSOut {
466 |                     let positions = array(
467 |                         vec2f(-1, -1),
468 |                         vec2f(1, -1),
469 |                         vec2f(-1, 1),
470 |                         vec2f(1, 1)
471 |                     );
472 | 
473 |                     let pos = positions[index];
474 |                     let uv = pos * 0.5 + 0.5;
475 | 
476 |                     var vsOut: VSOut;
477 |                     vsOut.position = vec4f(pos, 0.0, 1.0);
478 |                     vsOut.uv = vec2f(uv.x, 1.0 - uv.y);
479 | 
480 |                     return vsOut;
481 |                 }
482 | 
483 |                 @group(0) @binding(0) var mipmapSampler: sampler;
484 |                 @group(0) @binding(1) var mipmapTexture: texture_2d<f32>;
485 |             
486 |             
487 |                 @fragment
488 |                 fn fs(fsIn: VSOut) -> @location(0) vec4f {
489 |                     return textureSample(mipmapTexture, mipmapSampler, fsIn.uv);
490 |                 }
491 |             `
492 |         });
493 | 
494 |         sampler ??= device.createSampler({
495 |             minFilter: "linear"
496 |         })
497 | 
498 |         pipelines[texture.format] ??= device.createRenderPipeline({
499 |             label: `mipmap pipeline`,
500 |             layout: 'auto',
501 |             vertex: {
502 |                 module,
503 |                 entryPoint: "vs"
504 |             },
505 |             fragment: {
506 |                 module,
507 |                 entryPoint: "fs",
508 |                 targets: [{
509 |                     format: texture.format
510 |                 }]
511 |             },
512 |             primitive: {
513 |                 topology: "triangle-strip"
514 |             }
515 |         })
516 | 
517 |         const pipeline = pipelines[texture.format];
518 | 
519 |         const encoder = device.createCommandEncoder({
520 |             label: "mipmap command encoder"
521 |         });
522 | 
523 |         let { width, height } = texture;
524 |         let mipLevel = 0;
525 |         
526 |         while (width > 1 || height > 1) {
527 |             width = Math.max(1, Math.floor(width / 2));
528 |             height = Math.max(1, Math.floor(height / 2));
529 | 
530 |             const bindGroup = device.createBindGroup({
531 |                 layout: pipeline.getBindGroupLayout(0),
532 |                 entries: [
533 |                     { 
534 |                         binding: 0, 
535 |                         resource: sampler
536 |                     },
537 |                     { 
538 |                         binding: 1, 
539 |                         resource: texture.createView({
540 |                             baseMipLevel: mipLevel,
541 |                             mipLevelCount: 1
542 |                         })
543 |                     },
544 |                 ]
545 |             })
546 | 
547 |             const pass = encoder.beginRenderPass({
548 |                 label: `mipmap level ${mipLevel} render pass`,
549 |                 colorAttachments: [
550 |                     {
551 |                         view: texture.createView({
552 |                             baseMipLevel: mipLevel + 1,
553 |                             mipLevelCount: 1
554 |                         }),
555 |                         loadOp: "load",
556 |                         storeOp: "store"
557 |                     }
558 |                 ]
559 |             });
560 | 
561 |             pass.setPipeline(pipeline);
562 |             pass.setBindGroup(0, bindGroup);
563 |             pass.draw(4);
564 |             pass.end();
565 | 
566 |             ++mipLevel;
567 |         }
568 | 
569 |         device.queue.submit([encoder.finish()])
570 |     };
571 | })()


--------------------------------------------------------------------------------
/particles.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <link rel="stylesheet" href="css/example.css">
  6 | </head>
  7 | <!--
  8 |   The MIT License (MIT)
  9 | 
 10 |   Copyright (c) 2020 Tarek Sherif
 11 | 
 12 |   Permission is hereby granted, free of charge, to any person obtaining a copy of
 13 |   this software and associated documentation files (the "Software"), to deal in
 14 |   the Software without restriction, including without limitation the rights to
 15 |   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 16 |   the Software, and to permit persons to whom the Software is furnished to do so,
 17 |   subject to the following conditions:
 18 | 
 19 |   The above copyright notice and this permission notice shall be included in all
 20 |   copies or substantial portions of the Software.
 21 | 
 22 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 23 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 24 |   FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 25 |   COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 26 |   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 27 |   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 28 | -->
 29 | <body>
 30 | <canvas id="webgpu-canvas"></canvas>
 31 | <div id="stats">
 32 |     <div id="device-info"></div>
 33 |     <div>
 34 |         CPU Frame Time: <span id="cpu-time"></span>
 35 |     </div>
 36 |     <div>
 37 |         GPU Compute Time: <span id="compute-time"></span>
 38 |     </div>
 39 |     <div>
 40 |         GPU Draw Time: <span id="draw-time"></span>
 41 |     </div>
 42 | </div>
 43 | <script type="module">
 44 | import { checkSupport, addDescription, parseAdapterInfo } from "./utils/utils.js";
 45 | import { Timer } from "./utils/Timer.js";
 46 | 
 47 | const WORKGROUP_SIZE = 64;
 48 | const NUM_WORKGROUPS = 1000;
 49 | const NUM_PARTICLES = WORKGROUP_SIZE * NUM_WORKGROUPS;
 50 | const PARTICLE_SIZE = 2;
 51 | 
 52 | checkSupport();
 53 | addDescription(
 54 |     "Particles",
 55 |     `Using a compute shader to simulate gravity on ${NUM_PARTICLES} instanced quad particles.`,
 56 |     "particles.html"
 57 | );
 58 | 
 59 | (async () => {
 60 |     //////////////////////////////////////////
 61 |     // Set up WebGPU adapter
 62 |     //////////////////////////////////////////
 63 | 
 64 |     const adapter = await navigator.gpu.requestAdapter();
 65 |     const presentationFormat = navigator.gpu.getPreferredCanvasFormat(adapter);
 66 | 
 67 |     ////////////////////////////////////
 68 |     // Set up device and canvas context
 69 |     ////////////////////////////////////
 70 | 
 71 |     const [adapterInfo, device] = await Promise.all([
 72 |         adapter.requestAdapterInfo(),
 73 |         adapter.requestDevice({
 74 |             requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
 75 |         })
 76 |     ]);
 77 | 
 78 |     const canvas = document.getElementById("webgpu-canvas");
 79 |     canvas.width = window.innerWidth;
 80 |     canvas.height = window.innerHeight;
 81 |     const context = canvas.getContext("webgpu");
 82 |     
 83 |     context.configure({
 84 |         device,
 85 |         format: presentationFormat
 86 |     });
 87 | 
 88 |     document.getElementById("device-info").innerText = parseAdapterInfo(adapterInfo);
 89 | 
 90 |     const timer = new Timer(device);
 91 | 
 92 |     const cpuTimeDisplay = document.getElementById("cpu-time");
 93 |     const computeTimeDisplay = document.getElementById("compute-time");
 94 |     const drawTimeDisplay = document.getElementById("draw-time");
 95 | 
 96 |     ////////////////////////////////////////////////////////
 97 |     // Create buffers for compute pass
 98 |     // (positionBuffer also used in render pass)
 99 |     ////////////////////////////////////////////////////////
100 | 
101 |     const positionBuffer = device.createBuffer({
102 |         size: 16 * NUM_PARTICLES,
103 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST | GPUBufferUsage.STORAGE,
104 |     });
105 |     const positionBufferData = new Float32Array(NUM_PARTICLES * 4);
106 |     for (let i = 0; i < positionBufferData.length; i += 4) {
107 |         positionBufferData[i]     = Math.random() * 2 - 1;
108 |         positionBufferData[i + 1] = Math.random() * 2 - 1;
109 |         positionBufferData[i + 2] = Math.random() * 2 - 1;
110 |         positionBufferData[i + 3] = 1;
111 |     }
112 |     device.queue.writeBuffer(positionBuffer, 0, positionBufferData);
113 | 
114 |     const velocityBuffer = device.createBuffer({
115 |         size: 16 * NUM_PARTICLES,
116 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST | GPUBufferUsage.STORAGE,
117 |     });
118 |     const velocityBufferData = new Float32Array(NUM_PARTICLES * 4);
119 |     for (let i = 0; i < velocityBufferData.length; i += 4) {
120 |         velocityBufferData[i]     = Math.random() * 0.002 - 0.001;
121 |         velocityBufferData[i + 1] = Math.random() * 0.002 - 0.001;
122 |         velocityBufferData[i + 2] = Math.random() * 0.002 - 0.001;
123 |         velocityBufferData[i + 3] = 0;
124 |     }
125 |     device.queue.writeBuffer(velocityBuffer, 0, velocityBufferData);
126 | 
127 |     ///////////////////////////////////
128 |     // Create compute shader module
129 |     //////////////////////////////////
130 | 
131 |     const computeShaderModule = device.createShaderModule({
132 |         code: `
133 |             struct Mass {
134 |                 position1: vec4f,
135 |                 position2: vec4f,
136 |                 position3: vec4f,
137 |                 factor1: f32,
138 |                 factor2: f32,
139 |                 factor3: f32
140 |             };
141 | 
142 |             @group(0) @binding(0) var<storage, read_write> positions: array<vec4f>;
143 |             @group(0) @binding(1) var<storage, read_write> velocities: array<vec4f>; 
144 |             @group(0) @binding(2) var<uniform> mass: Mass;
145 | 
146 |             @compute @workgroup_size(${WORKGROUP_SIZE})
147 |             fn cs(@builtin(global_invocation_id) global_id: vec3u) {
148 |                 let index = global_id.x;
149 |                 let position = positions[index].xyz;
150 |                 var velocity = velocities[index].xyz;
151 | 
152 |                 var massVec = mass.position1.xyz - position;
153 |                 var massDist2 = max(0.01, dot(massVec, massVec));
154 |                 var acceleration = mass.factor1 * normalize(massVec) / massDist2;
155 |                 massVec = mass.position2.xyz - position;
156 |                 massDist2 = max(0.01, dot(massVec, massVec));
157 |                 acceleration += mass.factor2 * normalize(massVec) / massDist2;
158 |                 massVec = mass.position3.xyz - position;
159 |                 massDist2 = max(0.01, dot(massVec, massVec));
160 |                 acceleration += mass.factor3 * normalize(massVec) / massDist2;
161 | 
162 |                 velocity += acceleration;
163 |                 velocity *= 0.9999;
164 | 
165 |                 positions[index] = vec4f(position + velocity, 1);
166 |                 velocities[index] = vec4f(velocity, 0);
167 |             }
168 | 
169 |         `
170 |     })
171 | 
172 |     const computePipeline = device.createComputePipeline({
173 |         layout: "auto",
174 |         compute: {
175 |             module: computeShaderModule,
176 |             entryPoint: "cs"
177 |         }
178 |     });
179 | 
180 |     //////////////////////////
181 |     // Compute uniform buffer 
182 |     //////////////////////////
183 | 
184 |     const computeUniformData = new Float32Array([
185 |         Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, 0, 1.0,          // Mass 1 position
186 |         Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, 0, 1.0,          // Mass 2 position
187 |         Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, 0, 1.0,          // Mass 3 position
188 |         Math.random() / 30000, Math.random() / 30000, Math.random() / 30000, 0 // Mass factors
189 |     ]);
190 | 
191 |     const computeUniformBuffer = device.createBuffer({
192 |         size: computeUniformData.byteLength,
193 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
194 |     });
195 | 
196 |     device.queue.writeBuffer(computeUniformBuffer, 0, computeUniformData);
197 | 
198 |     ////////////////////////
199 |     // Compute bind group
200 |     ////////////////////////
201 | 
202 |     const computeBindGroup = device.createBindGroup({
203 |         layout: computePipeline.getBindGroupLayout(0),
204 |         entries: [
205 |             {
206 |                 binding: 0,
207 |                 resource: {
208 |                     buffer: positionBuffer
209 |                 }
210 |             },
211 |             {
212 |                 binding: 1,
213 |                 resource: {
214 |                     buffer: velocityBuffer
215 |                 }
216 |             },
217 |             {
218 |                 binding: 2,
219 |                 resource: {
220 |                     buffer: computeUniformBuffer
221 |                 }
222 |             }
223 |         ]
224 |     });
225 | 
226 |     const computePassDescription = {
227 |         timestampWrites: timer.gpuPassDescriptor("compute")
228 |     };
229 | 
230 |     ///////////////////////////////////
231 |     // Create buffers for render pass
232 |     ///////////////////////////////////
233 | 
234 |     const vertexBuffer = device.createBuffer({
235 |         size: 32,
236 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
237 |     });
238 |     device.queue.writeBuffer(vertexBuffer, 0, new Float32Array([
239 |         -1.0, -1.0,
240 |         1.0, -1.0,
241 |         -1.0, 1.0,
242 |         1.0, 1.0
243 |     ]));
244 | 
245 |     const colorBuffer = device.createBuffer({
246 |         size: 4 * NUM_PARTICLES,
247 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
248 |     });
249 |     const colorBufferData = new Uint8Array(4 * NUM_PARTICLES);
250 |     for (let i = 0; i < colorBufferData.length; i += 4) {
251 |         colorBufferData[i]     = Math.floor(Math.random() * 256);
252 |         colorBufferData[i + 1] = Math.floor(Math.random() * 256);
253 |         colorBufferData[i + 2] = Math.floor(Math.random() * 256);
254 |         colorBufferData[i + 3] = 128;
255 |     }
256 |     device.queue.writeBuffer(colorBuffer, 0, colorBufferData);
257 | 
258 |     /////////////////////////////////
259 |     // Create render shader module
260 |     /////////////////////////////////
261 | 
262 |     const renderShaderModule = device.createShaderModule({
263 |         code: `
264 |             struct VertexUniforms {
265 |                 screenDimensions: vec2f,
266 |                 particleSize: f32
267 |             };
268 | 
269 |             struct VSOut {
270 |                 @builtin(position) clipPosition: vec4f,
271 |                 @location(0) color: vec4f
272 |             };
273 | 
274 |             @group(0) @binding(0) var<uniform> vertexUniforms: VertexUniforms;
275 | 
276 |             @vertex
277 |             fn vs(
278 |                 @location(0) vertexPosition: vec2f,
279 |                 @location(1) color: vec4f,
280 |                 @location(2) position: vec3f
281 |             ) -> VSOut {
282 |                 var vsOut: VSOut;
283 |                 vsOut.clipPosition = vec4f(vertexPosition * vertexUniforms.particleSize / vertexUniforms.screenDimensions + position.xy, position.z, 1.0);
284 |                 vsOut.color = color;
285 | 
286 |                 return vsOut;
287 |             }             
288 | 
289 |             @fragment 
290 |             fn fs(@location(0) color: vec4f) -> @location(0) vec4f {
291 |                 return vec4f(color.rgb * color.a, color.a);
292 |             } 
293 |         `
294 |     });
295 | 
296 |      /////////////////////////////////
297 |     // Create render pipeline
298 |     /////////////////////////////////
299 | 
300 |     const renderPipeline = device.createRenderPipeline({
301 |         layout: "auto",
302 |         vertex: {
303 |             module: renderShaderModule,
304 |             entryPoint: "vs",
305 |             buffers: [
306 |                 {
307 |                     arrayStride: 8,
308 |                     attributes: [{
309 |                         shaderLocation: 0,
310 |                         format: "float32x2",
311 |                         offset: 0
312 |                     }]
313 |                 },
314 |                 {
315 |                     arrayStride: 4,
316 |                     stepMode: "instance",
317 |                     attributes: [{
318 |                         shaderLocation: 1,
319 |                         format: "unorm8x4",
320 |                         offset: 0
321 |                     }]
322 |                 },
323 |                 {
324 |                     arrayStride: 16,
325 |                     stepMode: "instance",
326 |                     attributes: [{
327 |                         shaderLocation: 2,
328 |                         format: "float32x4",
329 |                         offset: 0
330 |                     }]
331 |                 }
332 |             ]
333 |         },
334 |         fragment: {
335 |             module: renderShaderModule,
336 |             entryPoint: "fs",
337 |             targets: [{
338 |                 format: presentationFormat,
339 |                 blend: {
340 |                     color: {
341 |                         srcFactor: "one",
342 |                         dstFactor: "one-minus-src-alpha"
343 |                     },
344 |                     alpha: {
345 |                         srcFactor: "one",
346 |                         dstFactor: "one-minus-src-alpha"
347 |                     }
348 |                 }
349 |             }]
350 |         },
351 |         multisample: {
352 |             count: 4
353 |         },
354 |         primitive: {
355 |             topology: "triangle-strip",
356 |             stripIndexFormat: "uint32"
357 |         }
358 |     });
359 | 
360 |     ///////////////////////////////////////////////
361 |     // Rendering uniform buffer
362 |     ///////////////////////////////////////////////
363 | 
364 |     const vertexUniformBuffer = device.createBuffer({
365 |         size: 16,
366 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
367 |     });
368 | 
369 |     device.queue.writeBuffer(vertexUniformBuffer, 0, new Float32Array([
370 |         canvas.width, canvas.height, PARTICLE_SIZE
371 |     ]));
372 | 
373 |     const vertexUniformBindGroup = device.createBindGroup({
374 |         layout: renderPipeline.getBindGroupLayout(0),
375 |         entries: [{
376 |             binding: 0,
377 |             resource: {
378 |                 buffer: vertexUniformBuffer
379 |             }
380 |         }]
381 |     });
382 | 
383 | 
384 |     ///////////////////////////
385 |     // Render pass description
386 |     ///////////////////////////
387 | 
388 |     let msaaTexture = device.createTexture({
389 |         label: 'msaa texture',
390 |         size: [canvas.width, canvas.height],
391 |         format: presentationFormat,
392 |         usage: GPUTextureUsage.RENDER_ATTACHMENT,
393 |         sampleCount: 4
394 |     });
395 | 
396 |     const renderPassDescription = {
397 |         colorAttachments: [{
398 |             view: msaaTexture.createView(),
399 |             resolveTarget: context.getCurrentTexture().createView(),
400 |             loadOp: "clear",
401 |             storeOp: "store",
402 |             clearValue: [0, 0, 0, 1]
403 |         }],
404 |         timestampWrites: timer.gpuPassDescriptor("draw")
405 |     };
406 | 
407 |     window.addEventListener("resize", () => {
408 |         canvas.width = window.innerWidth;
409 |         canvas.height = window.innerHeight;
410 | 
411 |         msaaTexture.destroy();
412 |         msaaTexture = device.createTexture({
413 |             label: 'msaa texture',
414 |             size: [canvas.width, canvas.height],
415 |             format: presentationFormat,
416 |             usage: GPUTextureUsage.RENDER_ATTACHMENT,
417 |             sampleCount: 4
418 |         });
419 | 
420 |         renderPassDescription.colorAttachments[0].view = msaaTexture.createView()
421 |     });
422 | 
423 |     requestAnimationFrame(function draw() {
424 |         timer.cpuTimeStart("frame");
425 | 
426 |         /////////////////////////
427 |         // Set up command buffer
428 |         /////////////////////////
429 | 
430 |         const commandEncoder = device.createCommandEncoder();
431 | 
432 |         ///////////////////////
433 |         // Encode compute pass
434 |         ///////////////////////
435 | 
436 |         const computePass = commandEncoder.beginComputePass(computePassDescription);
437 |         computePass.setPipeline(computePipeline);
438 |         computePass.setBindGroup(0, computeBindGroup);
439 |         computePass.dispatchWorkgroups(NUM_WORKGROUPS);
440 |         computePass.end();
441 | 
442 |         ////////////////////////////////
443 |         // Get current canvas texture
444 |         ////////////////////////////////
445 | 
446 |         renderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();
447 | 
448 |         ///////////////////////
449 |         // Encode render pass
450 |         ///////////////////////
451 | 
452 |         const renderPass = commandEncoder.beginRenderPass(renderPassDescription);
453 |         renderPass.setPipeline(renderPipeline);
454 | 
455 |         // First argument here refers to array index
456 |         // in renderPipeline vertexState.vertexBuffers
457 |         renderPass.setVertexBuffer(0, vertexBuffer);
458 |         renderPass.setVertexBuffer(1, colorBuffer);
459 |         renderPass.setVertexBuffer(2, positionBuffer);
460 |         renderPass.setBindGroup(0, vertexUniformBindGroup);
461 |         
462 |         renderPass.draw(4, NUM_PARTICLES);
463 |         renderPass.end();
464 | 
465 |         //////////////////////////
466 |         // Submit command buffer
467 |         //////////////////////////
468 | 
469 |         timer.gpuBeforeSubmit(commandEncoder);
470 | 
471 |         device.queue.submit([commandEncoder.finish()]);
472 | 
473 |         timer.gpuAfterSubmit();
474 |         timer.cpuTimeEnd("frame");
475 | 
476 |         cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
477 |         computeTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["compute"].toFixed(2)}ms` : "N/A";
478 |         drawTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["draw"].toFixed(2)}ms` : "N/A";
479 | 
480 |         requestAnimationFrame(draw);
481 |     });
482 | })();
483 | </script>
484 | </body>
485 | </html>


--------------------------------------------------------------------------------
/pick.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <link rel="stylesheet" href="css/example.css">
  6 |     <script src="utils/gl-matrix.js"></script>
  7 | </head>
  8 | <!--
  9 |   The MIT License (MIT)
 10 | 
 11 |   Copyright (c) 2024 Tarek Sherif
 12 | 
 13 |   Permission is hereby granted, free of charge, to any person obtaining a copy of
 14 |   this software and associated documentation files (the "Software"), to deal in
 15 |   the Software without restriction, including without limitation the rights to
 16 |   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 17 |   the Software, and to permit persons to whom the Software is furnished to do so,
 18 |   subject to the following conditions:
 19 | 
 20 |   The above copyright notice and this permission notice shall be included in all
 21 |   copies or substantial portions of the Software.
 22 | 
 23 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 24 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 25 |   FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 26 |   COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 27 |   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 28 |   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 29 | -->
 30 | <body>
 31 | <canvas id="webgpu-canvas"></canvas>
 32 | <div id="stats">
 33 |     <div id="device-info"></div>
 34 |     <div>
 35 |         CPU Frame Time: <span id="cpu-time"></span>
 36 |     </div>
 37 |     <div>
 38 |         GPU Pick Time: <span id="pick-time"></span>
 39 |     </div>
 40 |     <div>
 41 |         GPU Draw Time: <span id="draw-time"></span>
 42 |     </div>
 43 | </div>
 44 | <script type="module">
 45 | import { checkSupport, addDescription, loadImageBitmaps, createCube, xformMatrix, randomRange, getMipLevelCount, generate2DMipmap, parseAdapterInfo } from "./utils/utils.js";
 46 | import { Timer } from "./utils/Timer.js";
 47 | 
 48 | const { mat4, vec3 } = glMatrix;
 49 | 
 50 | checkSupport();
 51 | addDescription(
 52 |     "Picking",
 53 |     "Interact with rendered objects using color picking.",
 54 |     "pick.html"
 55 | );
 56 | 
 57 | (async () => {
 58 |     //////////////////////////////////////////
 59 |     // Set up WebGPU adapter, load
 60 |     // texture image
 61 |     //////////////////////////////////////////
 62 | 
 63 |     const [adapter, [image]] = await Promise.all([
 64 |         navigator.gpu.requestAdapter(),
 65 |         loadImageBitmaps(["img/webgpu.png"])
 66 |     ]);
 67 | 
 68 |     const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
 69 | 
 70 |     ////////////////////////////////////
 71 |     // Set up device and canvas context
 72 |     ////////////////////////////////////
 73 | 
 74 |     const [adapterInfo, device] = await Promise.all([
 75 |         adapter.requestAdapterInfo(),
 76 |         adapter.requestDevice({
 77 |             requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
 78 |         })
 79 |     ]);
 80 |     
 81 |     const canvas = document.getElementById("webgpu-canvas");
 82 |     canvas.width = window.innerWidth;
 83 |     canvas.height = window.innerHeight;
 84 | 
 85 |     const context = canvas.getContext("webgpu");
 86 |     context.configure({
 87 |         device,
 88 |         format: presentationFormat
 89 |     });
 90 | 
 91 |     document.getElementById("device-info").innerText = parseAdapterInfo(adapterInfo);
 92 | 
 93 |     const timer = new Timer(device);
 94 | 
 95 |     const cpuTimeDisplay = document.getElementById("cpu-time");
 96 |     const pickTimeDisplay = document.getElementById("pick-time");
 97 |     const drawTimeDisplay = document.getElementById("draw-time");
 98 |     
 99 |     ////////////////////////////////////////
100 |     // Create vertex buffers and load data
101 |     ////////////////////////////////////////
102 | 
103 |     const cubeData = createCube();
104 |     const numVertices = cubeData.positions.length / 3;
105 | 
106 |     const positionBuffer = device.createBuffer({
107 |         size: cubeData.positions.byteLength,
108 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
109 |     });
110 |     const normalBuffer = device.createBuffer({
111 |         size: cubeData.normals.byteLength,
112 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
113 |     });
114 |     const uvBuffer = device.createBuffer({
115 |         size: cubeData.uvs.byteLength,
116 |         usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
117 |     });
118 | 
119 |     device.queue.writeBuffer(positionBuffer, 0, cubeData.positions);
120 |     device.queue.writeBuffer(normalBuffer, 0, cubeData.normals);
121 |     device.queue.writeBuffer(uvBuffer, 0, cubeData.uvs);
122 | 
123 |     /////////////////////////////////////////
124 |     // Create texture, sampler and load data
125 |     //////////////////////////////////////////
126 | 
127 |     const sampler = device.createSampler({
128 |         minFilter: "linear",
129 |         magFilter: "linear",
130 |         mipmapFilter: "linear"
131 |     });
132 | 
133 |     const texture = device.createTexture({
134 |         size: [image.width, image.height],
135 |         format: "rgba8unorm",
136 |         mipLevelCount: getMipLevelCount(image.width, image.height),
137 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
138 |     });
139 | 
140 |     device.queue.copyExternalImageToTexture(
141 |         { source: image, flipY: true },
142 |         { texture },
143 |         {
144 |             width: image.width,
145 |             height: image.height
146 |         }
147 |     );
148 | 
149 |     generate2DMipmap(device, texture);
150 | 
151 |      ///////////////////////
152 |     // Uniform values
153 |     ////////////////////////
154 |     let projectionMatrix = mat4.create();
155 |     mat4.perspectiveZO(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.5, 6.0);
156 | 
157 |     let viewMatrix = mat4.create();
158 |     let eyePosition = vec3.fromValues(0, 0, 1);
159 |     mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
160 | 
161 |     let viewProjectionMatrix = mat4.create();
162 |     mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
163 | 
164 |     let lightPosition = vec3.fromValues(1, 1, 0.5);  
165 | 
166 |     let highlightColor = new Float32Array([1.5, 1.5, 0.5, 1.0]);
167 |     let unhighlightColor = new Float32Array([1.0, 1.0, 1.0, 1.0]);
168 | 
169 |     /////////////////////
170 |     // Picking pipeline
171 |     /////////////////////
172 | 
173 |     // Picking render targets
174 |     let pickTexture = device.createTexture({
175 |         size: [canvas.width, canvas.height],
176 |         format: "rgba8unorm",
177 |         usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT
178 |     });
179 | 
180 |     let pickDepthTexture = device.createTexture({
181 |         size: [canvas.width, canvas.height],
182 |         format: "depth24plus",
183 |         usage:  GPUTextureUsage.RENDER_ATTACHMENT
184 |     });
185 | 
186 |     // Picking buffer to copy render target pixel values to
187 |     // for mapped read.
188 |     // (Will only store one pixel value.)
189 |     const pickBuffer = device.createBuffer({
190 |         size: 4,
191 |         usage:GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
192 |     });
193 | 
194 |     const pickShaderModule = device.createShaderModule({
195 |         label: 'pick shader',
196 |         code: `
197 | 
198 |         struct PickUniforms {
199 |             mvpMatrix: mat4x4f ,
200 |             pickColor: vec4f 
201 |         };
202 | 
203 |         @group(0) @binding(0) var<uniform> pickUniforms: PickUniforms;
204 | 
205 |         @vertex
206 |         fn vs(@location(0) position: vec4f) -> @builtin(position) vec4f {
207 |             return pickUniforms.mvpMatrix * position;
208 |         }
209 | 
210 |         @fragment
211 |         fn fs() -> @location(0) vec4f {
212 |            return pickUniforms.pickColor;
213 |         }
214 |     `
215 |     });
216 | 
217 |     const pickPipeline = device.createRenderPipeline({
218 |         layout: 'auto',
219 |         vertex: {
220 |             module: pickShaderModule,
221 |             entryPoint: "vs",
222 |             buffers: [
223 |                 {
224 |                     arrayStride: 12,
225 |                     attributes: [{
226 |                         shaderLocation: 0,
227 |                         format: "float32x3",
228 |                         offset: 0
229 |                     }]
230 |                 }
231 |             ]
232 |         },
233 |         fragment: {
234 |             module: pickShaderModule,
235 |             entryPoint: "fs",
236 | 
237 |             // Renders to pickTexture
238 |             targets: [{
239 |                 format: "rgba8unorm"
240 |             }]
241 |         },
242 |         primitive: {
243 |             topology: "triangle-list",
244 |             cullMode: "back"
245 |         },
246 |         depthStencil: {
247 |             format: "depth24plus",
248 |             depthWriteEnabled: true,
249 |             depthCompare: "less"
250 |         }
251 |     });
252 | 
253 | 
254 |     ///////////////////
255 |     // Draw pipeline
256 |     ///////////////////
257 | 
258 |     // Render targets
259 |     let msaaTexture = device.createTexture({
260 |         label: 'msaa texture',
261 |         size: [canvas.width, canvas.height],
262 |         format: presentationFormat,
263 |         usage: GPUTextureUsage.RENDER_ATTACHMENT,
264 |         sampleCount: 4
265 |     });
266 | 
267 |     let drawDepthTexture = device.createTexture({
268 |         size: [canvas.width, canvas.height],
269 |         format: "depth24plus",
270 |         usage:  GPUTextureUsage.RENDER_ATTACHMENT,
271 |         sampleCount: 4
272 |     });
273 | 
274 |     // Scene uniforms that are only set once.
275 |     const sceneUniformBuffer = device.createBuffer({
276 |         size: 96,
277 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
278 |     });
279 | 
280 |     device.queue.writeBuffer(sceneUniformBuffer, 0, viewProjectionMatrix);
281 |     device.queue.writeBuffer(sceneUniformBuffer, 64, eyePosition);
282 |     device.queue.writeBuffer(sceneUniformBuffer, 80, lightPosition);
283 | 
284 |     const drawShaderModule = device.createShaderModule({
285 |         code: `
286 | 
287 |             struct SceneUniforms {
288 |                 viewProjectionMatrix: mat4x4f,
289 |                 eyePosition: vec4f,
290 |                 lightPosition: vec4f
291 |             };
292 | 
293 |             struct ObjectUniforms {
294 |                 worldMatrix: mat4x4f,
295 |                 highlightColor: vec4f
296 |             };
297 | 
298 |             struct VSOut {
299 |                 @builtin(position) clipPosition: vec4f,
300 |                 @location(0) worldPosition: vec3f,
301 |                 @location(1) normal: vec3f,
302 |                 @location(2) uv: vec2f,
303 |             };
304 | 
305 |             @group(0) @binding(0) var<uniform> sceneUniforms: SceneUniforms;
306 |             @group(0) @binding(1) var<uniform> objectUniforms: ObjectUniforms;
307 | 
308 |             @vertex
309 |             fn vs(
310 |                 @location(0) position: vec4f,
311 |                 @location(1) normal: vec3f,
312 |                 @location(2) uv: vec2f,
313 |             ) -> VSOut {
314 |                 let worldPosition: vec4f = objectUniforms.worldMatrix * position;
315 | 
316 |                 var vsOut: VSOut;
317 |                 vsOut.clipPosition = sceneUniforms.viewProjectionMatrix * worldPosition;
318 |                 vsOut.worldPosition = worldPosition.xyz;
319 |                 vsOut.normal = (objectUniforms.worldMatrix * vec4f(normal, 0.0)).xyz;
320 |                 vsOut.uv = uv;
321 | 
322 |                 return vsOut;
323 |             }
324 | 
325 |             
326 | 
327 |             @group(0) @binding(2) var textureSampler: sampler;
328 |             @group(0) @binding(3) var textureData: texture_2d<f32>;
329 | 
330 |             @fragment
331 |             fn fs(fsIn: VSOut) -> @location(0) vec4f {
332 |                 let surfaceColor: vec3f = textureSample(textureData, textureSampler, fsIn.uv).rgb;
333 | 
334 |                 let normal: vec3f = normalize(fsIn.normal);
335 |                 let eyeVec: vec3f = normalize(sceneUniforms.eyePosition.xyz - fsIn.worldPosition);
336 |                 let incidentVec: vec3f = normalize(fsIn.worldPosition - sceneUniforms.lightPosition.xyz);
337 |                 let lightVec: vec3f = -incidentVec;
338 |                 let diffuse: f32 = max(dot(lightVec, normal), 0.0);
339 |                 let highlight: f32 = pow(max(dot(eyeVec, reflect(incidentVec, normal)), 0.0), 100.0);
340 |                 let ambient: f32 = 0.1;
341 |                 return vec4f(objectUniforms.highlightColor.rgb * surfaceColor * (diffuse + highlight + ambient), 1.0);
342 |             }
343 | 
344 |         `
345 |     });
346 | 
347 |     const drawPipeline = device.createRenderPipeline({
348 |         layout: 'auto',
349 |         vertex: {
350 |             module: drawShaderModule,
351 |             entryPoint: "vs",
352 |             buffers: [
353 |                 {
354 |                     arrayStride: 12,
355 |                     attributes: [{
356 |                         shaderLocation: 0,
357 |                         format: "float32x3",
358 |                         offset: 0
359 |                     }]
360 |                 },
361 |                 {
362 |                     arrayStride: 12,
363 |                     attributes: [{
364 |                         shaderLocation: 1,
365 |                         format: "float32x3",
366 |                         offset: 0
367 |                     }]
368 |                 },
369 |                 {
370 |                     arrayStride: 8,
371 |                     attributes: [{
372 |                         shaderLocation: 2,
373 |                         format: "float32x2",
374 |                         offset: 0
375 |                     }]
376 |                 }
377 |             ]
378 |         },
379 |         fragment: {
380 |             module: drawShaderModule,
381 |             entryPoint: "fs",
382 |             targets: [{
383 |                 format: presentationFormat
384 |             }]
385 |         },
386 |         multisample: {
387 |             count: 4
388 |         },
389 |         primitive: {
390 |             topology: "triangle-list",
391 |             cullMode: "back"
392 |         },
393 |         depthStencil: {
394 |             format: "depth24plus",
395 |             depthWriteEnabled: true,
396 |             depthCompare: "less"
397 |         }
398 |     });
399 | 
400 |     ////////////
401 |     // Objects
402 |     ////////////
403 |     const boxes = new Array(300).fill(null).map((_, i) => {
404 | 
405 |         // 0 index reserved for background.
406 |         const index = i + 1;
407 | 
408 |         const r =  (index        & 0xFF) / 255;
409 |         const g = ((index >> 8)  & 0xFF) / 255;
410 |         const b = ((index >> 16) & 0xFF) / 255;
411 |         const a = ((index >> 24) & 0xFF) / 255;
412 | 
413 |         const pickUniformBuffer = device.createBuffer({
414 |             size: 80,
415 |             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
416 |         });
417 | 
418 |         device.queue.writeBuffer(pickUniformBuffer, 64, new Float32Array([r, g, b, a]));
419 | 
420 |         const pickBindGroup = device.createBindGroup({
421 |             layout: pickPipeline.getBindGroupLayout(0),
422 |             entries: [
423 |                 {
424 |                     binding: 0,
425 |                     resource: {
426 |                         buffer: pickUniformBuffer
427 |                     }
428 |                 },
429 |             ]
430 |         });
431 | 
432 | 
433 |         const drawUniformBuffer = device.createBuffer({
434 |             size: 80,
435 |             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
436 |         });
437 | 
438 |         device.queue.writeBuffer(drawUniformBuffer, 64, unhighlightColor);
439 | 
440 |         const drawBindGroup = device.createBindGroup({
441 |             layout: drawPipeline.getBindGroupLayout(0),
442 |             entries: [
443 |                 {
444 |                     binding: 0,
445 |                     resource: {
446 |                         buffer: sceneUniformBuffer
447 |                     }
448 |                 },
449 |                 {
450 |                     binding: 1,
451 |                     resource: {
452 |                         buffer: drawUniformBuffer
453 |                     }
454 |                 },
455 |                 {
456 |                     binding: 2,
457 |                     resource: sampler
458 |                 },
459 |                 {
460 |                     binding: 3,
461 |                     resource: texture.createView()
462 |                 }
463 | 
464 |             ]
465 |         });
466 | 
467 |         return {
468 |             translate: [
469 |                 randomRange(-3, 3),
470 |                 randomRange(-3, 3),
471 |                 randomRange(-4, 0)
472 |             ],
473 |             rotate: [
474 |                 randomRange(0, 2 * Math.PI),
475 |                 randomRange(0, 2 * Math.PI),
476 |                 randomRange(0, 2 * Math.PI) 
477 |             ],
478 |             scale: [
479 |                 0.25,
480 |                 0.25,
481 |                 0.25
482 |             ],
483 |             mvpMatrix: mat4.create(),
484 |             modelMatrix: mat4.create(),
485 |             pickUniformBuffer,
486 |             pickBindGroup,
487 |             drawUniformBuffer,
488 |             drawBindGroup
489 |         };
490 |     });
491 | 
492 |     ///////////////////////////
493 |     // Render pass description
494 |     ///////////////////////////
495 | 
496 |     const pickRenderPassDescription = {
497 |         colorAttachments: [{
498 |             view: pickTexture.createView(),
499 |             loadOp: "clear",
500 |             storeOp: "store",
501 |             clearValue: [0, 0, 0, 0]
502 |         }],
503 |         depthStencilAttachment: {
504 |             view: pickDepthTexture.createView(),
505 |             depthClearValue: 1,
506 |             depthLoadOp: "clear",
507 |             depthStoreOp: "store"
508 |         },
509 |         timestampWrites: timer.gpuPassDescriptor("pick")
510 |     };
511 | 
512 |     const drawRenderPassDescription = {
513 |         colorAttachments: [{
514 |             view: msaaTexture.createView(),
515 |             resolveTarget: context.getCurrentTexture().createView(),
516 |             loadOp: "clear",
517 |             storeOp: "store",
518 |             clearValue: [0, 0, 0, 1]
519 |         }],
520 |         depthStencilAttachment: {
521 |             view: drawDepthTexture.createView(),
522 |             depthClearValue: 1,
523 |             depthLoadOp: "clear",
524 |             depthStoreOp: "store"
525 |         },
526 |         timestampWrites: timer.gpuPassDescriptor("draw")
527 |     };
528 | 
529 |     // MOUSE HANDLER FOR PICKING
530 |     let mouseX = -1;
531 |     let mouseY = -1;
532 |     let lastPickIndex = -1;
533 | 
534 |     canvas.addEventListener("mousemove", function(event) {
535 |         mouseX = event.clientX;
536 |         mouseY = event.clientY;
537 |     });
538 | 
539 |     window.addEventListener("resize", () => {
540 |         canvas.width = window.innerWidth;
541 |         canvas.height = window.innerHeight;
542 |         mouseX = -1;
543 |         mouseY = -1;
544 | 
545 |         mat4.perspectiveZO(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 10.0)
546 |         mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
547 | 
548 |         device.queue.writeBuffer(sceneUniformBuffer, 0, viewProjectionMatrix);
549 | 
550 |         pickTexture.destroy();
551 |         pickTexture = device.createTexture({
552 |             size: [canvas.width, canvas.height],
553 |             format: "rgba8unorm",
554 |             usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT
555 |         });
556 | 
557 |         pickDepthTexture.destroy();
558 |         pickDepthTexture = device.createTexture({
559 |             size: [canvas.width, canvas.height],
560 |             format: "depth24plus",
561 |             usage:  GPUTextureUsage.RENDER_ATTACHMENT
562 |         });
563 | 
564 |         msaaTexture.destroy();
565 |         msaaTexture = device.createTexture({
566 |             label: 'msaa texture',
567 |             size: [canvas.width, canvas.height],
568 |             format: presentationFormat,
569 |             usage: GPUTextureUsage.RENDER_ATTACHMENT,
570 |             sampleCount: 4
571 |         });
572 | 
573 |         drawDepthTexture.destroy();
574 |         drawDepthTexture = device.createTexture({
575 |             size: [canvas.width, canvas.height],
576 |             format: "depth24plus",
577 |             usage:  GPUTextureUsage.RENDER_ATTACHMENT,
578 |             sampleCount: 4
579 |         });
580 | 
581 |         pickRenderPassDescription.colorAttachments[0].view = pickTexture.createView()
582 |         pickRenderPassDescription.depthStencilAttachment.view = pickDepthTexture.createView()
583 | 
584 |         drawRenderPassDescription.colorAttachments[0].view = msaaTexture.createView()
585 |         drawRenderPassDescription.depthStencilAttachment.view = drawDepthTexture.createView()
586 |     });
587 |         
588 | 
589 |     let lastTime;
590 |     function draw(time) {
591 |         timer.cpuTimeStart("frame");
592 | 
593 |         lastTime = lastTime ?? time;
594 |         const dt = time - lastTime;
595 |         lastTime = time;
596 | 
597 |         for (const box of boxes) {
598 |             box.rotate[0] += 0.001 * dt;
599 |             box.rotate[1] += 0.002 * dt;
600 | 
601 |             xformMatrix(box.modelMatrix, box.translate, box.rotate, box.scale);
602 |             mat4.multiply(box.mvpMatrix, viewProjectionMatrix, box.modelMatrix);
603 |             
604 |             device.queue.writeBuffer(box.pickUniformBuffer, 0, box.mvpMatrix);
605 |             device.queue.writeBuffer(box.drawUniformBuffer, 0, box.modelMatrix);
606 |         }
607 | 
608 |         //////////////
609 |         // Picking
610 |         //////////////
611 | 
612 |         if (mouseX > -1 && pickBuffer.mapState === "unmapped") {
613 |             const pickCommandEncoder = device.createCommandEncoder();
614 |             const pickPass = pickCommandEncoder.beginRenderPass(pickRenderPassDescription);
615 | 
616 |             // Draw all boxes with pick color (index encoded as r, g, b, a).
617 |             pickPass.setPipeline(pickPipeline);
618 |             pickPass.setVertexBuffer(0, positionBuffer);
619 | 
620 |             for (const box of boxes) {
621 |                 pickPass.setBindGroup(0, box.pickBindGroup);
622 |                 pickPass.draw(numVertices);           
623 |             }
624 | 
625 |             pickPass.end();
626 |             
627 |             // Copy pixel at mouse position into buffer.
628 |             pickCommandEncoder.copyTextureToBuffer(
629 |                 { 
630 |                     texture: pickTexture,
631 |                     origin: [mouseX, mouseY]
632 |                 },
633 |                 { 
634 |                     buffer: pickBuffer
635 |                 },
636 |                 [1, 1]
637 |             );
638 | 
639 |             timer.gpuBeforeSubmit(pickCommandEncoder, ["pick"]);
640 | 
641 |             device.queue.submit([pickCommandEncoder.finish()]);
642 | 
643 |             timer.gpuAfterSubmit(["pick"])
644 | 
645 |             // Map buffer
646 |             pickBuffer.mapAsync(GPUMapMode.READ).then(() => {
647 | 
648 |                 // Read pixel r, g, b, a
649 |                 const [r, g, b, a] = new Uint8Array(pickBuffer.getMappedRange());
650 |                 pickBuffer.unmap();
651 | 
652 |                 // Decode index.
653 |                 const index = (r | (g << 8) | (b << 16) | (a << 24)) - 1;
654 | 
655 |                 if (index === lastPickIndex) {
656 |                     return;
657 |                 }
658 | 
659 |                 if (lastPickIndex > -1) {
660 |                     device.queue.writeBuffer(boxes[lastPickIndex].drawUniformBuffer, 64, unhighlightColor);
661 |                 }
662 | 
663 |                 // If hovering, update highligh color, cursor.
664 |                 if (index > -1) {
665 |                     device.queue.writeBuffer(boxes[index].drawUniformBuffer, 64, highlightColor);
666 |                     document.body.style.cursor = 'pointer';
667 |                 } else {
668 |                     document.body.style.cursor = 'auto';
669 |                 }
670 | 
671 |                 lastPickIndex = index;
672 |             });
673 |         }
674 | 
675 |         ///////////
676 |         // Draw
677 |         ///////////
678 | 
679 |         drawRenderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();
680 | 
681 |         const drawCommandEncoder = device.createCommandEncoder();
682 |         const renderPass = drawCommandEncoder.beginRenderPass(drawRenderPassDescription);
683 | 
684 |         renderPass.setPipeline(drawPipeline);
685 |         renderPass.setVertexBuffer(0, positionBuffer);
686 |         renderPass.setVertexBuffer(1, normalBuffer);
687 |         renderPass.setVertexBuffer(2, uvBuffer);
688 | 
689 |         for (const box of boxes) {
690 |             renderPass.setBindGroup(0, box.drawBindGroup);
691 |             renderPass.draw(numVertices);           
692 |         }
693 | 
694 |         renderPass.end();
695 | 
696 |         timer.gpuBeforeSubmit(drawCommandEncoder, ["draw"]);
697 | 
698 |         device.queue.submit([drawCommandEncoder.finish()]);
699 | 
700 |         timer.gpuAfterSubmit(["draw"]);
701 |         timer.cpuTimeEnd("frame");
702 | 
703 |         cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
704 |         pickTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["pick"].toFixed(2)}ms` : "N/A";
705 |         drawTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["draw"].toFixed(2)}ms` : "N/A";
706 | 
707 |         requestAnimationFrame(draw);
708 |     }
709 | 
710 |     requestAnimationFrame(draw);
711 |         
712 | })();
713 | 
714 | </script>
715 | </body>
716 | </html>


--------------------------------------------------------------------------------
/deferred.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 | <head>
   4 |     <meta charset="utf-8">
   5 |     <link rel="stylesheet" href="css/example.css">
   6 |     <script src="utils/gl-matrix.js"></script>
   7 | </head>
   8 | <!--
   9 |   The MIT License (MIT)
  10 | 
  11 |   Copyright (c) 2024 Tarek Sherif
  12 | 
  13 |   Permission is hereby granted, free of charge, to any person obtaining a copy of
  14 |   this software and associated documentation files (the "Software"), to deal in
  15 |   the Software without restriction, including without limitation the rights to
  16 |   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
  17 |   the Software, and to permit persons to whom the Software is furnished to do so,
  18 |   subject to the following conditions:
  19 | 
  20 |   The above copyright notice and this permission notice shall be included in all
  21 |   copies or substantial portions of the Software.
  22 | 
  23 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  24 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
  25 |   FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
  26 |   COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
  27 |   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  28 |   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  29 | -->
  30 | <body>
  31 | <canvas id="webgpu-canvas"></canvas>
  32 | <div id="stats">
  33 |     <div id="device-info"></div>
  34 |     <div>
  35 |         CPU Frame Time: <span id="cpu-time"></span>
  36 |     </div>
  37 |     <div>
  38 |         GPU Lights Draw Time: <span id="lights-time"></span>
  39 |     </div>
  40 |     <div>
  41 |         GPU GBuffer Render Time: <span id="gbuffer-time"></span>
  42 |     </div>
  43 |     <div>
  44 |         GPU Lighting Time: <span id="lighting-time"></span>
  45 |     </div>
  46 | </div>
  47 | <script type="module">
  48 | import { checkSupport, addDescription, loadImageBitmaps, createCube, createSphere, createQuad, xformMatrix, randomRange, getMipLevelCount, generate2DMipmap, parseAdapterInfo } from "./utils/utils.js";
  49 | import { Timer } from "./utils/Timer.js";
  50 | 
  51 | const { mat4, vec3 } = glMatrix;
  52 | const NUM_BOXES = 512;
  53 | const NUM_LIGHTS = 16;
  54 | 
  55 | checkSupport();
  56 | addDescription(
  57 |     "Deferred Rendering",
  58 |     "Rendering mesh data to a multisampled gBuffer then lighting in a separate pass.",
  59 |     "deferred.html"
  60 | );
  61 | 
  62 | (async () => {
  63 |     //////////////////////////////////////////
  64 |     // Set up WebGPU adapter
  65 |     //////////////////////////////////////////
  66 | 
  67 |     const [adapter, [image]] = await Promise.all([
  68 |         navigator.gpu.requestAdapter(),
  69 |         loadImageBitmaps(["img/webgpu.png"])
  70 |     ]);
  71 | 
  72 |     const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
  73 | 
  74 |     ////////////////////////////////////
  75 |     // Set up device and canvas context
  76 |     ////////////////////////////////////
  77 | 
  78 |     const [adapterInfo, device] = await Promise.all([
  79 |         adapter.requestAdapterInfo(),
  80 |         adapter.requestDevice({
  81 |             requiredFeatures: adapter.features.has("timestamp-query") ? ["timestamp-query"] : []
  82 |         })
  83 |     ]);
  84 |     
  85 |     const canvas = document.getElementById("webgpu-canvas");
  86 |     canvas.width = window.innerWidth;
  87 |     canvas.height = window.innerHeight;
  88 | 
  89 |     const context = canvas.getContext("webgpu");
  90 |     context.configure({
  91 |         device,
  92 |         format: presentationFormat
  93 |     });
  94 | 
  95 |     document.getElementById("device-info").innerText = parseAdapterInfo(adapterInfo);
  96 | 
  97 |     const cpuTimeDisplay = document.getElementById("cpu-time");
  98 |     const lightsTimeDisplay = document.getElementById("lights-time");
  99 |     const gBufferTimeDisplay = document.getElementById("gbuffer-time");
 100 |     const lightingTimeDisplay = document.getElementById("lighting-time");
 101 | 
 102 |     const timer = new Timer(device, 10);
 103 | 
 104 |     ////////////////////////////////////////
 105 |     // Create vertex buffers and load data
 106 |     ////////////////////////////////////////
 107 | 
 108 |     const cubeData = createCube();
 109 | 
 110 |     const cube = {
 111 |         positions: device.createBuffer({
 112 |             size: cubeData.positions.byteLength,
 113 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 114 |         }),
 115 |         normals: device.createBuffer({
 116 |             size: cubeData.normals.byteLength,
 117 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 118 |         }),
 119 |         uvs: device.createBuffer({
 120 |             size: cubeData.uvs.byteLength,
 121 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 122 |         }),
 123 |         count: cubeData.positions.length / 3
 124 |     };
 125 |     
 126 | 
 127 |     device.queue.writeBuffer(cube.positions, 0, cubeData.positions);
 128 |     device.queue.writeBuffer(cube.normals, 0, cubeData.normals);
 129 |     device.queue.writeBuffer(cube.uvs, 0, cubeData.uvs);
 130 | 
 131 |     const sphereData = createSphere({
 132 |         latBands: 8,
 133 |         longBands: 8
 134 |     });
 135 | 
 136 |     const sphere = {
 137 |         positions: device.createBuffer({
 138 |             size: sphereData.positions.byteLength,
 139 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 140 |         }),
 141 |         indices: device.createBuffer({
 142 |             size: sphereData.indices.byteLength,
 143 |             usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
 144 |         }),
 145 |         count: sphereData.indices.length
 146 |     };
 147 |     
 148 | 
 149 |     device.queue.writeBuffer(sphere.positions, 0, sphereData.positions);
 150 |     device.queue.writeBuffer(sphere.indices, 0, sphereData.indices);
 151 | 
 152 |     const quadData = createQuad();
 153 | 
 154 |     const quad = {
 155 |         positions: device.createBuffer({
 156 |             size: quadData.positions.byteLength,
 157 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
 158 |         }),
 159 |         count: quadData.positions.length / 2
 160 |     };
 161 |     
 162 | 
 163 |     device.queue.writeBuffer(quad.positions, 0, quadData.positions);
 164 | 
 165 |     /////////////////////////////////////////
 166 |     // Create texture, sampler and load data
 167 |     //////////////////////////////////////////
 168 | 
 169 |     const sampler = device.createSampler({
 170 |         minFilter: "linear",
 171 |         magFilter: "linear",
 172 |         mipmapFilter: "linear"
 173 |     });
 174 | 
 175 |     const colorTexture = device.createTexture({
 176 |         size: [image.width, image.height],
 177 |         format: "rgba8unorm",
 178 |         mipLevelCount: getMipLevelCount(image.width, image.height),
 179 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 180 |     });
 181 | 
 182 |     device.queue.copyExternalImageToTexture(
 183 |         { source: image, flipY: true },
 184 |         { texture: colorTexture },
 185 |         {
 186 |             width: image.width,
 187 |             height: image.height
 188 |         }
 189 |     );
 190 | 
 191 |     generate2DMipmap(device, colorTexture);
 192 | 
 193 |     ///////////////////////
 194 |     // Uniform values
 195 |     ////////////////////////
 196 | 
 197 |     const projectionMatrix = mat4.create();
 198 |     mat4.perspectiveZO(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 10.0);
 199 | 
 200 |     const viewMatrix = mat4.create();
 201 |     const eyePosition = vec3.fromValues(0, 0, 1);
 202 |     mat4.lookAt(viewMatrix, eyePosition, vec3.fromValues(0, 0, 0), vec3.fromValues(0, 1, 0));
 203 | 
 204 |     const viewProjectionMatrix = mat4.create();
 205 |     mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
 206 | 
 207 |     // Uniform buffer for view projection matrix
 208 |     // used in lights and gBuffer passes
 209 |     const viewProjectionMatrixBuffer = device.createBuffer({
 210 |         size: 64,
 211 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 212 |     });
 213 | 
 214 |     device.queue.writeBuffer(viewProjectionMatrixBuffer, 0, viewProjectionMatrix);
 215 | 
 216 |     ///////////////////////////////
 217 |     // Lights pass
 218 |     // (Render lights as spheres)
 219 |     ///////////////////////////////
 220 | 
 221 |     // Shader module
 222 |     const lightsShaderModule = device.createShaderModule({
 223 |         label: 'lights shader',
 224 |         code: `
 225 | 
 226 |             struct VSOut {
 227 |                 @builtin(position) clipPosition: vec4f,
 228 |                 @location(0) color: vec3f
 229 |             };
 230 | 
 231 |             @group(0) @binding(0) var<uniform> viewProjectionMatrix: mat4x4f;
 232 | 
 233 |             @vertex
 234 |             fn vs(
 235 |                 @location(0) vertexPosition: vec3f,
 236 |                 @location(1) position: vec3f,
 237 |                 @location(2) color: vec3f,
 238 |             ) -> VSOut {
 239 |                 let worldPosition: vec4f = vec4f(vertexPosition * 0.02 + position, 1.0);
 240 | 
 241 |                 var vsOut: VSOut;
 242 |                 vsOut.clipPosition = viewProjectionMatrix * worldPosition;
 243 |                 vsOut.color = color.rgb;
 244 | 
 245 |                 return vsOut;
 246 |             }
 247 | 
 248 |             @fragment
 249 |             fn fs(fsIn: VSOut) -> @location(0) vec4f {
 250 |                 let maxChannel: f32 = max(fsIn.color.r, max(fsIn.color.g, fsIn.color.b));
 251 |                 return vec4f(fsIn.color * (1.0 / maxChannel), 1.0);
 252 |             }
 253 | 
 254 |         `
 255 |     });
 256 | 
 257 |     // Pipeline
 258 |     const lightsPipeline = device.createRenderPipeline({
 259 |         label: 'lights pipeline',
 260 |         layout: 'auto',
 261 |         vertex: {
 262 |             module: lightsShaderModule,
 263 |             entryPoint: "vs",
 264 |             buffers: [
 265 |                 {
 266 |                     arrayStride: 12,
 267 |                     attributes: [{
 268 |                         shaderLocation: 0,
 269 |                         format: "float32x3",
 270 |                         offset: 0
 271 |                     }]
 272 |                 },
 273 |                 {
 274 |                     arrayStride: 16,
 275 |                     stepMode: "instance",
 276 |                     attributes: [{
 277 |                         shaderLocation: 1,
 278 |                         format: "float32x3",
 279 |                         offset: 0
 280 |                     }]
 281 |                 },
 282 |                 {
 283 |                     arrayStride: 16,
 284 |                     stepMode: "instance",
 285 |                     attributes: [{
 286 |                         shaderLocation: 2,
 287 |                         format: "float32x3",
 288 |                         offset: 0
 289 |                     }]
 290 |                 }
 291 |             ]
 292 |         },
 293 |         fragment: {
 294 |             module: lightsShaderModule,
 295 |             entryPoint: "fs",
 296 | 
 297 |             targets: [
 298 |                 {
 299 |                     format: presentationFormat
 300 |                 }
 301 |             ]
 302 |         },
 303 |         multisample: {
 304 |             count: 4
 305 |         },
 306 |         primitive: {
 307 |             topology: "triangle-list",
 308 |             cullMode: "back"
 309 |         },
 310 |         depthStencil: {
 311 |             format: "depth24plus",
 312 |             depthWriteEnabled: true,
 313 |             depthCompare: "less"
 314 |         }
 315 |     });
 316 | 
 317 |     // Objects
 318 |     // Buffers used as vertex data in the lights pass,
 319 |     // uniform data in the lighting pass.
 320 |     const lights = {
 321 |         data: new Array(NUM_LIGHTS).fill(null).map(() => ({
 322 |             position: [
 323 |                 randomRange(-2, 2),
 324 |                 randomRange(-2, 2),
 325 |                 randomRange(-0.5, 0.5)
 326 |             ],
 327 |             color: [
 328 |                 randomRange(0, 1),
 329 |                 randomRange(0, 1),
 330 |                 randomRange(0, 1)
 331 |             ],
 332 |             offset: [
 333 |                 randomRange(-0.5, 0.5),
 334 |                 randomRange(-0.5, 0.5),
 335 |                 randomRange(-0.5, 0.5)
 336 |             ],
 337 |             t: randomRange(0, 2 * Math.PI),
 338 |         })),
 339 |         positionData: new Float32Array(NUM_LIGHTS * 4),
 340 |         positions: device.createBuffer({
 341 |             size: NUM_LIGHTS * 4 * Float32Array.BYTES_PER_ELEMENT,
 342 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 343 |         }),
 344 |         colorData: new Float32Array(NUM_LIGHTS * 4),
 345 |         colors: device.createBuffer({
 346 |             size: NUM_LIGHTS * 4 * Float32Array.BYTES_PER_ELEMENT,
 347 |             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 348 |         }),
 349 |         bindGroup: device.createBindGroup({
 350 |             layout: lightsPipeline.getBindGroupLayout(0),
 351 |             entries: [
 352 |                 {
 353 |                     binding: 0,
 354 |                     resource: {
 355 |                         buffer: viewProjectionMatrixBuffer
 356 |                     }
 357 |                 }
 358 |             ]
 359 |         })
 360 |     };
 361 |     
 362 |     lights.data.forEach((data, i) => {
 363 |         const index = i * 4;
 364 |         lights.positionData.set(data.position, index);
 365 |         lights.colorData.set(data.color, index);
 366 |     });
 367 | 
 368 |     device.queue.writeBuffer(lights.positions, 0, lights.positionData);
 369 |     device.queue.writeBuffer(lights.colors, 0, lights.colorData);
 370 | 
 371 |     ////////////////////////////
 372 |     // GBuffer pass
 373 |     // (Draw boxes to gBuffer)
 374 |     ////////////////////////////
 375 | 
 376 |     // Render targets
 377 |     let gBufferPositionsTexture = device.createTexture({
 378 |         label: "gBuffer positions texture",
 379 |         size: [canvas.width, canvas.height],
 380 |         format: "rgba16float",
 381 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
 382 |         sampleCount: 4
 383 |     });
 384 | 
 385 |     let gBufferNormalsTexture = device.createTexture({
 386 |         label: "gBuffer normals texture",
 387 |         size: [canvas.width, canvas.height],
 388 |         format: "rgba16float",
 389 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
 390 |         sampleCount: 4
 391 |     });
 392 | 
 393 |     let gBufferColorsTexture = device.createTexture({
 394 |         label: "gBuffer colors texture",
 395 |         size: [canvas.width, canvas.height],
 396 |         format: "rgba8unorm",
 397 |         usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
 398 |         sampleCount: 4
 399 |     });    
 400 | 
 401 |     // Shader module
 402 |     const gBufferShaderModule = device.createShaderModule({
 403 |         label: 'gbuffer shader',
 404 |         code: `
 405 |             struct VSOut {
 406 |                 @builtin(position) clipPosition: vec4f,
 407 |                 @location(0) worldPosition: vec3f,
 408 |                 @location(1) normal: vec3f,
 409 |                 @location(2) uv: vec2f,
 410 |             };
 411 | 
 412 |             @group(0) @binding(0) var<uniform> viewProjectionMatrix: mat4x4f;
 413 |             @group(0) @binding(1) var<uniform> worldMatrix: mat4x4f;
 414 | 
 415 |             @vertex
 416 |             fn vs(
 417 |                 @location(0) position: vec4f,
 418 |                 @location(1) normal: vec3f,
 419 |                 @location(2) uv: vec2f,
 420 |             ) -> VSOut {
 421 |                 let worldPosition: vec4f = worldMatrix * position;
 422 | 
 423 |                 var vsOut: VSOut;
 424 |                 vsOut.clipPosition = viewProjectionMatrix * worldPosition;
 425 |                 vsOut.worldPosition = worldPosition.xyz;
 426 |                 vsOut.normal = (worldMatrix * vec4f(normal, 0.0)).xyz;
 427 |                 vsOut.uv = uv;
 428 | 
 429 |                 return vsOut;
 430 |             }
 431 | 
 432 |             struct FSOut {
 433 |                 @location(0) position: vec4f,
 434 |                 @location(1) normal: vec4f,
 435 |                 @location(2) color: vec4f,
 436 |             }
 437 | 
 438 |             @group(0) @binding(2) var textureSampler: sampler;
 439 |             @group(0) @binding(3) var colorTexture: texture_2d<f32>;
 440 | 
 441 |             @fragment
 442 |             fn fs(fsIn: VSOut) -> FSOut {
 443 |                 var fsOut: FSOut;
 444 |                 fsOut.position = vec4f(fsIn.worldPosition, 1.0);
 445 |                 fsOut.normal = vec4f(fsIn.normal, 0.0);
 446 |                 fsOut.color = textureSample(colorTexture, textureSampler, fsIn.uv);
 447 | 
 448 |                 return fsOut;
 449 |             }
 450 | 
 451 |         `
 452 |     });
 453 | 
 454 |     // Pipeline 
 455 |     const gBufferPipeline = device.createRenderPipeline({
 456 |         label: 'gbuffer pipeline',
 457 |         layout: 'auto',
 458 |         vertex: {
 459 |             module: gBufferShaderModule,
 460 |             entryPoint: "vs",
 461 |             buffers: [
 462 |                 {
 463 |                     arrayStride: 12,
 464 |                     attributes: [{
 465 |                         shaderLocation: 0,
 466 |                         format: "float32x3",
 467 |                         offset: 0
 468 |                     }]
 469 |                 },
 470 |                 {
 471 |                     arrayStride: 12,
 472 |                     attributes: [{
 473 |                         shaderLocation: 1,
 474 |                         format: "float32x3",
 475 |                         offset: 0
 476 |                     }]
 477 |                 },
 478 |                 {
 479 |                     arrayStride: 8,
 480 |                     attributes: [{
 481 |                         shaderLocation: 2,
 482 |                         format: "float32x2",
 483 |                         offset: 0
 484 |                     }]
 485 |                 }
 486 |             ]
 487 |         },
 488 |         fragment: {
 489 |             module: gBufferShaderModule,
 490 |             entryPoint: "fs",
 491 | 
 492 |             targets: [
 493 |                 {
 494 |                     format: "rgba16float"
 495 |                 },
 496 |                 {
 497 |                     format: "rgba16float"
 498 |                 },
 499 |                 {
 500 |                     format: "rgba8unorm"
 501 |                 }
 502 |             ]
 503 |         },
 504 |         multisample: {
 505 |             count: 4
 506 |         },
 507 |         primitive: {
 508 |             topology: "triangle-list",
 509 |             cullMode: "back"
 510 |         },
 511 |         depthStencil: {
 512 |             format: "depth24plus",
 513 |             depthWriteEnabled: true,
 514 |             depthCompare: "less"
 515 |         }
 516 |     });
 517 | 
 518 |     // Objects
 519 |     const boxes = new Array(NUM_BOXES).fill(null).map(() => {
 520 |         const translate = [
 521 |             randomRange(-3, 3),
 522 |             randomRange(-3, 3),
 523 |             randomRange(-3, 0)
 524 |         ];
 525 |         const rotate = [
 526 |                 randomRange(0, 2 * Math.PI),
 527 |                 randomRange(0, 2 * Math.PI),
 528 |                 randomRange(0, 2 * Math.PI) 
 529 |         ];
 530 |         const scale = [
 531 |             0.25,
 532 |             0.25,
 533 |             0.25
 534 |         ];
 535 | 
 536 |         const uniformBuffer = device.createBuffer({
 537 |             size: 64,
 538 |             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 539 |         });
 540 |        
 541 |         const bindGroup = device.createBindGroup({
 542 |             layout: gBufferPipeline.getBindGroupLayout(0),
 543 |             entries: [
 544 |                 {
 545 |                     binding: 0,
 546 |                     resource: {
 547 |                         buffer: viewProjectionMatrixBuffer
 548 |                     }
 549 |                 },
 550 |                 {
 551 |                     binding: 1,
 552 |                     resource: {
 553 |                         buffer: uniformBuffer
 554 |                     }
 555 |                 },
 556 |                 {
 557 |                     binding: 2,
 558 |                     resource: sampler
 559 |                 },
 560 |                 {
 561 |                     binding: 3,
 562 |                     resource: colorTexture.createView()
 563 |                 }
 564 |             ]
 565 |         });
 566 | 
 567 |         return {
 568 |             translate,
 569 |             rotate,
 570 |             scale,
 571 |             modelMatrix: mat4.create(),
 572 |             uniformBuffer,
 573 |             bindGroup
 574 |         };
 575 |     });
 576 | 
 577 |     /////////////////////////////////////////
 578 |     // Lighting pass
 579 |     // (Render a full-screen quad and apply
 580 |     //  lighting to data in gBuffer)
 581 |     /////////////////////////////////////////
 582 | 
 583 |     // Uniforms
 584 |     const lightingEyePositionBuffer = device.createBuffer({
 585 |         size: 16,
 586 |         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 587 |     });
 588 | 
 589 |     device.queue.writeBuffer(lightingEyePositionBuffer, 0, eyePosition);
 590 | 
 591 |     // Shader module
 592 |     const lightingShaderModule = device.createShaderModule({
 593 |         code: `
 594 | 
 595 |             @vertex
 596 |             fn vs(@location(0) position: vec4f) -> @builtin(position) vec4f {
 597 |                 return position;
 598 |             }
 599 | 
 600 |             const lightDampening = 0.3;
 601 | 
 602 |             @group(0) @binding(0) var<uniform>  eyePosition: vec4f;
 603 |             @group(0) @binding(1) var<uniform> lightPositions: array<vec4f, ${NUM_LIGHTS}>;
 604 |             @group(0) @binding(2) var<uniform> lightColors: array<vec4f, ${NUM_LIGHTS}>;
 605 |             @group(0) @binding(3) var positionTexture: texture_multisampled_2d<f32>;
 606 |             @group(0) @binding(4) var normalTexture: texture_multisampled_2d<f32>;
 607 |             @group(0) @binding(5) var colorTexture: texture_multisampled_2d<f32>;
 608 | 
 609 |             @fragment
 610 |             fn fs(
 611 |                 @builtin(position) fragmentPosition: vec4f, 
 612 |                 @builtin(sample_index) sampleIndex: u32 
 613 |             ) -> @location(0) vec4f {
 614 |                 let canvasPosition = vec2u(fragmentPosition.xy);
 615 | 
 616 |                 let positionSample = textureLoad(positionTexture, canvasPosition, sampleIndex);
 617 | 
 618 |                 if (positionSample.w == 0.0) {
 619 |                     discard;
 620 |                 }
 621 | 
 622 |                 let position = positionSample.xyz;
 623 |                 let normal = normalize(textureLoad(normalTexture, canvasPosition, sampleIndex).xyz);
 624 |                 let surfaceColor = textureLoad(colorTexture, canvasPosition, sampleIndex).rgb;
 625 | 
 626 |                 let eyeDirection: vec3f = normalize(eyePosition.xyz - position);
 627 |                 var color = vec3f(0.05);
 628 | 
 629 |                 for (var i = 0; i < ${NUM_LIGHTS}; i++) {
 630 |                     let lightPosition = lightPositions[i].xyz;
 631 |                     let lightColor = lightColors[i].rgb * lightDampening;
 632 |                     let lightVec: vec3f = lightPosition - position;
 633 |                     let lightDirection = normalize(lightVec);
 634 |                     let reflectionDirection = reflect(-lightDirection, normal);
 635 |                     let nDotL: f32 = max(dot(lightDirection, normal), 0.0);
 636 |                     let diffuse: vec3f = nDotL * lightColor;
 637 |                     let specular: vec3f = pow(max(dot(reflectionDirection, eyeDirection), 0.0), 20.0) * lightColor;
 638 |                     let lightDistance: f32 = length(lightVec);
 639 |                     let attenuation: f32 = 1.0 / (lightDistance * lightDistance);
 640 |                     color += attenuation * surfaceColor * (diffuse + specular);
 641 |                 }
 642 | 
 643 |                 return vec4f(color, 1.0);
 644 |             }
 645 | 
 646 |         `
 647 |     });
 648 | 
 649 |     // Pipeline
 650 |     const lightingPipeline = device.createRenderPipeline({
 651 |         label: 'lighting pipeline',
 652 |         layout: 'auto',
 653 |         vertex: {
 654 |             module: lightingShaderModule,
 655 |             entryPoint: "vs",
 656 |             buffers: [
 657 |                 {
 658 |                     arrayStride: 8,
 659 |                     attributes: [{
 660 |                         shaderLocation: 0,
 661 |                         format: "float32x2",
 662 |                         offset: 0
 663 |                     }]
 664 |                 },
 665 |             ]
 666 |         },
 667 |         fragment: {
 668 |             module: lightingShaderModule,
 669 |             entryPoint: "fs",
 670 |             targets: [{
 671 |                 format: presentationFormat,
 672 |             }],
 673 |         },
 674 |         multisample: {
 675 |             count: 4
 676 |         },
 677 |         primitive: {
 678 |             topology: "triangle-strip",
 679 |             cullMode: "back"
 680 |         }
 681 |     });
 682 | 
 683 |     // Bind group
 684 |     let lightingBindGroup = device.createBindGroup({
 685 |         layout: lightingPipeline.getBindGroupLayout(0),
 686 |         entries: [
 687 |             {
 688 |                 binding: 0,
 689 |                 resource: {
 690 |                     buffer: lightingEyePositionBuffer
 691 |                 }
 692 |             },
 693 |             {
 694 |                 binding: 1,
 695 |                 resource: {
 696 |                     buffer: lights.positions
 697 |                 }
 698 |             },
 699 |             {
 700 |                 binding: 2,
 701 |                 resource: {
 702 |                     buffer: lights.colors
 703 |                 }
 704 |             },
 705 |             {
 706 |                 binding: 3,
 707 |                 resource: gBufferPositionsTexture.createView()
 708 |             },
 709 |             {
 710 |                 binding: 4,
 711 |                 resource: gBufferNormalsTexture.createView()
 712 |             },
 713 |             {
 714 |                 binding: 5,
 715 |                 resource: gBufferColorsTexture.createView()
 716 |             }
 717 |         ]
 718 |     });
 719 | 
 720 | 
 721 |     //////////////////////////////
 722 |     // Render pass descriptions
 723 |     //////////////////////////////
 724 |     let msaaTexture = device.createTexture({
 725 |         label: 'msaa texture',
 726 |         size: [canvas.width, canvas.height],
 727 |         format: presentationFormat,
 728 |         usage: GPUTextureUsage.RENDER_ATTACHMENT,
 729 |         sampleCount: 4
 730 |     });
 731 |     
 732 |     let depthTexture = device.createTexture({
 733 |         size: [canvas.width, canvas.height],
 734 |         format: "depth24plus",
 735 |         usage:  GPUTextureUsage.RENDER_ATTACHMENT,
 736 |         sampleCount: 4
 737 |     });
 738 | 
 739 |     const lightsRenderPassDescription = {
 740 |         label: 'lights render pass',
 741 |         colorAttachments: [
 742 |             {
 743 |                 view: msaaTexture.createView(),
 744 |                 resolveTarget: context.getCurrentTexture().createView(),
 745 |                 loadOp: "clear",
 746 |                 storeOp: "store",
 747 |                 clearValue: [0, 0, 0, 1]
 748 |             }
 749 |         ],
 750 |         depthStencilAttachment: {
 751 |             view: depthTexture.createView(),
 752 |             depthClearValue: 1,
 753 |             depthLoadOp: "clear",
 754 |             depthStoreOp: "store"
 755 |         },
 756 |         timestampWrites: timer.gpuPassDescriptor("lights")
 757 |     };
 758 | 
 759 |     const gBufferRenderPassDescription = {
 760 |         label: 'gbuffer render pass',
 761 |         colorAttachments: [
 762 |             {
 763 |                 view: gBufferPositionsTexture.createView(),
 764 |                 loadOp: "clear",
 765 |                 storeOp: "store",
 766 |                 clearValue: [0, 0, 0, 0]
 767 |             },
 768 |             {
 769 |                 view: gBufferNormalsTexture.createView(),
 770 |                 loadOp: "clear",
 771 |                 storeOp: "store",
 772 |                 clearValue: [0, 0, 0, 0]
 773 |             },
 774 |             {
 775 |                 view: gBufferColorsTexture.createView(),
 776 |                 loadOp: "clear",
 777 |                 storeOp: "store",
 778 |                 clearValue: [0, 0, 0, 0]
 779 |             }
 780 |         ],
 781 |         depthStencilAttachment: {
 782 |             view: depthTexture.createView(),
 783 |             depthLoadOp: "load",
 784 |             depthStoreOp: "store"
 785 |         },
 786 |         timestampWrites: timer.gpuPassDescriptor("gbuffer")
 787 |     };
 788 | 
 789 | 
 790 |     const lightingRenderPassDescription = {
 791 |         label: 'lighting render pass',
 792 |         colorAttachments: [{
 793 |             view: msaaTexture.createView(),
 794 |             resolveTarget: context.getCurrentTexture().createView(),
 795 |             loadOp: "load",
 796 |             storeOp: "store",
 797 |         }],
 798 |         timestampWrites: timer.gpuPassDescriptor("lighting")
 799 |     };
 800 | 
 801 |     window.addEventListener("resize", () => {
 802 |         canvas.width = window.innerWidth;
 803 |         canvas.height = window.innerHeight;
 804 | 
 805 |         mat4.perspectiveZO(projectionMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 10.0)
 806 |         mat4.multiply(viewProjectionMatrix, projectionMatrix, viewMatrix);
 807 | 
 808 |         device.queue.writeBuffer(viewProjectionMatrixBuffer, 0, viewProjectionMatrix);
 809 | 
 810 |         gBufferPositionsTexture.destroy();
 811 |         gBufferPositionsTexture = device.createTexture({
 812 |             label: "gBuffer positions texture",
 813 |             size: [canvas.width, canvas.height],
 814 |             format: "rgba16float",
 815 |             usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
 816 |             sampleCount: 4
 817 |         });
 818 | 
 819 |         gBufferNormalsTexture.destroy();
 820 |         gBufferNormalsTexture = device.createTexture({
 821 |             label: "gBuffer normals texture",
 822 |             size: [canvas.width, canvas.height],
 823 |             format: "rgba16float",
 824 |             usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
 825 |             sampleCount: 4
 826 |         });
 827 | 
 828 |         gBufferColorsTexture.destroy();
 829 |         gBufferColorsTexture = device.createTexture({
 830 |             label: "gBuffer colors texture",
 831 |             size: [canvas.width, canvas.height],
 832 |             format: "rgba8unorm",
 833 |             usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
 834 |             sampleCount: 4
 835 |         });   
 836 |         
 837 |         msaaTexture.destroy();
 838 |         msaaTexture = device.createTexture({
 839 |             label: 'msaa texture',
 840 |             size: [canvas.width, canvas.height],
 841 |             format: presentationFormat,
 842 |             usage: GPUTextureUsage.RENDER_ATTACHMENT,
 843 |             sampleCount: 4
 844 |         });
 845 | 
 846 |         depthTexture.destroy();
 847 |         depthTexture = device.createTexture({
 848 |             size: [canvas.width, canvas.height],
 849 |             format: "depth24plus",
 850 |             usage:  GPUTextureUsage.RENDER_ATTACHMENT,
 851 |             sampleCount: 4
 852 |         });
 853 | 
 854 |         lightingBindGroup = device.createBindGroup({
 855 |             layout: lightingPipeline.getBindGroupLayout(0),
 856 |             entries: [
 857 |                 {
 858 |                     binding: 0,
 859 |                     resource: {
 860 |                         buffer: lightingEyePositionBuffer
 861 |                     }
 862 |                 },
 863 |                 {
 864 |                     binding: 1,
 865 |                     resource: {
 866 |                         buffer: lights.positions
 867 |                     }
 868 |                 },
 869 |                 {
 870 |                     binding: 2,
 871 |                     resource: {
 872 |                         buffer: lights.colors
 873 |                     }
 874 |                 },
 875 |                 {
 876 |                     binding: 3,
 877 |                     resource: gBufferPositionsTexture.createView()
 878 |                 },
 879 |                 {
 880 |                     binding: 4,
 881 |                     resource: gBufferNormalsTexture.createView()
 882 |                 },
 883 |                 {
 884 |                     binding: 5,
 885 |                     resource: gBufferColorsTexture.createView()
 886 |                 }
 887 |             ]
 888 |         });
 889 | 
 890 |         lightsRenderPassDescription.colorAttachments[0].view = msaaTexture.createView();
 891 |         lightsRenderPassDescription.depthStencilAttachment.view = depthTexture.createView();
 892 | 
 893 |         gBufferRenderPassDescription.colorAttachments[0].view = gBufferPositionsTexture.createView();
 894 |         gBufferRenderPassDescription.colorAttachments[1].view = gBufferNormalsTexture.createView();
 895 |         gBufferRenderPassDescription.colorAttachments[2].view = gBufferColorsTexture.createView();
 896 |         gBufferRenderPassDescription.depthStencilAttachment.view = depthTexture.createView();
 897 | 
 898 |         lightingRenderPassDescription.colorAttachments[0].view = msaaTexture.createView();
 899 |     });
 900 | 
 901 |     let lastTime;
 902 |     function draw(time) {
 903 |         timer.cpuTimeStart("frame");
 904 | 
 905 |         lastTime = lastTime ?? time;
 906 |         const dt = time - lastTime;
 907 |         lastTime = time;
 908 | 
 909 |         ///////////////////////////
 910 |         // Update box positions
 911 |         ///////////////////////////
 912 | 
 913 |         for (const box of boxes) {
 914 |             box.rotate[0] += 0.001 * dt;
 915 |             box.rotate[1] += 0.002 * dt;
 916 | 
 917 |             xformMatrix(box.modelMatrix, box.translate, box.rotate, box.scale);
 918 |             
 919 |             device.queue.writeBuffer(box.uniformBuffer, 0, box.modelMatrix);
 920 |         }
 921 | 
 922 | 
 923 |         ///////////////////////////
 924 |         // Update light positions
 925 |         ///////////////////////////
 926 | 
 927 |         lights.data.forEach((light, i) => {
 928 |             light.t = (light.t + 0.0006 * dt) % (2 * Math.PI);
 929 |             const position = lights.positionData.subarray(i * 4, i * 4 + 3);
 930 |             vec3.scale(position, light.offset, Math.sin(light.t));
 931 |             vec3.add(position, light.position, position);
 932 |         });
 933 | 
 934 |         device.queue.writeBuffer(lights.positions, 0, lights.positionData);
 935 | 
 936 | 
 937 |         /////////////////////////////////////
 938 |         // Create command encoder
 939 |         /////////////////////////////////////
 940 | 
 941 |         const commandEncoder = device.createCommandEncoder();
 942 | 
 943 |         /////////////////////////////////////
 944 |         // Draw lights as spheres to canvas
 945 |         /////////////////////////////////////
 946 | 
 947 |         lightsRenderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();
 948 | 
 949 |         const lightsRenderPass = commandEncoder.beginRenderPass(lightsRenderPassDescription);
 950 |         lightsRenderPass.setPipeline(lightsPipeline);
 951 |         lightsRenderPass.setVertexBuffer(0, sphere.positions);
 952 |         lightsRenderPass.setVertexBuffer(1, lights.positions);
 953 |         lightsRenderPass.setVertexBuffer(2, lights.colors);
 954 |         lightsRenderPass.setIndexBuffer(sphere.indices, "uint32");
 955 |         lightsRenderPass.setBindGroup(0, lights.bindGroup);
 956 |         lightsRenderPass.drawIndexed(sphere.count, NUM_LIGHTS);           
 957 |         lightsRenderPass.end();
 958 | 
 959 |         //////////////////////////////////////////////
 960 |         // Draw boxes to GBuffer
 961 |         // (Depth buffer shared with previous pass)
 962 |         //////////////////////////////////////////////
 963 | 
 964 |         const gBufferPass = commandEncoder.beginRenderPass(gBufferRenderPassDescription);
 965 |         gBufferPass.setPipeline(gBufferPipeline);
 966 |         gBufferPass.setVertexBuffer(0, cube.positions);
 967 |         gBufferPass.setVertexBuffer(1, cube.normals);
 968 |         gBufferPass.setVertexBuffer(2, cube.uvs);
 969 | 
 970 |         for (const box of boxes) {
 971 |             gBufferPass.setBindGroup(0, box.bindGroup);
 972 |             gBufferPass.draw(cube.count);           
 973 |         }
 974 | 
 975 |         gBufferPass.end();
 976 | 
 977 |         //////////////////////////////////
 978 |         // Draw a full-screen quad and
 979 |         // apply lighting to data in
 980 |         // GBuffer.
 981 |         //////////////////////////////////
 982 | 
 983 |         lightingRenderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();
 984 | 
 985 |         const lightingRenderPass = commandEncoder.beginRenderPass(lightingRenderPassDescription);
 986 | 
 987 |         lightingRenderPass.setPipeline(lightingPipeline);
 988 |         lightingRenderPass.setVertexBuffer(0, quad.positions);
 989 |         lightingRenderPass.setBindGroup(0, lightingBindGroup);
 990 |         lightingRenderPass.draw(quad.count);           
 991 |         lightingRenderPass.end();
 992 | 
 993 |         /////////////////////////////////////
 994 |         // Close command encoder and submit
 995 |         /////////////////////////////////////
 996 |         
 997 |         timer.gpuBeforeSubmit(commandEncoder);
 998 | 
 999 |         device.queue.submit([commandEncoder.finish()]);
1000 | 
1001 |         timer.gpuAfterSubmit();
1002 | 
1003 |         timer.cpuTimeEnd("frame");
1004 | 
1005 |         cpuTimeDisplay.innerText = `${timer.cpuTimes["frame"].toFixed(2)}ms`;
1006 |         lightsTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["lights"].toFixed(2)}ms` : "N/A";
1007 |         gBufferTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["gbuffer"].toFixed(2)}ms` : "N/A";
1008 |         lightingTimeDisplay.innerText = timer.hasGPUTimer ? `${timer.gpuTimes["lighting"].toFixed(2)}ms` : "N/A";
1009 | 
1010 |         requestAnimationFrame(draw);
1011 |     }
1012 | 
1013 |     requestAnimationFrame(draw);
1014 | 
1015 | 
1016 | })();
1017 | </script>
1018 | </body>
1019 | </html>
1020 | 


--------------------------------------------------------------------------------