Add render mode controls

jverneaut · Sep 24, 2024 · 9517bea · 9517bea
1 parent b12a899
commit 9517bea
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 8 deletions.
diff --git a/src/autostereogram/components/Stereogram.js b/src/autostereogram/components/Stereogram.js
@@ -1,4 +1,4 @@
-import React, { Suspense, useRef } from 'react';
+import React, { Suspense, useState, useRef } from 'react';
 import { Canvas, useThree } from '@react-three/fiber';
 import { useTexture } from '@react-three/drei';
 import { ShaderMaterial, RepeatWrapping, NearestFilter } from 'three';
@@ -14,6 +14,8 @@ const StereogramScene = ({
   slices,
   depth,
   zoom,
+  showDisplacement,
+  showDepthMap,
 }) => {
   const backgroundTexture = useTexture(backgroundImage.src);
   backgroundTexture.wrapS = RepeatWrapping;
@@ -42,6 +44,8 @@ const StereogramScene = ({
       },
       uDepth: { value: depth },
       uZoom: { value: zoom },
+      uShowDisplacement: { value: showDisplacement },
+      uShowDepthMap: { value: showDepthMap },
     },
     vertexShader: vertexShaderSource,
     fragmentShader: fragmentShaderSource,
@@ -63,6 +67,9 @@ const Stereogram = ({
 }) => {
   const canvasRef = useRef();
 
+  const [showDisplacement, setShowDisplacement] = useState(false);
+  const [showDepthMap, setShowDepthMap] = useState(false);
+
   return (
     <div className="stereogram">
       <Canvas
@@ -84,6 +91,8 @@ const Stereogram = ({
             slices={slices}
             depth={depth}
             zoom={zoom}
+            showDisplacement={showDisplacement}
+            showDepthMap={showDepthMap}
           />
         </Suspense>
       </Canvas>
@@ -96,6 +105,53 @@ const Stereogram = ({
         >
           <img src={fullScreenIcon} alt="" />
         </div>
+
+        <div className="render-mode">
+          <div className="render-mode__list">
+            <button
+              onClick={() => {
+                setShowDepthMap(false);
+                setShowDisplacement(false);
+              }}
+              className={[
+                'render-mode__item',
+                !showDepthMap && !showDisplacement
+                  ? 'render-mode__item--active'
+                  : null,
+              ].join(' ')}
+            >
+              Autostereogram
+            </button>
+            <button
+              onClick={() => {
+                setShowDepthMap(true);
+                setShowDisplacement(false);
+              }}
+              className={[
+                'render-mode__item',
+                showDepthMap && !showDisplacement
+                  ? 'render-mode__item--active'
+                  : null,
+              ].join(' ')}
+            >
+              Depth map
+            </button>
+            <button
+              onClick={() => {
+                setShowDepthMap(false);
+                setShowDisplacement(true);
+              }}
+              className={[
+                'render-mode__item',
+                !showDepthMap && showDisplacement
+                  ? 'render-mode__item--active'
+                  : null,
+              ].join(' ')}
+            >
+              Displacement
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/autostereogram/main.scss b/src/autostereogram/main.scss
@@ -64,7 +64,12 @@ html {
   height: 100%;
   top: 0;
   left: 50%;
-  transform: translate(-50%, 0);
+  transform: scaleY(1.01) translate(-50%, 0);
+  transition: 0.16s transform;
+
+  &:hover {
+    transform: translate(-50%, 0);
+  }
 }
 
 .fullscreen-button {
@@ -78,12 +83,13 @@ html {
   align-items: center;
   justify-content: center;
   z-index: 20;
-  width: 46px;
-  height: 46px;
+  width: 40px;
+  height: 40px;
   top: 12px;
   right: 12px;
   border-radius: 8px;
   box-sizing: content-box;
+  pointer-events: none;
 
   transition: 0.16s opacity;
   border: 1px solid #ccc;
@@ -108,8 +114,8 @@ html {
 }
 
 .overlay:hover .fullscreen-button {
-  transition: none;
   opacity: 1;
+  pointer-events: all;
 }
 
 .controls {
@@ -604,3 +610,49 @@ button {
 .gallery__item-title {
   font-size: 16px;
 }
+
+.render-mode {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  background: white;
+
+  border: 1px solid #ccc;
+  box-shadow: 0px 1px 2px rgba(black, 0.06), 0px 4px 12px rgba(black, 0.04);
+  border-radius: 8px;
+  padding: 2px;
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.16s opacity;
+}
+
+.render-mode__list {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.render-mode__item {
+  padding: 6px 8px;
+  background: none;
+  -webkit-appearance: none;
+  border: none;
+  font-size: 12px;
+  border-radius: 6px;
+  line-height: 1;
+  cursor: pointer;
+
+  &--active {
+    background: #111 !important;
+    color: white;
+  }
+
+  &:hover {
+    background: #f3f3f3;
+  }
+}
+
+.overlay:hover .render-mode {
+  opacity: 1;
+  pointer-events: all;
+}
diff --git a/src/autostereogram/shaders/fragment.glsl b/src/autostereogram/shaders/fragment.glsl
@@ -11,6 +11,9 @@ uniform int uSlices;
 uniform int uDepth;
 uniform float uZoom;
 
+uniform bool uShowDisplacement;
+uniform bool uShowDepthMap;
+
 vec4 depthMapAtCoordinates(vec2 coordinates) {
   float x = coordinates.x - 0.5 / float(uSlices);
   float y = coordinates.y;
@@ -40,15 +43,26 @@ vec4 depthMapAtCoordinates(vec2 coordinates) {
 void main() {
   vec2 uv = vUv;
 
+  float depthAccumulator = 0.0;
   for (int i = 0; i < uSlices; i++) {
     float x = uv.x - float(i) * 1.0 / float(uSlices);
     float depth = depthMapAtCoordinates(vec2(x, uv.y)).r;
+    depthAccumulator += depth;
 
     uv.x += depth * 0.001 * float(uDepth);
   }
 
-  float x = uv.x * float(uSlices);
-  float y = uv.y * float(uSlices) * uResolution.y / uResolution.x * uBackgroundAspectRatio;
+  if (uShowDisplacement) {
+    float x = uv.x;
+    float y = uv.y * uResolution.y / uResolution.x * uBackgroundAspectRatio;
+
+    gl_FragColor = vec4(vec3(depthAccumulator) / float(uSlices), 1.0);
+  } else if (uShowDepthMap) {
+    gl_FragColor = depthMapAtCoordinates(vUv + vec2(0.5 / float(uSlices), 0.0));
+  } else {
+    float x = uv.x * float(uSlices);
+    float y = uv.y * float(uSlices) * uResolution.y / uResolution.x * uBackgroundAspectRatio;
 
-  gl_FragColor = texture2D(tBackground, vec2(x, y));
+    gl_FragColor = texture2D(tBackground, vec2(x, y));
+  }
 }