add missing images

Advanced/gaussian_splatting.html

@@ -231,7 +231,7 @@ <h2 >5.8 Gaussian Splatting</h2><p><a class="link" href="https://aras-p.info/blo
 fn fs_main(in: VertexOutput) -&gt; @location(0) vec4&lt;f32&gt; {
     return in.color;
 }
-</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=34:59#5_08_gaussian_splatting_1">5_08_gaussian_splatting_1/index.html:35-60 Visualizing the Point Cloud</a></div></div><p>And here is the rendering result:</p><p><div class="img-container"><img class="img" onclick="openImage(this)" src="thumb_pointcloud.png" original_src="pointcloud.png" alt="Visualizing the Point Cloud" sources='[]' /><div class="img-title">Visualizing the Point Cloud</div></div></p><p>To understand how to render a Gaussian splat, we need to be familiar with the geometric interpretation of a 3D Gaussian function. For that, I recommend this <a class="link" href="https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf" target="_blank">document</a>. I will skip the details and summarize what's useful for our implementation.</p><p>A 3D Gaussian is defined by two parameters: a centroid and a 3x3 covariance matrix. Intuitively, the centroid is the position of a Gaussian, and the covariance matrix defines the shape of the Gaussian (an ellipsoid).</p><p class="katex-display-counter"><code class="language-math math-block">  \mathcal{N}(\mu, \sigma^2)</code></p><p>If we consider 1D Gaussians, they are defined by a mean <code class="language-math math-inline">\mu</code> and a variance <code class="language-math math-inline">\sigma^2</code>. In this context, the mean <code class="language-math math-inline">\mu</code> dictates the center of the Gaussian on the x-axis, while <code class="language-math math-inline">\sigma^2</code> determines its spread or shape.</p><p><div class="img-container"><img class="img" onclick="openImage(this)" src="placeholder.jpg" alt="1D Gaussians of Different Means and Variances" sources='["https://en.wikipedia.org/wiki/Normal_distribution"]' /><div class="img-title">1D Gaussians of Different Means and Variances<a class="img-source" target="_blank" href="https://en.wikipedia.org/wiki/Normal_distribution">[SOURCE]</a></div></div></p><p>The same principle extends to 2D and 3D Gaussians, where they are defined by a mean <code class="language-math math-inline">\mu</code> (or centroid) and a covariance matrix <code class="language-math math-inline">\Sigma</code>. In 2D, the covariance <code class="language-math math-inline">\Sigma</code> is a 2x2 matrix, and in 3D, it is a 3x3 matrix. The covariance matrix holds geometric significance, defining the ellipsoidal shape of the Gaussian.</p><p class="katex-display-counter"><code class="language-math math-block">  \mathcal{N}(\mu, \Sigma)</code></p><p>Below is an illustration showing various 2D Gaussian shapes and their corresponding covariances.</p><p><div class="img-container"><img class="img" onclick="openImage(this)" src="placeholder.jpg" alt="2D Gaussian Shapes and Their Covariances" sources='["https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf"]' /><div class="img-title">2D Gaussian Shapes and Their Covariances<a class="img-source" target="_blank" href="https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf">[SOURCE]</a></div></div></p><p>We can shift the centroid to adjust a Gaussian's position, and we can also rotate and scale the covariance matrix to modify its shape. This process is akin to applying a model-view matrix to vertices during rendering, although the mathematical operations involved are not identical.</p><p>The fundamental insight from the geometric interpretation outlined in the <a class="link" href="https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf" target="_blank">document</a> is that the covariance matrix <code class="language-math math-inline">\Sigma</code> specifies a rotation and scaling transformation that morphs a standard Gaussian with the identity matrix <code class="language-math math-inline">\mathbf I</code> as its covariance into an ellipsoidal shape. Let this transformation be represented by a 3x3 matrix <code class="language-math math-inline">\textit{T}</code>; it can be factored into a product of a 3x3 rotation matrix <code class="language-math math-inline">\textit{R}</code> and a scaling matrix <code class="language-math math-inline">\textit{S}</code>. Thus:</p><p class="katex-display-counter"><code class="language-math math-block">  \begin{aligned}
+</pre></code><div class="code-fragments-caption"><a target="_blank" href="https://shi-yan.github.io/WebGPUUnleashed/code/code.html?highlight=34:59#5_08_gaussian_splatting_1">5_08_gaussian_splatting_1/index.html:35-60 Visualizing the Point Cloud</a></div></div><p>And here is the rendering result:</p><p><div class="img-container"><img class="img" onclick="openImage(this)" src="thumb_pointcloud.png" original_src="pointcloud.png" alt="Visualizing the Point Cloud" sources='[]' /><div class="img-title">Visualizing the Point Cloud</div></div></p><p>To understand how to render a Gaussian splat, we need to be familiar with the geometric interpretation of a 3D Gaussian function. For that, I recommend this <a class="link" href="https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf" target="_blank">document</a>. I will skip the details and summarize what's useful for our implementation.</p><p>A 3D Gaussian is defined by two parameters: a centroid and a 3x3 covariance matrix. Intuitively, the centroid is the position of a Gaussian, and the covariance matrix defines the shape of the Gaussian (an ellipsoid).</p><p class="katex-display-counter"><code class="language-math math-block">  \mathcal{N}(\mu, \sigma^2)</code></p><p>If we consider 1D Gaussians, they are defined by a mean <code class="language-math math-inline">\mu</code> and a variance <code class="language-math math-inline">\sigma^2</code>. In this context, the mean <code class="language-math math-inline">\mu</code> dictates the center of the Gaussian on the x-axis, while <code class="language-math math-inline">\sigma^2</code> determines its spread or shape.</p><p><div class="img-container"><img class="img" onclick="openImage(this)" src="thumb_normal_distribution.png" original_src="normal_distribution.png" alt="1D Gaussians of Different Means and Variances" sources='["https://en.wikipedia.org/wiki/Normal_distribution"]' /><div class="img-title">1D Gaussians of Different Means and Variances<a class="img-source" target="_blank" href="https://en.wikipedia.org/wiki/Normal_distribution">[SOURCE]</a></div></div></p><p>The same principle extends to 2D and 3D Gaussians, where they are defined by a mean <code class="language-math math-inline">\mu</code> (or centroid) and a covariance matrix <code class="language-math math-inline">\Sigma</code>. In 2D, the covariance <code class="language-math math-inline">\Sigma</code> is a 2x2 matrix, and in 3D, it is a 3x3 matrix. The covariance matrix holds geometric significance, defining the ellipsoidal shape of the Gaussian.</p><p class="katex-display-counter"><code class="language-math math-block">  \mathcal{N}(\mu, \Sigma)</code></p><p>Below is an illustration showing various 2D Gaussian shapes and their corresponding covariances.</p><p><div class="img-container"><img class="img" onclick="openImage(this)" src="thumb_2d_splats.png" original_src="2d_splats.png" alt="2D Gaussian Shapes and Their Covariances" sources='["https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf"]' /><div class="img-title">2D Gaussian Shapes and Their Covariances<a class="img-source" target="_blank" href="https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf">[SOURCE]</a></div></div></p><p>We can shift the centroid to adjust a Gaussian's position, and we can also rotate and scale the covariance matrix to modify its shape. This process is akin to applying a model-view matrix to vertices during rendering, although the mathematical operations involved are not identical.</p><p>The fundamental insight from the geometric interpretation outlined in the <a class="link" href="https://users.cs.utah.edu/~tch/CS4640F2019/resources/A%20geometric%20interpretation%20of%20the%20covariance%20matrix.pdf" target="_blank">document</a> is that the covariance matrix <code class="language-math math-inline">\Sigma</code> specifies a rotation and scaling transformation that morphs a standard Gaussian with the identity matrix <code class="language-math math-inline">\mathbf I</code> as its covariance into an ellipsoidal shape. Let this transformation be represented by a 3x3 matrix <code class="language-math math-inline">\textit{T}</code>; it can be factored into a product of a 3x3 rotation matrix <code class="language-math math-inline">\textit{R}</code> and a scaling matrix <code class="language-math math-inline">\textit{S}</code>. Thus:</p><p class="katex-display-counter"><code class="language-math math-block">  \begin{aligned}
   \Sigma &= \textit{T} \textit{I} \textit{T}^\top \\
   \Sigma &= \textit{R} \textit{S} (\textit{R} \textit{S})^\top \\
   \Sigma &= \textit{R} \textit{S} \textit{S}^\top \textit{R}^\top \\