update mipmap

Basics/mipmapping_and_anisotropic_filtering.html

@@ -153,7 +153,7 @@ <h2 >1.18 Mipmapping and Anisotropic Filtering</h2><p>Sampling issues can occur
 };
 const texture = device.createTexture(textureDescriptor);
 device.queue.copyExternalImageToTexture({ source: imgBitmap }, { texture }, textureDescriptor.size);
-</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=87:94#1_18_2_mipmaps">1_18_2_mipmaps/index.html:88-95 Create a Texture With Mipmap Levels</a></div></div><p>Note that when creating the checkerboard texture map, we're not utilizing our helper function for image-to-texture map conversion. Instead, we're manually defining the mipmap level count.</p><p class="katex-display-counter"><code class="language-math math-block">l = \ceil*{\log_2 max(w,h)}</code></p><p>We calculate the mipmap level count using the equation shown above. This approach allows us to halve the width and height at each level until we reach the size of a single pixel.</p><p>Importantly, the usage flags for the texture include not only <code>TEXTURE_BINDING</code> but also <code>COPY_DST</code> and <code>RENDER_ATTACHMENT</code>. This configuration is necessary because we'll be using the same texture map for both reading and writing, as well as a render target during the mipmap generation process.</p><p>Let's now examine the shader-side modifications. You'll notice that we're utilizing two distinct shaders this time. One shader is dedicated solely to generating the mipmap for our texture, while the second shader is used for the actual rendering. We'll first analyze the mipmap shader, then proceed to discuss the JavaScript changes necessary for mipmap generation.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=9>var&lt;private&gt; pos : array&lt;vec2&lt;f32&gt;, 4&gt; = array&lt;vec2&lt;f32&gt;, 4&gt;(
+</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=87:94#1_18_2_mipmaps">1_18_2_mipmaps/index.html:88-95 Create a Texture With Mipmap Levels</a></div></div><p>Note that when creating the checkerboard texture map, we're not utilizing our helper function for image-to-texture map conversion. Instead, we're manually defining the mipmap level count.</p><p class="katex-display-counter"><code class="language-math math-block">l = \ceil{\log_2 max(w,h)}</code></p><p>We calculate the mipmap level count using the equation shown above. This approach allows us to halve the width and height at each level until we reach the size of a single pixel.</p><p>Importantly, the usage flags for the texture include not only <code>TEXTURE_BINDING</code> but also <code>COPY_DST</code> and <code>RENDER_ATTACHMENT</code>. This configuration is necessary because we'll be using the same texture map for both reading and writing, as well as a render target during the mipmap generation process.</p><p>Let's now examine the shader-side modifications. You'll notice that we're utilizing two distinct shaders this time. One shader is dedicated solely to generating the mipmap for our texture, while the second shader is used for the actual rendering. We'll first analyze the mipmap shader, then proceed to discuss the JavaScript changes necessary for mipmap generation.</p><div class="code-fragments"><pre><code class="language-javascript code-block" startNumber=9>var&lt;private&gt; pos : array&lt;vec2&lt;f32&gt;, 4&gt; = array&lt;vec2&lt;f32&gt;, 4&gt;(
     vec2&lt;f32&gt;(-1.0, 1.0), vec2&lt;f32&gt;(1.0, 1.0),
     vec2&lt;f32&gt;(-1.0, -1.0), vec2&lt;f32&gt;(1.0, -1.0));