format code

Basics/working_with_textures.html

@@ -234,7 +234,8 @@ <h2 >1.7 Working with Textures</h2><p>Having established a foundation in uniform
     0.0, 1.0, 0.0
 ]);
 
-let positionBuffer = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
+let positionBuffer 
+    = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
 
 const texCoords = new Float32Array([
     1.0,
@@ -248,13 +249,15 @@ <h2 >1.7 Working with Textures</h2><p>Having established a foundation in uniform
 
 ]);
 
-let texCoordsBuffer = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);
+let texCoordsBuffer 
+    = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);
 
 const uniformData = new Float32Array([
     0.1, 0.1, 0.1
 ]);
 
-let uniformBuffer = createGPUBuffer(device, uniformData, GPUBufferUsage.UNIFORM);
+let uniformBuffer 
+    = createGPUBuffer(device, uniformData, GPUBufferUsage.UNIFORM);
 
 let uniformBindGroupLayout = device.createBindGroupLayout({
     entries: [
@@ -297,15 +300,15 @@ <h2 >1.7 Working with Textures</h2><p>Having established a foundation in uniform
         }
     ]
 });
-</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=75:167#1_07_working_with_textures">1_07_working_with_textures/index.html:75-167 Creating a Vertex Buffer Containing Texture Coordinates and Uniforms for the Texture and Sampler</a></div></div><p>The remaining code structure remains largely the same. We still create the uniform buffer, but now it only contains the offset value. When we create the bind group, for the <code>@binding(0)</code>, we continue to provide the offsets via the uniform buffer. However, for the texture, we're using a texture view as its resource. And for the sampler, we simply provide the sampler as the resource.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=210>passEncoder = commandEncoder.beginRenderPass(renderPassDesc);
+</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=75:170#1_07_working_with_textures">1_07_working_with_textures/index.html:75-170 Creating a Vertex Buffer Containing Texture Coordinates and Uniforms for the Texture and Sampler</a></div></div><p>The remaining code structure remains largely the same. We still create the uniform buffer, but now it only contains the offset value. When we create the bind group, for the <code>@binding(0)</code>, we continue to provide the offsets via the uniform buffer. However, for the texture, we're using a texture view as its resource. And for the sampler, we simply provide the sampler as the resource.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=213>passEncoder = commandEncoder.beginRenderPass(renderPassDesc);
 passEncoder.setViewport(0, 0, canvas.width, canvas.height, 0, 1);
 passEncoder.setPipeline(pipeline);
 passEncoder.setBindGroup(0, uniformBindGroup);
 passEncoder.setVertexBuffer(0, positionBuffer);
 passEncoder.setVertexBuffer(1, texCoordsBuffer);
 passEncoder.draw(3, 1);
 passEncoder.end();
-</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=210:217#1_07_working_with_textures">1_07_working_with_textures/index.html:210-217 Submitting Command With Texture Coordinate Buffer</a></div></div><p>The rest of the code follows the previous pattern. One notable difference is that we provide the texture coordinates by calling <code>setVertexBuffer</code> for <code>@location(1)</code> with the texture coordinate buffer.</p><p>With these changes in place, we've effectively integrated a texture into our shader, opening up a world of possibilities for more visually captivating graphics.</p>
+</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=213:220#1_07_working_with_textures">1_07_working_with_textures/index.html:213-220 Submitting Command With Texture Coordinate Buffer</a></div></div><p>The rest of the code follows the previous pattern. One notable difference is that we provide the texture coordinates by calling <code>setVertexBuffer</code> for <code>@location(1)</code> with the texture coordinate buffer.</p><p>With these changes in place, we've effectively integrated a texture into our shader, opening up a world of possibilities for more visually captivating graphics.</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"

code/1_07_working_with_textures/index.html

@@ -113,7 +113,8 @@
             0.0, 1.0, 0.0
         ]);
 
-        let positionBuffer = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
+        let positionBuffer 
+            = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
 
         const texCoords = new Float32Array([
             1.0,
@@ -127,13 +128,15 @@
 
         ]);
 
-        let texCoordsBuffer = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);
+        let texCoordsBuffer 
+            = createGPUBuffer(device, texCoords, GPUBufferUsage.VERTEX);
 
         const uniformData = new Float32Array([
             0.1, 0.1, 0.1
         ]);
 
-        let uniformBuffer = createGPUBuffer(device, uniformData, GPUBufferUsage.UNIFORM);
+        let uniformBuffer 
+            = createGPUBuffer(device, uniformData, GPUBufferUsage.UNIFORM);
 
         let uniformBindGroupLayout = device.createBindGroupLayout({
             entries: [