update

shi-yan · Aug 4, 2024 · ce583ef · ce583ef
1 parent 3725e31
commit ce583ef
Show file tree

Hide file tree

Showing 46 changed files with 700 additions and 727 deletions.
diff --git a/1_09_cameras/index.html b/1_09_cameras/index.html
@@ -9,17 +9,17 @@
 </script>
 <script id="shader" type="wgsl">
 // Vertex shader
-
+//cs_start: camera_vertex_shader
 @group(0) @binding(0)
 var<uniform> transform: mat4x4<f32>;
 @group(0) @binding(1)
 var<uniform> projection: mat4x4<f32>;
-
+//cs_end: camera_vertex_shader
 struct VertexOutput {
     @builtin(position) clip_position: vec4<f32>,
     @location(0) tex_coords: vec2<f32>,
 };
-
+//cs_start: camera_vertex_shader
 @vertex
 fn vs_main(
     @location(0) inPos: vec3<f32>,
@@ -30,7 +30,7 @@
     out.tex_coords = inTexCoords;
     return out;
 }
-
+//cs_end: camera_vertex_shader
 // Fragment shader
 
 @group(0) @binding(2)
@@ -116,14 +116,15 @@
         ]);
 
         let texCoordsBuffer = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);
-
-        let translateMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(), 
+//cs_start: camera_glmatrix
+        let transformationMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(), 
         glMatrix.vec3.fromValues(100, 100, 100), glMatrix.vec3.fromValues(0,0,0), glMatrix.vec3.fromValues(0.0, 0.0, 1.0));
 
         let projectionMatrix = glMatrix.mat4.perspective(glMatrix.mat4.create(), 
         1.4, 640.0 / 480.0, 0.1, 1000.0);
-
-        let translateMatrixUniformBuffer = createGPUBuffer(device, translateMatrix, GPUBufferUsage.UNIFORM);
+//cs_end: camera_glmatrix
+//cs_start: camera_uniform_setup
+        let transformationMatrixUniformBuffer = createGPUBuffer(device, transformationMatrix, GPUBufferUsage.UNIFORM);
 
         let projectionMatrixUniformBuffer = createGPUBuffer(device, projectionMatrix, GPUBufferUsage.UNIFORM);
 
@@ -158,7 +159,7 @@
                 {
                     binding: 0,
                     resource: {
-                        buffer: translateMatrixUniformBuffer
+                        buffer: transformationMatrixUniformBuffer
                     }
                 },
                 {
@@ -178,7 +179,7 @@
                 }
             ]
         });
-
+//cs_end: camera_uniform_setup
         const pipelineLayoutDesc = { bindGroupLayouts: [uniformBindGroupLayout] };
         const layout = device.createPipelineLayout(pipelineLayoutDesc);
 

diff --git a/1_10_triangle_strips/index.html b/1_10_triangle_strips/index.html
@@ -96,7 +96,7 @@
             arrayStride: 4 * 2, // sizeof(float) * 3
             stepMode: 'vertex'
         };
-
+//cs_start: triangle_strip_vertex_data
         const positions = new Float32Array([
             100.0, -100.0, 0.0,
             100.0, 100.0, 0.0,
@@ -122,7 +122,7 @@
         ]);
 
         let texCoordsBuffer = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);
-
+//cs_end: triangle_strip_vertex_data
         let translateMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(),
             glMatrix.vec3.fromValues(100, 100, 100), glMatrix.vec3.fromValues(0, 0, 0), glMatrix.vec3.fromValues(0.0, 0.0, 1.0));
 
@@ -204,11 +204,13 @@
                 entryPoint: 'fs_main',
                 targets: [colorState]
             },
+//cs_start: triangle_strip_pipeline_desc
             primitive: {
                 topology: 'triangle-strip',
                 frontFace: 'ccw',
                 cullMode: 'none'
             }
+//cs_end: triangle_strip_pipeline_desc
         };
 
         pipeline = device.createRenderPipeline(pipelineDesc);
@@ -227,7 +229,7 @@
             colorAttachments: [colorAttachment]
         };
         commandEncoder = device.createCommandEncoder();
-
+//cs_start: triangle_strip_draw_command
         passEncoder = commandEncoder.beginRenderPass(renderPassDesc);
         passEncoder.setViewport(0, 0, canvas.width, canvas.height, 0, 1);
         passEncoder.setPipeline(pipeline);
@@ -236,7 +238,7 @@
         passEncoder.setVertexBuffer(1, texCoordsBuffer);
         passEncoder.draw(4, 1);
         passEncoder.end();
-
+//cs_end: triangle_strip_draw_command
         device.queue.submit([commandEncoder.finish()]);
     }
 

diff --git a/1_11_front_and_back_faces/index.html b/1_11_front_and_back_faces/index.html
@@ -29,7 +29,7 @@
 }
 
 // Fragment shader
-
+//cs_start: culling_fragment_shader
 @fragment
 fn fs_main(in: VertexOutput,  @builtin(front_facing) face: bool) -> @location(0) vec4<f32> {
     if (face) {
@@ -39,7 +39,7 @@
         return vec4<f32>(0.0, 1.0, 0.0 ,1.0);
     }
 }
-
+//cs_end: culling_fragment_shader
 </script>
 
 <script>
@@ -152,11 +152,13 @@
                 entryPoint: 'fs_main',
                 targets: [colorState]
             },
+//cs_start: culling_topology_setup
             primitive: {
                 topology: 'triangle-strip',
                 frontFace: 'ccw',
                 cullMode: 'none'
             }
+//cs_end: culling_topology_setup
         };
 
         pipeline = device.createRenderPipeline(pipelineDesc);

diff --git a/1_12_depth/index.html b/1_12_depth/index.html
@@ -141,7 +141,7 @@
         const colorState = {
             format: 'bgra8unorm'
         };
-
+//cs_start: depth_pipeline
         const pipelineDesc = {
             layout,
             vertex: {
@@ -165,12 +165,11 @@
                 format: 'depth24plus-stencil8'
             }
         };
-
+//cs_end: depth_pipeline
         pipeline = device.createRenderPipeline(pipelineDesc);
 
-
-
         // 🤔 Create Depth Backing
+//cs_start: depth_depth_texture
         const depthTextureDesc = {
             size: [canvas.width, canvas.height, 1],
             dimension: '2d',
@@ -180,8 +179,7 @@
 
         let depthTexture = device.createTexture(depthTextureDesc);
         let depthTextureView = depthTexture.createView();
-
-
+//cs_end: depth_depth_texture
 
         let colorTexture = context.getCurrentTexture();
         let colorTextureView = colorTexture.createView();
@@ -192,7 +190,7 @@
             loadOp: 'clear',
             storeOp: 'store'
         };
-
+//cs_start: depth_depth_attachment
         const depthAttachment = {
             view: depthTextureView,
             depthClearValue: 1,
@@ -207,6 +205,7 @@
             colorAttachments: [colorAttachment],
             depthStencilAttachment: depthAttachment
         };
+//cs_end: depth_depth_attachment
         commandEncoder = device.createCommandEncoder();
 
         passEncoder = commandEncoder.beginRenderPass(renderPassDesc);

diff --git a/1_13_indices/index.html b/1_13_indices/index.html
@@ -70,7 +70,7 @@
             arrayStride: 4 * 3, // sizeof(float) * 3
             stepMode: 'vertex'
         };
-
+//cs_start: index_buffer_vertex_pool
         const positions = new Float32Array([
             -100.0, 100.0, 0.0,
             -100.0, 100.0, 200.0,
@@ -87,15 +87,16 @@
         ]);
 
         const positionBuffer = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
-
+//cs_end: index_buffer_vertex_pool
+//cs_start: index_buffer_index_buffers
         const indices = new Uint16Array([0, 1, 2, 3, 4, 5, 6, 7, 0, 1]);
 
         const indexBuffer = createGPUBuffer(device, indices, GPUBufferUsage.INDEX);
 
         const indices2 = new Uint16Array([3, 1, 5, 7]);
 
         const index2Buffer = createGPUBuffer(device, indices2, GPUBufferUsage.INDEX);
-
+//cs_end: index_buffer_index_buffers
         let translateMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(),
             glMatrix.vec3.fromValues(300, 300, 300), glMatrix.vec3.fromValues(0, 0, 0), glMatrix.vec3.fromValues(0.0, 0.0, 1.0));
 
@@ -158,12 +159,14 @@
                 entryPoint: 'fs_main',
                 targets: [colorState]
             },
+//cs_start: index_buffer_primitive
             primitive: {
                 topology: 'triangle-strip',
                 stripIndexFormat: 'uint16',
                 frontFace: 'ccw',
                 cullMode: 'none'
             },
+//cs_end: index_buffer_primitive
             depthStencil: {
                 depthWriteEnabled: true,
                 depthCompare: 'less',
@@ -209,7 +212,7 @@
             depthStencilAttachment: depthAttachment
         };
         commandEncoder = device.createCommandEncoder();
-
+//cs_start: index_buffer_command_submission
         passEncoder = commandEncoder.beginRenderPass(renderPassDesc);
         passEncoder.setViewport(0, 0, canvas.width, canvas.height, 0, 1);
         passEncoder.setPipeline(pipeline);
@@ -220,7 +223,7 @@
         passEncoder.setIndexBuffer(index2Buffer, 'uint16');
         passEncoder.drawIndexed(4);
         passEncoder.end();
-
+//cs_end: index_buffer_command_submission
         device.queue.submit([commandEncoder.finish()]);
     }
 

diff --git a/1_14_loading_models/index.html b/1_14_loading_models/index.html
@@ -50,6 +50,7 @@
             showWarning("WebGPU support is not available. A WebGPU capable browser is required to run this sample.");
             throw new Error("WebGPU support is not available");
         }
+//cs_start: model_loading_loading
         const objResponse = await fetch('../data/teapot.obj');
         const objBody = await objResponse.text();
 
@@ -60,7 +61,7 @@
                 resolve(obj);
             })
         })();
-
+//cs_end: model_loading_loading
 
         const adapter = await navigator.gpu.requestAdapter();
         console.log(adapter);
@@ -78,7 +79,6 @@
             mipmapFilter: 'linear',
         });
 
-
         let shaderModule = shaderModuleFromCode(device, 'shader');
 
         const positionAttribDesc = {
@@ -92,7 +92,7 @@
             arrayStride: 4 * 3, // sizeof(float) * 3
             stepMode: 'vertex'
         };
-
+//cs_start: model_loading_setting_position_index_buffer
         let positions = [];
 
         for (let v of obj.result.models[0].vertices) {
@@ -103,7 +103,6 @@
 
         positions = new Float32Array(positions);
 
-
         let positionBuffer = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
 
         let indices = [];
@@ -119,7 +118,7 @@
         indices = new Uint16Array(indices);
 
         const indexBuffer = createGPUBuffer(device, indices, GPUBufferUsage.INDEX);
-
+//cs_end: model_loading_setting_position_index_buffer
         let translateMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(),
             glMatrix.vec3.fromValues(3, 3, 3), glMatrix.vec3.fromValues(0, 0, 0), glMatrix.vec3.fromValues(0.0, 0.0, 1.0));
 

diff --git a/1_15_normals/index.html b/1_15_normals/index.html
@@ -10,14 +10,15 @@
 <script src="../utils/OBJFile.js"> </script>
 <script id="shader" type="wgsl">
 // Vertex shader
-
+//cs_start: normal_uniform_normal_transformation
 @group(0) @binding(0)
 var<uniform> modelView: mat4x4<f32>;
 @group(0) @binding(1)
 var<uniform> projection: mat4x4<f32>;
 @group(0) @binding(2)
 var<uniform> normal: mat4x4<f32>;
-
+//cs_end: normal_uniform_normal_transformation
+//cs_start: normal_vertex_shader
 struct VertexOutput {
     @builtin(position) clip_position: vec4<f32>,
     @location(0) normal: vec3<f32>
@@ -33,9 +34,9 @@
     out.normal = normalize(normal * vec4<f32>(inNormal, 0.0)).xyz;
     return out;
 }
-
+//cs_end: normal_vertex_shader
 // Fragment shader
-
+//cs_start: normal_fragment_shader
 @fragment
 fn fs_main(in: VertexOutput,  @builtin(front_facing) face: bool) -> @location(0) vec4<f32> {
     if (face) {
@@ -46,7 +47,7 @@
         return vec4<f32>(0.0, 1.0, 0.0 ,1.0);
     }
 }
-
+//cs_end: normal_fragment_shader
 </script>
 
 <script>
@@ -152,7 +153,7 @@
             arrayStride: 4 * 3, // sizeof(float) * 3
             stepMode: 'vertex'
         };
-
+//cs_start: normal_normal_attrib
         const normalAttribDesc = {
             shaderLocation: 1, // @location(1)
             offset: 0,
@@ -164,14 +165,14 @@
             arrayStride: 4 * 3, // sizeof(float) * 3
             stepMode: 'vertex'
         };
-
+//cs_end: normal_normal_attrib
         const pipelineLayoutDesc = { bindGroupLayouts: [uniformBindGroupLayout] };
         const layout = device.createPipelineLayout(pipelineLayoutDesc);
 
         const colorState = {
             format: 'bgra8unorm'
         };
-
+//cs_start: normal_pipeline_config
         const pipelineDesc = {
             layout,
             vertex: {
@@ -195,7 +196,7 @@
                 format: 'depth24plus-stencil8'
             }
         };
-
+//cs_end: normal_pipeline_config
         pipeline = device.createRenderPipeline(pipelineDesc);
 
         const depthTextureDesc = {