Blog: new post

docs/blog/index.html

@@ -39,6 +39,113 @@ <h1>raydiance - blog</h1>
         </div>
 
         <!-- Posts -->
+        <article>
+            <h2>More triangles, cameras, light, and depth</h2>
+            <div class="article-date">2023-01-09</div>
+
+            <img src="images/20230109-181800.webp">
+
+            <p>
+                A lot has happened since our single hardcoded triangle. We can
+                now render shaded, depth tested, transformed, indexed triangle
+                lists, with perspective projection.
+            </p>
+
+            <h3>Loading and rendering GLTF scenes</h3>
+
+            <img src="images/20230109-182433.png">
+
+            <p>
+                We created a simple "cube on a plane" scene in Blender. Each
+                object has a "Principled BSDF" material attached to it. This
+                material is <a
+                    href="https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html#extensions">well
+                    supported</a> by Blender's GLTF exporter, which is what we will
+                use for our application. GLTF supports text formats, but we will
+                export the scene in binary (<code>.glb</code>) for efficiency.
+            </p>
+
+            <p>
+                To load the <code>.glb</code> file, we use <a href="https://crates.io/crates/gltf"><code>gltf</code></a>
+                crate. Immediately after loading, we pick out the interesting
+                fields (cameras, meshes, materials) and convert them into our
+                <a
+                    href="https://github.com/phoekz/raydiance/blob/cb1bcc1975e3860b7208cffb4286fec3e91cc5d2/src/assets.rs#L3-L35">internal
+                    data format</a>. This internal format is designed to be easy to
+                upload to the GPU. We also do aggressive validation in order to
+                catch any properties that we don't support yet, such as
+                textures, meshes that do not have normals, and so on. Our
+                internal formats represent matrices and vectors with types from
+                <a href="https://crates.io/crates/nalgebra"><code>nalgebra</code></a>
+                crate. To turn our internal formats into byte slices <a
+                    href="https://crates.io/crates/bytemuck"><code>bytemuck</code></a> crate.
+            </p>
+
+            <p>
+                Before we can render, we need to upload geometry data to the
+                GPU. For now, we assume the number of meshes is much less than
+                4096 (on most Windows hosts the <a
+                    href="https://vulkan.gpuinfo.org/displaydevicelimit.php?platform=windows&name=maxMemoryAllocationCount"><code>maxMemoryAllocationCount</code></a>
+                is 4096). This allows us to cheat and allocate buffers for each
+                mesh. The better way to handle allocations is make a few large
+                allocations and sub-allocate within those, which we can do
+                ourselves, or use a library like <a
+                    href="https://github.com/GPUOpen-LibrariesAndSDKs/VulkanMemoryAllocator"><code>VulkanMemoryAllocator</code></a>.
+                We will come back to memory allocators in the future.
+            </p>
+
+            <p>
+                To render, we will have to work out the perspective projection,
+                the view transform and object transforms from GLTF. We also add
+                rotation transform to animate the cube. We pre-multiply all
+                transforms and upload the final matrix to the vertex shader
+                using <a
+                    href="https://registry.khronos.org/vulkan/specs/1.3-extensions/html/vkspec.html#descriptorsets-push-constants">push
+                    constants</a>. The base color of the mesh is also packed into a
+                push constant. Push constants are great for small data, because
+                we can avoid:
+            </p>
+
+            <ol>
+                <li>Descriptor set layouts, descriptor pools, descriptor sets</li>
+                <li>Uniform buffers, which would have to be double buffered to avoid stalls</li>
+                <li>Synchronizing updates to uniform buffers</li>
+            </ol>
+
+            <p>
+                As a side, while looking into push constants, we learned about
+                <a
+                    href="https://registry.khronos.org/vulkan/specs/1.3-extensions/html/vkspec.html#VK_KHR_push_descriptor"><code>VK_KHR_push_descriptor</code></a>.
+                This extension sounds like it could further simplify working
+                with Vulkan, which is really exciting. We will come back to it
+                in the future once we get into texture mapping.
+            </p>
+
+            <h3>Depth testing with <code>VK_KHR_dynamic_rendering</code></h3>
+
+            <img src="images/20230109-190941.png">
+
+            <p>
+                Depth testing requires a depth texture, which we create at
+                startup, and re-create when the window changes size. To enable depth testing with
+                <code>VK_KHR_dynamic_rendering</code>, we had to extend our
+                graphics pipeline with a new structure called
+                <a
+                    href="https://registry.khronos.org/vulkan/specs/1.3-extensions/html/vkspec.html#VkPipelineRenderingCreateInfo"><code>VkPipelineRenderingCreateInfo</code></a>,
+                and also add color blend state which was previously left out.
+                One additional pipeline barrier was required to transition the
+                depth texture for rendering.
+            </p>
+
+            <p>
+                Commit:
+                <code>
+                    <a href="https://github.com/phoekz/raydiance/commit/cb1bcc1975e3860b7208cffb4286fec3e91cc5d2">cb1bcc19</a>
+                </code>
+            </p>
+
+        </article>
+
         <article>
             <h2>The first triangle</h2>
             <div class="article-date">2023-01-08</div>
@@ -70,8 +177,8 @@ <h2>The first triangle</h2>
             <p>
                 Commit:
                 <code>
-                <a href="https://github.com/phoekz/raydiance/commit/c8f9ef2c0f3b51ddfd71f33ec086fca1531051ab">c8f9ef2c</a>
-            </code>
+                    <a href="https://github.com/phoekz/raydiance/commit/c8f9ef2c0f3b51ddfd71f33ec086fca1531051ab">c8f9ef2c</a>
+                </code>
             </p>
 
         </article>
@@ -131,8 +238,8 @@ <h2>Clearing window with <code>VK_KHR_dynamic_rendering</code></h2>
             <p>
                 Commit:
                 <code>
-                <a href="https://github.com/phoekz/raydiance/commit/0f6d7f1bf1b22d1fff43e87080c854eadb3e459d">0f6d7f1b</a>
-            </code>
+                    <a href="https://github.com/phoekz/raydiance/commit/0f6d7f1bf1b22d1fff43e87080c854eadb3e459d">0f6d7f1b</a>
+                </code>
             </p>
 
         </article>
@@ -166,8 +273,8 @@ <h2>Hello, winit!</h2>
             <p>
                 Commit:
                 <code>
-                <a href="https://github.com/phoekz/raydiance/commit/ff4c31c2c6c2039d33bfd07865448da963febfd6">ff4c31c2</a>
-            </code>
+                    <a href="https://github.com/phoekz/raydiance/commit/ff4c31c2c6c2039d33bfd07865448da963febfd6">ff4c31c2</a>
+                </code>
             </p>
         </article>