update

shi-yan · Jul 31, 2024 · 5ce9ef0 · 5ce9ef0
1 parent e573a08
commit 5ce9ef0
Show file tree

Hide file tree

Showing 48 changed files with 941 additions and 565 deletions.
diff --git a/2D_Techniques/billboarding.html b/2D_Techniques/billboarding.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -216,6 +204,26 @@ <h2 >2.5 Billboarding</h2><p>We will look at a technique called billboarding thi
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/2D_Techniques/implementing_fake_3d.html b/2D_Techniques/implementing_fake_3d.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -232,6 +220,26 @@ <h2 >2.6 Implementing Fake 3D</h2><p>in this example, we will look at a fake 3d
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/2D_Techniques/implementing_gaussian_blur.html b/2D_Techniques/implementing_gaussian_blur.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -355,6 +343,26 @@ <h2 >2.2 Implementing Gaussian Blur</h2><p>2D image processing is a great use ca
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/2D_Techniques/orthogonal_cameras.html b/2D_Techniques/orthogonal_cameras.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -210,6 +198,26 @@ <h2 >2.1 Orthogonal Cameras</h2><p>In this section, we'll discuss orthogonal cam
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/2D_Techniques/rendering_to_textures.html b/2D_Techniques/rendering_to_textures.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -325,6 +313,26 @@ <h2 >2.0 Rendering to Textures</h2><p>In this section, we'll explore the "render
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/2D_Techniques/text_rendering.html b/2D_Techniques/text_rendering.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -256,6 +244,26 @@ <h2 >2.4 Text Rendering</h2><p>You might be surprised to discover that text rend
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/2D_Techniques/video_rendering.html b/2D_Techniques/video_rendering.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -300,6 +288,26 @@ <h2 >2.3 Video Rendering</h2><p>We have seen how to load and render images as te
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");

diff --git a/Advanced/equirectangular_rendering.html b/Advanced/equirectangular_rendering.html
@@ -43,18 +43,6 @@
     <link href="
         https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
         " rel="stylesheet" />
-
-    <script>
-        function fold(e) {
-            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
-            console.log("sub", e.currentTarget, sub);
-            if (sub.style.display === "block") {
-                sub.style.display = "none";
-            } else {
-                sub.style.display = "block";
-            }
-        }
-    </script>
 </head>
 
 <body>
@@ -268,6 +256,26 @@ <h2 >5.3 Equirectangular Rendering</h2><p>Equirectangular rendering is a useful
         <div id="caption"></div>
     </div>
     <script>
+        function fold(e) {
+            const sub = e.currentTarget.parentElement.getElementsByTagName("ul")[0];
+            console.log("sub", e.currentTarget, sub);
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            } else {
+                sub.style.display = "block";
+            }
+        }
+
+        window.addEventListener('click', (e) => {
+            if (sub.style.display === "block") {
+                sub.style.display = "none";
+            }
+        });
+
+        document.getElementById("menu-container").addEventListener('click',(event) => {
+            event.stopPropagation();
+        });
+
         function openImage(img) {
             let modal = document.getElementById("img-modal");
             let modalImg = document.getElementById("img01");