fix: style imageBox and hide minibox in mobile

_posts/2024-07-25-per-pixel-adaptive-sampling.md

@@ -9,6 +9,17 @@ categories: hiprt-path-tracer
 related_posts: false
 ---
 
+<!--
+	Scripts for the ImageBox
+-->
+<link rel="stylesheet" href="/assets/css/ImageBox/ImageBox.css">
+<script src="/assets/js/ImageBox/ImageBox.js"></script>
+<script src="/assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/data.js"></script>
+
+<!--
+	Scripts for the ImageBox
+-->
+
 Adaptive sampling is a technique that allows focusing the samples on pixels that need more of them. This is useful because not all parts of a scene are equally complex to render.
 
 Consider this modified cornell box for example:
@@ -117,4 +128,17 @@ This is however a poor solution since this forces all pixels of the image to be
 
 A better way of estimating the error of the scene is presented in the "Hierarchical Adaptive Sampling" section.
 
-Nonetheless, this naive way of estimating the error of a pixel can provide very appreciable speedups in rendering time. Benchmarks to come.
+Nonetheless, this naive way of estimating the error of a pixel can provide very appreciable speedups in rendering time. 
+
+<div class="content row-md-10" id="ImageBoxContent"></div>
+<script>
+	content = document.getElementById("ImageBoxContent");
+
+	if (data['imageBoxes'])
+		new ImageBox(content, data['imageBoxes'], "PerPixelAdaptiveSampling", 1280, 720 );
+
+
+	// if (data['stats'])
+		//new ChartBox(content, data['stats']);
+		//new TableBox(content, data['stats']);
+</script>

_projects/hiprt-path-tracer.md

@@ -2,7 +2,7 @@
 layout: page
 title: HIPRT-Path-Tracer
 description: HIPRT & Orochi Monte Carlo Path Tracer
-img: assets/img/hiprt-path-tracer.jpg
+img: assets/img/HIPRT-Path-Tracer/hiprt-path-tracer.jpg
 importance: 1
 category: Free Time
 related_publications: false
@@ -70,11 +70,13 @@ The Orochi library allows the loading of HIP and CUDA libraries at runtime meani
 <h2 id="features">Gallery</h2>
 
 <swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
-  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/hippt-mclaren.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
-  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/hippt-contemporary-bedroom.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
-  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/hippt-blender-4.1-splash.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
-  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/hippt-dragon-glass.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
-  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/hippt-dragon-indirect.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/mclaren.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/contemporary-bedroom.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/blender-4.1-splash.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/dragon-glass.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/bzd-measure-seven.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/suzanne-caustics.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
+  <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/HIPRT-Path-Tracer/dragon-indirect.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
 </swiper-container>
 
 <hr/>

assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/data.js

@@ -0,0 +1,34 @@
+var data = {
+    "imageBoxes": [    
+        {
+            "title": "Real-Time (Equal Time, ≈35 ms)",
+            "elements": [
+                {
+                    "title": "Real-Time Rendering",
+                    "elements": [
+                        {
+                            "image": "/assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/square1x.jpg",
+                            "title": "Path Tracing (direct+indirect)"
+                        },
+                        {
+                            "image": "/assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/square1x.jpg",
+                            "title": "Path Tracing + ReSTIR DI"
+                        },
+                        {
+                            "image": "/assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/square1x.jpg",
+                            "title": "ReSTIR PT (Reconnection) + ReSTIR DI"
+                        },
+                        {
+                            "image": "/assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/square0.5x.jpg",
+                            "title": "ReSTIR PT (Hybrid) + ReSTIR DI"
+                        },
+                        {
+                            "image": "/assets/blogs-assets/Per-Pixel-Adaptive-Sampling/ImageBox/square1x.jpg",
+                            "title": "Reference (direct+indirect)"
+                        },                        
+                    ]
+                }
+            ]
+        }, 
+    ]
+}

assets/css/ImageBox/ImageBox.css

@@ -0,0 +1,231 @@
+h1.title {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: normal;
+    font-size: 40px;
+    text-align: left;
+    margin-bottom: 10px;
+}
+
+div.content {
+    margin: 0 auto;
+    margin-top: 40px;
+    max-width: 1920px;
+}
+
+div.help {
+    font-family: 'Open Sans', sans-serif;
+    margin-bottom: 40px;
+}
+
+div.copyright {
+    font-family: 'Open Sans', sans-serif;
+    margin-bottom: 40px;
+    text-align: right;
+}
+
+div.image-box {
+    /* padding-bottom: 40px; */
+}
+
+img{
+    border: 0px solid black;
+}
+
+img.image-display {
+    display: block;
+    height: auto;
+    line-height: 0;
+    margin-top: 0;
+    /*margin-left: auto;*/
+    /*margin-right: auto;*/
+    background: #222;    
+}
+
+img.inset {
+    border: 0px solid #000;
+    background-color: #222;
+    margin: 0px;
+    padding: 0px;
+}
+
+.pixelated {
+    image-rendering:optimizeSpeed;             /* Legal fallback */
+    image-rendering:-moz-crisp-edges;          /* Firefox        */
+    image-rendering:-o-crisp-edges;            /* Opera          */
+    image-rendering:-webkit-optimize-contrast; /* Safari         */
+    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
+    image-rendering:pixelated;                 /* CSS4 Proposed  */
+    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
+}
+
+table.insets {
+    border: 0px solid #000;
+    border-spacing: 0;
+    margin: 0px;
+    padding: 0px;
+    background-color: #333;
+}
+
+td.insets {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 21px;
+    color: #AAA;
+    font-weight: normal;
+    border: 0px solid #000;
+    margin: 0px;
+    padding: 0px;
+    text-align: center;
+    vertical-align: bottom;
+}
+
+tr.insets {
+    border: 0px solid #000;
+    margin: 0px;
+    padding: 0px;
+}
+
+.selector {
+    padding: 8px 15px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 22px;
+    font-weight: normal;
+    line-height: 1.4;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+}
+/*.selector-primary {
+    color: #fff;
+    background-color: #BDC3C7;
+}
+.selector-primary.active {
+    color: #fff;
+    background-color: #7F8C8D;
+}
+.selector-group>.selector {
+    position: relative;
+}*/
+.selector-primary {
+    color: #AAA;
+    background-color: #333;
+}
+.selector-primary.active {
+    color: #FFF;
+    background-color: #1F8DD6;
+}
+
+.selector-group {
+    padding: 0px;
+    background-color: #333;
+}
+
+.selector-group>.selector {
+    position: relative;
+}
+
+/*.selector-group>.selector:first-child {
+    margin-left: 0;
+}
+.selector-group>.selector:first-child:not(:last-child) {
+    border-top-right-radius: 0;
+}
+.selector-group>.selector:last-child:not(:first-child) {
+    border-top-left-radius: 0;
+}
+.selector-group>.selector:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    border-radius: 0;
+}
+*/
+
+table.stats {
+    border-collapse: separate;
+    border-spacing: 0;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: normal;
+    margin-left: auto; 
+    margin-right: auto;
+    min-width: 1920px;
+    padding-bottom: 20px;
+}
+
+caption.stats {
+    text-align: left;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 16px;
+    font-weight: normal;
+}
+
+thead.stats {
+    background-color: #f5f5f5;
+    color: #000;
+    text-align: center;
+}
+
+th.stats {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: normal;
+    padding: 0.5em 1em;
+    border-top: 1px solid #CCC;
+}
+
+th.stats:first-child { border-left: 1px solid #CCC; border-top-left-radius: 5px; }
+th.stats:last-child { border-right: 1px solid #CCC; border-top-right-radius: 5px; }
+td.stats:last-child { border-right: 1px solid #CCC; }
+tr.stats:last-child>td { border-bottom: 1px solid #CCC; }
+tr.stats:last-child>td:first-child { border-bottom-left-radius: 5px; }
+tr.stats:last-child>td:last-child  { border-bottom-right-radius: 5px; }
+
+td.stats {
+    text-align: right;
+    padding: 0.5em 1em;
+    border-left: 1px solid #CCC;
+    border-width: 0 0 0 1px;
+}
+
+.image-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.image-container table {
+    margin-bottom: 50px;
+}
+
+.image-container img {
+    aspect-ratio: 16/9;
+}
+
+@media screen and (min-width: 1600px) {
+    .image-container img {
+        width: 60%;
+    }
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1599px) {
+    .image-container img {
+        width: 80%;
+    }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1199px) {
+    .image-container img {
+        width: 85%;
+    }
+}
+
+@media screen and (min-width: 768px) and (max-width: 991px) {
+    .image-container img {
+        width: 90%;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    .image-container img {
+        width: 100%;
+    }
+}