test openable code sample

Basics/applying_hardcoded_vertex_colors.html

@@ -170,11 +170,11 @@ <h2 >1.3 Applying Hardcoded Vertex Colors</h2><p>Welcome to our fourth tutorial!
     out.color = vec3&lt;f32&gt;(0.0, 0.0, 1.0);
     return out;
 }
-</pre></code><div class="code-fragments-caption">1_03_vertex_color/index.html:9-22 Vertex Stage</div></div><p>Let's examine the changes. In the vertex output struct, we've introduced a new field called color. Since there are no built-ins for vertex color, we use <code>@location(0)</code> to store it. At the end of the vertex stage, we assign a hard-coded color to <code>out.color</code>.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=24>@fragment
+</pre></code><div class="code-fragments-caption"><a href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html#1_03_vertex_color">1_03_vertex_color/index.html:9-22 Vertex Stage</a></div></div><p>Let's examine the changes. In the vertex output struct, we've introduced a new field called color. Since there are no built-ins for vertex color, we use <code>@location(0)</code> to store it. At the end of the vertex stage, we assign a hard-coded color to <code>out.color</code>.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=24>@fragment
 fn fs_main(in: VertexOutput) -&gt; @location(0) vec4&lt;f32&gt; {
     return vec4&lt;f32&gt;(in.color, 1.0);
 }
-</pre></code><div class="code-fragments-caption">1_03_vertex_color/index.html:24-27 Fragment Stage</div></div><p>In the fragment stage, we can now access this color from the input and directly pass it as the output. Despite this change, you'll observe the same triangle being rendered.</p><p>Now, let's consider an important aspect of GPU rendering. In the vertex stage, we process individual vertices, while in the fragment stage, we deal with individual fragments. A fragment is conceptually similar to a pixel but can contain rich metadata such as depth and other values.</p><p>Between the vertex and fragment stages, there's an automatic process called rasterization, handled by the GPU. This process converts geometry data to fragments.</p><p>Here's an interesting question to ponder: If we assign a different color to each vertex, how will the GPU assign colors to the fragments, especially for those fragments that lie in the middle of the triangle and not directly on any of the vertices?</p><p>I encourage you to modify the sample code and experiment with this concept yourself. Try assigning different colors to each vertex and observe how the GPU interpolates these colors across the triangle's surface. This exercise will deepen your understanding of how data flows through the GPU pipeline and how the interpolation process works.</p>
+</pre></code><div class="code-fragments-caption"><a href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html#1_03_vertex_color">1_03_vertex_color/index.html:24-27 Fragment Stage</a></div></div><p>In the fragment stage, we can now access this color from the input and directly pass it as the output. Despite this change, you'll observe the same triangle being rendered.</p><p>Now, let's consider an important aspect of GPU rendering. In the vertex stage, we process individual vertices, while in the fragment stage, we deal with individual fragments. A fragment is conceptually similar to a pixel but can contain rich metadata such as depth and other values.</p><p>Between the vertex and fragment stages, there's an automatic process called rasterization, handled by the GPU. This process converts geometry data to fragments.</p><p>Here's an interesting question to ponder: If we assign a different color to each vertex, how will the GPU assign colors to the fragments, especially for those fragments that lie in the middle of the triangle and not directly on any of the vertices?</p><p>I encourage you to modify the sample code and experiment with this concept yourself. Try assigning different colors to each vertex and observe how the GPU interpolates these colors across the triangle's surface. This exercise will deepen your understanding of how data flows through the GPU pipeline and how the interpolation process works.</p>
         </article>
         <a href="https://github.com/shi-yan/WebGPUUnleashed/discussions" target="_blank" class="comment"><svg
             style="margin-right:10px;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" height="32"

Basics/drawing_a_colored_triangle_with_a_single_buffer.html

@@ -167,12 +167,12 @@ <h2 >1.5 Drawing a Colored Triangle with a Single Buffer</h2><p>In our previous
     offset: 4 * 3,
     format: 'float32x3'
 };
-</pre></code><div class="code-fragments-caption">1_05_colored_triangle_with_a_single_buffer/index.html:52-62 Modified Color Attribute Descriptor With an Offset</div></div><p>First, we modify the color attribute descriptor. We introduce an offset because we're interleaving position and color data. The offset signifies the beginning of the first color data within the buffer. Since we've placed color after vertex positions, the offset is set to 12 bytes (4 bytes * 3), which is the size of a vertex position vector.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=63>const positionColorBufferLayoutDesc = {
+</pre></code><div class="code-fragments-caption"><a href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html#1_05_colored_triangle_with_a_single_buffer">1_05_colored_triangle_with_a_single_buffer/index.html:52-62 Modified Color Attribute Descriptor With an Offset</a></div></div><p>First, we modify the color attribute descriptor. We introduce an offset because we're interleaving position and color data. The offset signifies the beginning of the first color data within the buffer. Since we've placed color after vertex positions, the offset is set to 12 bytes (4 bytes * 3), which is the size of a vertex position vector.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=63>const positionColorBufferLayoutDesc = {
     attributes: [positionAttribDesc, colorAttribDesc],
     arrayStride: 4 * 6, // sizeof(float) * 3
     stepMode: 'vertex'
 };
-</pre></code><div class="code-fragments-caption">1_05_colored_triangle_with_a_single_buffer/index.html:63-67 Modified Buffer Descriptor for Both Positions and Colors</div></div><p>Secondly, instead of creating separate buffers for positions and colors, we now use a single buffer called positionColorBuffer. When creating the descriptor for this buffer, we include both attributes in the attribute list. The arrayStride is set to 24 bytes (4 * 6) instead of 12, because each vertex now has 6 float numbers associated with it (3 for position, 3 for color).</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=68>const positionColors = new Float32Array([
+</pre></code><div class="code-fragments-caption"><a href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html#1_05_colored_triangle_with_a_single_buffer">1_05_colored_triangle_with_a_single_buffer/index.html:63-67 Modified Buffer Descriptor for Both Positions and Colors</a></div></div><p>Secondly, instead of creating separate buffers for positions and colors, we now use a single buffer called positionColorBuffer. When creating the descriptor for this buffer, we include both attributes in the attribute list. The arrayStride is set to 24 bytes (4 * 6) instead of 12, because each vertex now has 6 float numbers associated with it (3 for position, 3 for color).</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=68>const positionColors = new Float32Array([
     1.0, -1.0, 0.0, // position
     1.0, 0.0, 0.0, // 🔴
     -1.0, -1.0, 0.0, 
@@ -182,7 +182,7 @@ <h2 >1.5 Drawing a Colored Triangle with a Single Buffer</h2><p>In our previous
 ]);
 
 let positionColorBuffer = createGPUBuffer(device, positionColors, GPUBufferUsage.VERTEX);
-</pre></code><div class="code-fragments-caption">1_05_colored_triangle_with_a_single_buffer/index.html:68-77 Unified Position and Color Data</div></div><p>When creating data for this buffer, we supply 18 floating-point numbers (3 vertices * 6 floats per vertex), with positions and colors interleaved:</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=84>const pipelineDesc = {
+</pre></code><div class="code-fragments-caption"><a href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html#1_05_colored_triangle_with_a_single_buffer">1_05_colored_triangle_with_a_single_buffer/index.html:68-77 Unified Position and Color Data</a></div></div><p>When creating data for this buffer, we supply 18 floating-point numbers (3 vertices * 6 floats per vertex), with positions and colors interleaved:</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=84>const pipelineDesc = {
     layout,
     vertex: {
         module: shaderModule,
@@ -206,7 +206,7 @@ <h2 >1.5 Drawing a Colored Triangle with a Single Buffer</h2><p>In our previous
 passEncoder.setVertexBuffer(0, positionColorBuffer);
 passEncoder.draw(3, 1);
 passEncoder.end();
-</pre></code><div class="code-fragments-caption">1_05_colored_triangle_with_a_single_buffer/index.html:84-123 Pipeline Descriptor and Draw Command Formation</div></div><p>In the pipeline descriptor, we now only have one buffer descriptor in the buffers field. When encoding the render command, we set only one buffer at slot zero:</p><p>This program is functionally equivalent to the previous one, but it uses a single buffer instead of two. Using a single buffer in this case is more efficient because it avoids creating extra resources and eliminates the need to copy data twice from the CPU to the GPU. Transferring data from CPU to GPU incurs latency, so minimizing these transfers is beneficial for performance.</p><p>You might wonder when to use multiple buffers versus a single buffer. It depends on how frequently the attributes change. In this example, both the positions and colors remain constant throughout execution, making a single buffer suitable. However, if we need to update vertex colors frequently, perhaps in an animation, separating the attributes into different buffers might be preferable. This way, we can update color data without transferring the unchanged position data to the GPU.</p>
+</pre></code><div class="code-fragments-caption"><a href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html#1_05_colored_triangle_with_a_single_buffer">1_05_colored_triangle_with_a_single_buffer/index.html:84-123 Pipeline Descriptor and Draw Command Formation</a></div></div><p>In the pipeline descriptor, we now only have one buffer descriptor in the buffers field. When encoding the render command, we set only one buffer at slot zero:</p><p>This program is functionally equivalent to the previous one, but it uses a single buffer instead of two. Using a single buffer in this case is more efficient because it avoids creating extra resources and eliminates the need to copy data twice from the CPU to the GPU. Transferring data from CPU to GPU incurs latency, so minimizing these transfers is beneficial for performance.</p><p>You might wonder when to use multiple buffers versus a single buffer. It depends on how frequently the attributes change. In this example, both the positions and colors remain constant throughout execution, making a single buffer suitable. However, if we need to update vertex colors frequently, perhaps in an animation, separating the attributes into different buffers might be preferable. This way, we can update color data without transferring the unchanged position data to the GPU.</p>
         </article>
         <a href="https://github.com/shi-yan/WebGPUUnleashed/discussions" target="_blank" class="comment"><svg
             style="margin-right:10px;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" height="32"