change png images to jpg for better loading

hwan-h-heo · Sep 23, 2024 · 36018e6 · 36018e6
1 parent 74f050b
commit 36018e6
Show file tree

Hide file tree

Showing 87 changed files with 50 additions and 30 deletions.
diff --git a/assets/blog_bg.jpg b/assets/blog_bg.jpg
diff --git a/assets/new_bg.jpg b/assets/new_bg.jpg
diff --git a/assets/poster.jpg b/assets/poster.jpg
diff --git a/blogs/posts/211128_fourier/assets/kernel_trick.jpg b/blogs/posts/211128_fourier/assets/kernel_trick.jpg
diff --git a/blogs/posts/211128_fourier/assets/main.jpg b/blogs/posts/211128_fourier/assets/main.jpg
diff --git a/blogs/posts/230202_ngp/assets/ngp.jpg b/blogs/posts/230202_ngp/assets/ngp.jpg
diff --git a/blogs/posts/230202_ngp/assets/plenoxel.jpg b/blogs/posts/230202_ngp/assets/plenoxel.jpg
diff --git a/blogs/posts/231130_nerf_in_game/assets/IMG_2_Phong_reflection_model.jpg b/blogs/posts/231130_nerf_in_game/assets/IMG_2_Phong_reflection_model.jpg
diff --git a/...sts/231130_nerf_in_game/assets/IMG_3_diffuse_specular_disentanglement_model.jpg b/...sts/231130_nerf_in_game/assets/IMG_3_diffuse_specular_disentanglement_model.jpg
diff --git a/blogs/posts/231130_nerf_in_game/assets/IMG_4_reflection_reparameterization.jpg b/blogs/posts/231130_nerf_in_game/assets/IMG_4_reflection_reparameterization.jpg
diff --git a/blogs/posts/231130_nerf_in_game/index.html b/blogs/posts/231130_nerf_in_game/index.html
@@ -160,7 +160,7 @@ <h3 id="problem">NeRF&#39;s Inability to Separate Lighting Effects</h3>
                         <p>In other words, NeRF models cannot separate the reflections of the captured light from the object itself. This is a critical flaw, especially considering that Physics-Based Rendering (PBR), essential for creating realistic games, relies on realistic lighting effects.</p>
                         <p>Even in Phong shading, one of the simplest forms of light shading, the reflection effects are handled by three components:</p>
                         <figure>
-                            <img src="assets/IMG_2_Phong_reflection_model.png" alt="Gaussian RT" width="100%"> 
+                            <img src="assets/IMG_2_Phong_reflection_model.jpg" alt="Gaussian RT" width="100%"> 
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 3.</strong> Phong reflection model, source: <span style="text-decoration: underline;"><a href="https://learnopengl.com/Lighting/Basic-Lighting">OpenGL</a></span> </figcaption>
                         </figure>
                         <ul>
@@ -174,13 +174,13 @@ <h3 id="separating-lighting-effects-from-nerf">Separating Lighting Effects from
                         <p>So, how can we separate lighting effects in NeRF models? There are several methods, but one simple approach involves modifying the model architecture to output specular and diffuse components separately. </p>
                         <p>Unlike the standard NeRF network structure, which takes coordinates $x$ (spatial location) and $d$ (direction) as inputs and outputs an RGB color $c$, a modified NeRF model outputs both specular color $c_s$ and diffuse color $c_d$.</p>
                         <figure>
-                            <img src="assets/IMG_3_diffuse_specular_disentanglement_model.png" alt="Gaussian RT" width="100%"> 
+                            <img src="assets/IMG_3_diffuse_specular_disentanglement_model.jpg" alt="Gaussian RT" width="100%"> 
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 4.</strong> NeRF MLP w/ Diffuse-Specular Disentanglement </figcaption>
                         </figure>
                         <p>In this structure, the Spatial MLP not only outputs the diffuse color $c_d$ but also the normal vector $n$ at that location. This normal vector is used to represent the reflected light more accurately through a technique called &#39;reflection reparameterization.&#39; Consequently, the reflected light parameter $w_r$ is input into the Directional MLP, which then outputs the specular color $c_s$.</p>
                         <p>Understanding the reflection reparameterization formula might not be straightforward initially, but consider the following scenario to understand why we can represent reflected light $w_r$ through the normal vector and the observation direction.</p>
                         <figure>
-                            <img src="assets/IMG_4_reflection_reparameterization.png" alt="Gaussian RT" width="100%"> 
+                            <img src="assets/IMG_4_reflection_reparameterization.jpg" alt="Gaussian RT" width="100%"> 
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 5.</strong> Illustration of reflection parameterization </figcaption>
                         </figure>
                         <p>As illustrated above, the reflected light $w_r$ at a point on an object has the following relationship with the observer&#39;s direction $d$ and normal $n$:</p>

diff --git a/blogs/posts/240426_diffusion_depth/assets/butterfly.jpg b/blogs/posts/240426_diffusion_depth/assets/butterfly.jpg
diff --git a/blogs/posts/240426_diffusion_depth/assets/datas.jpg b/blogs/posts/240426_diffusion_depth/assets/datas.jpg
diff --git a/blogs/posts/240426_diffusion_depth/assets/me.jpg b/blogs/posts/240426_diffusion_depth/assets/me.jpg
diff --git a/blogs/posts/240426_diffusion_depth/index.html b/blogs/posts/240426_diffusion_depth/index.html
@@ -410,7 +410,7 @@ <h2 id="sec4"> 4. Results & Analysis</h2>
                             특히 일부 사진 (Marigold demo 에 있는 butterfly 등) 들에서는 mesh 로 바꿔서 봤을 때 극단적으로 flat 한 결과를 보여주었다.
                         </p>
 
-                        <img src="assets/butterfly.png" alt="Marigold's teaser" width="100%">
+                        <img src="assets/butterfly.jpg" alt="Marigold's teaser" width="100%">
                         <p><em>Left: front view / Right: side view of the mesh</em></p>
 
                         <p class="lang eng">

diff --git a/blogs/posts/240721_sfm/assets/NLE_mast3r.jpg b/blogs/posts/240721_sfm/assets/NLE_mast3r.jpg
diff --git a/blogs/posts/240721_sfm/assets/NLE_vggsfm.jpg b/blogs/posts/240721_sfm/assets/NLE_vggsfm.jpg
diff --git a/blogs/posts/240721_sfm/assets/colmap.jpg b/blogs/posts/240721_sfm/assets/colmap.jpg
diff --git a/blogs/posts/240721_sfm/assets/colmap_pipe.jpg b/blogs/posts/240721_sfm/assets/colmap_pipe.jpg
diff --git a/blogs/posts/240721_sfm/assets/guitar_mast3r.jpg b/blogs/posts/240721_sfm/assets/guitar_mast3r.jpg
diff --git a/blogs/posts/240721_sfm/assets/guitar_vggsfm.jpg b/blogs/posts/240721_sfm/assets/guitar_vggsfm.jpg
diff --git a/blogs/posts/240721_sfm/assets/mast3r.jpg b/blogs/posts/240721_sfm/assets/mast3r.jpg
diff --git a/blogs/posts/240721_sfm/assets/pen_colmap.jpg b/blogs/posts/240721_sfm/assets/pen_colmap.jpg
diff --git a/blogs/posts/240721_sfm/assets/pen_sparse_mast3r.jpg b/blogs/posts/240721_sfm/assets/pen_sparse_mast3r.jpg
diff --git a/blogs/posts/240721_sfm/assets/pen_sparse_vggsfm.jpg b/blogs/posts/240721_sfm/assets/pen_sparse_vggsfm.jpg
diff --git a/blogs/posts/240721_sfm/assets/pen_vggsfm.jpg b/blogs/posts/240721_sfm/assets/pen_vggsfm.jpg
diff --git a/blogs/posts/240721_sfm/assets/sfm.jpg b/blogs/posts/240721_sfm/assets/sfm.jpg
diff --git a/blogs/posts/240721_sfm/assets/vgg.jpg b/blogs/posts/240721_sfm/assets/vgg.jpg
diff --git a/blogs/posts/240721_sfm/index.html b/blogs/posts/240721_sfm/index.html
@@ -128,7 +128,7 @@ <h2 id="intro"> 1. Introduction</h2>
                         <br/>
                         <h3 id="sfm"> What is Structure-from-Motion? </h3>
                         <figure>
-                            <img src="assets/sfm.png" alt="Structure-from-Motion" width="100%">
+                            <img src="assets/sfm.jpg" alt="Structure-from-Motion" width="100%">
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 1.</strong> Structure-from-Motion, source: Privacy Preserving Structure-from-Motion</figcaption>
                         </figure>
                         <p>
@@ -141,7 +141,7 @@ <h3 id="sfm"> What is Structure-from-Motion? </h3>
                         <h3 id="colmap">COLMAP: The Gold Standard in SfM</h3>
                         <br/>
                         <figure>
-                            <img src="assets/colmap.png" alt="colmap" width="100%">
+                            <img src="assets/colmap.jpg" alt="colmap" width="100%">
                             <br/>
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 2.</strong> COLMAP, source: <span style="text-decoration: underline;"><a href="https://colmap.github.io/">COLMAP</a></span></figcaption>
                         </figure>
@@ -156,7 +156,7 @@ <h3 id="colmap">COLMAP: The Gold Standard in SfM</h3>
                         </p>
                         <h4>How COLMAP Works</h4>
                         <br/>
-                        <img src="assets/colmap_pipe.png" alt="colmap pipeline" width="100%">
+                        <img src="assets/colmap_pipe.jpg" alt="colmap pipeline" width="100%">
                         <br/>
                         <br/>
                         <ol>
@@ -191,7 +191,7 @@ <h3 id="sec2.1"> VGGSfM: Visual Geometry Grounded Deep Structure from Motion </h
                             which relies on a sequential, non-differentiable process, VGGSfM employs an end-to-end differentiable pipeline. 
                         </p>
                         <figure>
-                            <img src="assets/vgg.png" alt="vggsfm overview" width="100%">
+                            <img src="assets/vgg.jpg" alt="vggsfm overview" width="100%">
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 3.</strong> Overview of VGGSfM</figcaption>
                         </figure>
                         <p>
@@ -210,7 +210,7 @@ <h3 id="sec2.2"> MASt3R: Grounding Image Matching in 3D with MASt3R </h3>
                             architecture by employing a shared Vision Transformer (ViT) encoder and cross-attention decoders to capture spatial relationships and 3D geometry between image pairs. 
                         </p>
                         <figure>
-                            <img src="assets/mast3r.png" alt="mast3r overview" width="100%" onclick="window.open(this.src)">
+                            <img src="assets/mast3r.jpg" alt="mast3r overview" width="100%" onclick="window.open(this.src)">
                             <figcaption style="text-align: center; font-size: 15px;">
                                 <strong>Figure 4.</strong> Overview of MASt3R. <br/> Compared to the DUSt3R
                                 framework, MASt3R's contributions are highlighted in <span style="color:blue">blue</span>.
@@ -237,16 +237,16 @@ <h3 id="sec3.1"> PointCloud Reconstruction</h3>
                                 <th>MASt3R</th>
                             </tr>
                             <tr>
-                                <td><img class="img-fluid" src="assets/NLE_vggsfm.png" alt="NLE vggsfm"></td>
-                                <td><img class="img-fluid" src="assets/NLE_mast3r.png" alt="NLE mast3r"></td>
+                                <td><img class="img-fluid" src="assets/NLE_vggsfm.jpg" alt="NLE vggsfm"></td>
+                                <td><img class="img-fluid" src="assets/NLE_mast3r.jpg" alt="NLE mast3r"></td>
                             </tr>
                             <tr>
-                                <td><img class="img-fluid" src="assets/pen_sparse_vggsfm.PNG" alt="pen vggsfm"></td>
-                                <td><img class="img-fluid" src="assets/pen_sparse_mast3r.PNG" alt="pen mast3r"></td>
+                                <td><img class="img-fluid" src="assets/pen_sparse_vggsfm.jpg" alt="pen vggsfm"></td>
+                                <td><img class="img-fluid" src="assets/pen_sparse_mast3r.jpg" alt="pen mast3r"></td>
                             </tr>
                             <tr>
-                                <td><img class="img-fluid" src="assets/guitar_vggsfm.PNG" alt="guitar vggsfm"></td>
-                                <td><img class="img-fluid" src="assets/guitar_mast3r.PNG" alt="guitar mast3r"></td>
+                                <td><img class="img-fluid" src="assets/guitar_vggsfm.jpg" alt="guitar vggsfm"></td>
+                                <td><img class="img-fluid" src="assets/guitar_mast3r.jpg" alt="guitar mast3r"></td>
                             </tr>
                         </table>
                         <br/>

diff --git a/blogs/posts/240805_gs/assets/360img.jpg b/blogs/posts/240805_gs/assets/360img.jpg
diff --git a/blogs/posts/240805_gs/assets/360ptc.jpg b/blogs/posts/240805_gs/assets/360ptc.jpg
diff --git a/blogs/posts/240805_gs/assets/conic.jpg b/blogs/posts/240805_gs/assets/conic.jpg
diff --git a/blogs/posts/240805_gs/assets/culling.jpg b/blogs/posts/240805_gs/assets/culling.jpg
diff --git a/blogs/posts/240805_gs/assets/gs.jpg b/blogs/posts/240805_gs/assets/gs.jpg
diff --git a/blogs/posts/240805_gs/assets/nerf_vs_gs.jpg b/blogs/posts/240805_gs/assets/nerf_vs_gs.jpg
diff --git a/blogs/posts/240805_gs/assets/pinhole.jpg b/blogs/posts/240805_gs/assets/pinhole.jpg
diff --git a/blogs/posts/240805_gs/assets/presort.jpg b/blogs/posts/240805_gs/assets/presort.jpg
diff --git a/blogs/posts/240805_gs/assets/rasterization.jpg b/blogs/posts/240805_gs/assets/rasterization.jpg
diff --git a/blogs/posts/240805_gs/assets/splatting.jpg b/blogs/posts/240805_gs/assets/splatting.jpg
diff --git a/blogs/posts/240805_gs/index.html b/blogs/posts/240805_gs/index.html
@@ -161,7 +161,7 @@ <h2 id="intro">Introduction</h2>
                         <h2 id="sec1">1. 3D Gaussian as Primitive Kernel</h2>
                         <br/>
                         <figure>
-                            <img src="assets/gs.png" alt="3D Gaussian as Primitive Kernel" width="100%">
+                            <img src="assets/gs.jpg" alt="3D Gaussian as Primitive Kernel" width="100%">
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 2.</strong> NeRF vs 3D GS, source: <span style="text-decoration: underline;"><a href="https://towardsdatascience.com/a-comprehensive-overview-of-gaussian-splatting-e7d570081362">Kate's medium</a></span></figcaption>
                         </figure>
                         <p class="lang eng">
@@ -360,7 +360,7 @@ <h2 id="sec2">2. Splatting (Projection of Primitives)</h2>
                         <br/>
                         <h3 id="sec2.1">2.1. Projection</h3>
                         <figure>
-                            <img src="assets/splatting.png" alt="Splatting of primitives" style="width:55%">
+                            <img src="assets/splatting.jpg" alt="Splatting of primitives" style="width:55%">
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 3.</strong> Projection of 3D Gaussian, <br/> source: <span style="text-decoration: underline;"><a href="https://dl.acm.org/doi/10.1145/3355089.3356513"><em>Differentiable Surface Splatting for Point-based Geometry Processing </em></a></span> </figcaption>
                         </figure> 
 
@@ -444,7 +444,7 @@ <h3 id="sec2.1">2.1. Projection</h3>
                                 <p> 
                                     the image space pixel $(u,v)$ in a pinhole camera model,
                                     <figure>
-                                        <img src="assets/pinhole.png" width="60%" height="50%">
+                                        <img src="assets/pinhole.jpg" width="60%" height="50%">
                                         <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 4.</strong> Pinhole camera model, by Fusion of Imaging and Inertial Sensors for Navigation</figcaption>
                                     </figure>
                                 </p>
@@ -614,7 +614,7 @@ <h3 id="sec2.2">2.2. Density of the Projected Gaussian </h3>
                                 <p class="lang kor" style="display: none;">
                                     또한 cov 의 inverse 를 conic 이라고 명명하고 있는데, 이는 아마 ellipsoid 등이 <a href="https://en.wikipedia.org/wiki/Conic_section">conic section</a> 으로 정의되기 때문인 것 같다.
                                 </p>
-                                <img src="assets/conic.png" width="60%">
+                                <img src="assets/conic.jpg" width="60%">
                             </li>
                         </ul>
                         <br/>
@@ -699,7 +699,7 @@ <h2 id="sec3">3. Parallel Rasterization </h2>
                         </div>
 
                         <figure>
-                            <img src="assets/rasterization.png" width="100%">
+                            <img src="assets/rasterization.jpg" width="100%">
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 5.</strong> An illustration of the forward process of 3D GS, <br/> source: <span style="text-decoration: underline;"><a href="https://arxiv.org/abs/2401.03890"><em>A Survey on 3D Gaussian Splatting </em></a></span> </figcaption>
                         </figure>
 
@@ -725,7 +725,7 @@ <h2 id="sec3">3. Parallel Rasterization </h2>
                                 <p class="lang kor" style="display: none;">
                                     Frustum culling 으로 valid gaussian 만 남긴다. (See fig.)
                                 </p>
-                                <img src="assets/culling.png" width="50%" height="40%" alt="Frustum Culling">
+                                <img src="assets/culling.jpg" width="50%" height="40%" alt="Frustum Culling">
                             </li>
                             <br/>
                             <li>
@@ -778,7 +778,7 @@ <h2 id="sec3">3. Parallel Rasterization </h2>
                                     </li>
                                 </ul>
                                 <figure>
-                                    <img class="img-fluid" src="assets/presort.png" width="70%" height="60%" alt="Gaussian Accumulation">
+                                    <img class="img-fluid" src="assets/presort.jpg" width="70%" height="60%" alt="Gaussian Accumulation">
                                     <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 6.</strong>  An illustration of the tile based parallel rendering, <br/> source: <span style="text-decoration: underline;"><a href="https://arxiv.org/abs/2401.03890"><em>A Survey on 3D Gaussian Splatting </em></a></span> </figcaption>
                                 </figure>
                             </li>
@@ -838,7 +838,7 @@ <h2 id="sec3">3. Parallel Rasterization </h2>
                             </li>
                         </ul>
                         <figure>
-                            <img class="img-fluid" src="assets/nerf_vs_gs.png" width="70%">
+                            <img class="img-fluid" src="assets/nerf_vs_gs.jpg" width="70%">
                             <figcaption style="text-align: center; font-size: 15px;"><strong>Figure 7.</strong> NeRF vs 3D GS, source: <span style="text-decoration: underline;"><a href="https://arxiv.org/abs/2401.03890"><em>A Survey on 3D Gaussian Splatting </em></a></span> </figcaption>
                         </figure>
                         <p class="lang eng">
@@ -892,8 +892,8 @@ <h3 id="sec4.1"> 4.1. Camera Model </h3>
                                 <th> Rasterization </th>
                             </tr>
                             <tr>
-                                <td><img src="assets/360img.png" alt="360 image" width="100%"></td>
-                                <td><img src="assets/360ptc.png" alt="360 ptc" width="100%"></td>
+                                <td><img src="assets/360img.jpg" alt="360 image" width="100%"></td>
+                                <td><img src="assets/360ptc.jpg" alt="360 ptc" width="100%"></td>
                             </tr>
                         </table>
                         <div class="lang eng">

diff --git a/blogs/posts/240823_grt/assets/cam_model.jpg b/blogs/posts/240823_grt/assets/cam_model.jpg
diff --git a/blogs/posts/240823_grt/assets/cap.jpg b/blogs/posts/240823_grt/assets/cap.jpg
diff --git a/blogs/posts/240823_grt/assets/fig1.jpg b/blogs/posts/240823_grt/assets/fig1.jpg
diff --git a/blogs/posts/240823_grt/assets/fig10.jpg b/blogs/posts/240823_grt/assets/fig10.jpg
diff --git a/blogs/posts/240823_grt/assets/fig11.jpg b/blogs/posts/240823_grt/assets/fig11.jpg
diff --git a/blogs/posts/240823_grt/assets/fig2.jpg b/blogs/posts/240823_grt/assets/fig2.jpg
diff --git a/blogs/posts/240823_grt/assets/fig3.jpg b/blogs/posts/240823_grt/assets/fig3.jpg
diff --git a/blogs/posts/240823_grt/assets/fig4.jpg b/blogs/posts/240823_grt/assets/fig4.jpg
diff --git a/blogs/posts/240823_grt/assets/fig5.jpg b/blogs/posts/240823_grt/assets/fig5.jpg
diff --git a/blogs/posts/240823_grt/assets/fig6.jpg b/blogs/posts/240823_grt/assets/fig6.jpg
diff --git a/blogs/posts/240823_grt/assets/fig7.jpg b/blogs/posts/240823_grt/assets/fig7.jpg
diff --git a/blogs/posts/240823_grt/assets/fig8.jpg b/blogs/posts/240823_grt/assets/fig8.jpg
diff --git a/blogs/posts/240823_grt/assets/fig9.jpg b/blogs/posts/240823_grt/assets/fig9.jpg
diff --git a/blogs/posts/240823_grt/assets/inter.jpg b/blogs/posts/240823_grt/assets/inter.jpg
diff --git a/blogs/posts/240823_grt/assets/kernel_qual.jpg b/blogs/posts/240823_grt/assets/kernel_qual.jpg
diff --git a/blogs/posts/240823_grt/assets/ray_hit.jpg b/blogs/posts/240823_grt/assets/ray_hit.jpg
diff --git a/blogs/posts/240823_grt/assets/ref.jpg b/blogs/posts/240823_grt/assets/ref.jpg
diff --git a/png2jpg.py b/png2jpg.py
@@ -0,0 +1,20 @@
+from glob import glob
+import os
+from PIL import Image
+
+images = sorted(glob('blogs/posts/230202_ngp/assets/*'))
+for img in images:
+    if 'png' in img:
+        pil = Image.open(img)
+
+        # print(pil.mode)
+        if pil.mode == 'P':  # P 모드 처리
+            pil = pil.convert('RGBA')
+        if pil.mode == 'RGBA':
+            # 흰색 배경으로 새 이미지 생성
+            background = Image.new('RGB', pil.size, (255, 255, 255))
+            background.paste(pil, mask=pil.split()[3])  # 알파 채널을 마스크로 사용
+            jpg = background
+        else:
+            jpg = pil.convert('RGB')
+        jpg.save(img.replace('png', 'jpg'))
diff --git a/projects/adv/assets/NumF.jpg b/projects/adv/assets/NumF.jpg
diff --git a/projects/adv/assets/image.jpg b/projects/adv/assets/image.jpg
diff --git a/projects/adv/main_figure.jpg b/projects/adv/main_figure.jpg
diff --git a/projects/few_nerf/assets/main.jpg b/projects/few_nerf/assets/main.jpg
diff --git a/projects/few_nerf/assets/qual.jpg b/projects/few_nerf/assets/qual.jpg
diff --git a/projects/few_nerf/assets/qual2.jpg b/projects/few_nerf/assets/qual2.jpg
diff --git a/projects/hoi/assets/abl.jpg b/projects/hoi/assets/abl.jpg
diff --git a/projects/hoi/assets/cpc.jpg b/projects/hoi/assets/cpc.jpg
diff --git a/projects/hoi/assets/table.jpg b/projects/hoi/assets/table.jpg
diff --git a/projects/hoi/fig2_dot.jpg b/projects/hoi/fig2_dot.jpg