Duplicate from temp-org/ldm3d-gradio

Co-authored-by: Radamés Ajna <[email protected]>

.gitattributes

@@ -0,0 +1,37 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,5 @@
+gradio_cached_examples
+tmp
+venv
+__pycache__
+*.py[cod]

README.md

@@ -0,0 +1,11 @@
+---
+title: LDM3D Gradio Three.js
+emoji: 🔵🔴🟢🧊
+sdk: gradio
+sdk_version: 3.35.2
+app_file: app.py
+pinned: false
+duplicated_from: temp-org/ldm3d-gradio
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,113 @@
+from diffusers import StableDiffusionLDM3DPipeline
+import gradio as gr
+import torch
+from PIL import Image
+import base64
+from io import BytesIO
+from tempfile import NamedTemporaryFile
+from pathlib import Path
+
+Path("tmp").mkdir(exist_ok=True)
+
+device = "cuda" if torch.cuda.is_available() else "cpu"
+pipe = StableDiffusionLDM3DPipeline.from_pretrained(
+    "Intel/ldm3d-4c",
+    torch_dtype=torch.float16
+    # , safety_checker=None
+)
+pipe.to(device)
+pipe.enable_xformers_memory_efficient_attention()
+pipe.enable_model_cpu_offload()
+
+
+def get_iframe(rgb_path: str, depth_path: str, viewer_mode: str = "6DOF"):
+    # buffered = BytesIO()
+    # rgb.convert("RGB").save(buffered, format="JPEG")
+    # rgb_base64 = base64.b64encode(buffered.getvalue())
+    # buffered = BytesIO()
+    # depth.convert("RGB").save(buffered, format="JPEG")
+    # depth_base64 = base64.b64encode(buffered.getvalue())
+
+    # rgb_base64 = "data:image/jpeg;base64," + rgb_base64.decode("utf-8")
+    # depth_base64 = "data:image/jpeg;base64," + depth_base64.decode("utf-8")
+    rgb_base64 = f"/file={rgb_path}"
+    depth_base64 = f"/file={depth_path}"
+    if viewer_mode == "6DOF":
+        return f"""<iframe src="file=static/three6dof.html" width="100%" height="500px" data-rgb="{rgb_base64}" data-depth="{depth_base64}"></iframe>"""
+    else:
+        return f"""<iframe src="file=static/depthmap.html" width="100%" height="500px" data-rgb="{rgb_base64}" data-depth="{depth_base64}"></iframe>"""
+
+
+def predict(
+    prompt: str,
+    negative_prompt: str,
+    guidance_scale: float = 5.0,
+    seed: int = 0,
+    randomize_seed: bool = True,
+):
+    generator = torch.Generator() if randomize_seed else torch.manual_seed(seed)
+    output = pipe(
+        prompt,
+        width=1024,
+        height=512,
+        negative_prompt=negative_prompt,
+        guidance_scale=guidance_scale,
+        generator=generator,
+        num_inference_steps=40,
+    )  # type: ignore
+    rgb_image, depth_image = output.rgb[0], output.depth[0]  # type: ignore
+    with NamedTemporaryFile(suffix=".png", delete=False, dir="tmp") as rgb_file:
+        rgb_image.save(rgb_file.name)
+        rgb_image = rgb_file.name
+    with NamedTemporaryFile(suffix=".png",  delete=False,  dir="tmp") as depth_file:
+        depth_image.save(depth_file.name)
+        depth_image = depth_file.name
+
+    iframe = get_iframe(rgb_image, depth_image)
+    return rgb_image, depth_image, generator.seed(), iframe
+
+
+with gr.Blocks() as block:
+    gr.Markdown(
+        """
+## LDM3d Demo 
+
+model: https://huggingface.co/Intel/ldm3d<br>
+[Diffusers docs](https://huggingface.co/docs/diffusers/main/en/api/pipelines/stable_diffusion/ldm3d_diffusion)
+
+"""
+    )
+    with gr.Row():
+        with gr.Column(scale=1):
+            prompt = gr.Textbox(label="Prompt")
+            negative_prompt = gr.Textbox(label="Negative Prompt")
+            guidance_scale = gr.Slider(
+                label="Guidance Scale", minimum=0, maximum=10, step=0.1, value=5.0
+            )
+            randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
+            seed = gr.Slider(label="Seed", minimum=0,
+                             maximum=2**64 - 1, step=1)
+            generated_seed = gr.Number(label="Generated Seed")
+            markdown = gr.Markdown(label="Output Box")
+            with gr.Row():
+                new_btn = gr.Button("New Image")
+        with gr.Column(scale=2):
+            html = gr.HTML()
+            with gr.Row():
+                rgb = gr.Image(label="RGB Image", type="filepath")
+                depth = gr.Image(label="Depth Image", type="filepath")
+    gr.Examples(
+        examples=[
+            ["A picture of some lemons on a table panoramic view", "", 5.0, 0, True]],
+        inputs=[prompt, negative_prompt, guidance_scale, seed, randomize_seed],
+        outputs=[rgb, depth, generated_seed, html],
+        fn=predict,
+        cache_examples=True)
+
+    new_btn.click(
+        fn=predict,
+        inputs=[prompt, negative_prompt, guidance_scale, seed, randomize_seed],
+        outputs=[rgb, depth, generated_seed, html],
+    )
+
+block.launch()

requirements.txt

@@ -0,0 +1,9 @@
+git+https://github.com/huggingface/diffusers@07c9a08e67feb4d05ba22ba6b1a2d39468d68225
+gradio
+transformers
+accelerate
+Pillow
+numpy
+xformers
+# --index-url https://download.pytorch.org/whl/cu118
+torch

static/depthmap.html

@@ -0,0 +1,211 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>depthmap-viewer-three</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      margin: 0;
+    }
+
+    .dropzone {
+      box-sizing: border-box;
+      display: none;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 99999;
+      background: rgba(#60a7dc, .8);
+      border: 11px dashed #60a7dc;
+    }
+  </style>
+  <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+  <script type="importmap">
+{
+"imports": {
+  "three": "https://unpkg.com/[email protected]/build/three.module.js",
+  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+}
+}
+</script>
+  <script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from "three/addons/controls/OrbitControls";
+    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+    var rgbBase64Img = window.frameElement?.getAttribute('data-rgb') || "public/images/rgb.png"
+    var depthBase64Img = window.frameElement?.getAttribute('data-depth') || "public/images/depth.png"
+
+
+
+    let mesh;
+    let material;
+    let stopAnimation = false;
+
+    const settings = {
+      metalness: 0.0,
+      roughness: 0.5,
+      ambientIntensity: 0.85,
+      displacementScale: 100,
+      displacementBias: -0.5,
+    };
+    const meshSettings = {
+      rotation: {
+        x: 0,
+        y: 0,
+        z: 0
+      }
+    }
+
+    // init
+    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.z = 3;
+
+    const scene = new THREE.Scene();
+
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+
+    const pointLight = new THREE.PointLight(0xff0000, 0.5);
+    pointLight.position.z = 2500;
+    scene.add(pointLight);
+
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setAnimationLoop(animation);
+    // renderer.xr.enabled = true;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1;
+    renderer.outputEncoding = THREE.sRGBEncoding;
+    document.body.appendChild(renderer.domElement);
+
+    // animation
+    function animation(time) {
+      if (mesh && !stopAnimation) {
+        mesh.rotation.x = 0.5 * Math.sin(time / 2000);
+        mesh.rotation.y = 0.5 * Math.sin(time / 2000);
+        meshSettings.rotation.x = mesh.rotation.x;
+        meshSettings.rotation.y = mesh.rotation.y;
+      }
+      renderer.render(scene, camera);
+
+    }
+
+    function onWindowResize() {
+
+      const aspect = window.innerWidth / window.innerHeight;
+      camera.aspect = aspect;
+      camera.updateProjectionMatrix();
+
+      renderer.setSize(window.innerWidth, window.innerHeight);
+
+    }
+    window.addEventListener('resize', onWindowResize);
+
+
+    // orbit controls
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableZoom = true;
+    controls.enableDamping = true;
+
+    async function getCanvasTexture(imageSrc) {
+      return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.src = imageSrc;
+        image.onload = () => {
+          const ctx = document.createElement('canvas').getContext('2d');
+          ctx.canvas.width = image.width;
+          ctx.canvas.height = image.height;
+          ctx.drawImage(image, 0, 0, image.width, image.height);
+          const texture = new THREE.CanvasTexture(ctx.canvas);
+          resolve(texture);
+        }
+      })
+
+    }
+    (async () => {
+      const rgbTexture = await getCanvasTexture(rgbBase64Img);
+      const depthTexture = await getCanvasTexture(depthBase64Img);
+
+      if (mesh) {
+        mesh.geometry.dispose();
+        mesh.material.dispose();
+        scene.remove(mesh);
+      }
+      // material
+      material = new THREE.MeshStandardMaterial({
+
+        color: 0xaaaaaa,
+        roughness: settings.roughness,
+        metalness: settings.metalness,
+
+        map: rgbTexture,
+
+        displacementMap: depthTexture,
+        displacementScale: settings.displacementScale,
+        displacementBias: settings.displacementBias,
+
+        side: THREE.DoubleSide
+
+      });
+      // generating geometry and add mesh to scene
+      const geometry = new THREE.PlaneGeometry(rgbTexture.image.width, rgbTexture.image.height, 512, 512);
+      mesh = new THREE.Mesh(geometry, material);
+      const scale = 1 / Math.max(rgbTexture.image.width, rgbTexture.image.height);
+      mesh.scale.set(scale, scale, scale);
+      scene.add(mesh);
+
+    })()
+
+
+
+    // setup gui
+    const gui = new GUI();
+    gui.close();
+    const sceneGUI = gui.addFolder('Scene');
+    sceneGUI.add(settings, 'metalness').min(0).max(1).onChange(function (value) {
+      material.metalness = value;
+    });
+    sceneGUI.add(settings, 'roughness').min(0).max(1).onChange(function (value) {
+      material.roughness = value;
+    });
+    sceneGUI.add(settings, 'ambientIntensity').min(0).max(1).onChange(function (value) {
+      ambientLight.intensity = value;
+    });
+    sceneGUI.add(settings, 'displacementScale').min(0).max(500.0).onChange(function (value) {
+      material.displacementScale = value;
+    });
+    sceneGUI.add(settings, 'displacementBias').min(-500).max(500).onChange(function (value) {
+      material.displacementBias = value;
+    });
+    const meshGUI = gui.addFolder('Mesh');
+    meshGUI.add(meshSettings.rotation, 'x').min(-Math.PI).max(Math.PI).step(0.0001).onChange(function (value) {
+      mesh.rotation.x = value;
+      stopAnimation = true;
+    }).listen()
+
+
+    meshGUI.add(meshSettings.rotation, 'y').min(-Math.PI).max(Math.PI).step(0.0001).onChange(function (value) {
+      mesh.rotation.y = value;
+      stopAnimation = true;
+    }).listen()
+
+
+    meshGUI.add(meshSettings.rotation, 'z').min(-Math.PI).max(Math.PI).step(0.0001).onChange(function (value) {
+      mesh.rotation.z = value;
+      stopAnimation = true;
+    }).listen()
+
+
+  </script>
+</head>
+
+<body>
+</body>
+
+</html>

static/public/js/GUIHelper.js

@@ -0,0 +1,34 @@
+THREE.GUI = {
+    create: (viewer, scene) => {
+        var gui = new dat.GUI();
+
+        // Set some GUI params
+        var shaderParams = gui.addFolder('Shader');
+        shaderParams.add(sixDofViewer, 'displacement', 0, 7).name('Displacement');
+        shaderParams.add(sixDofViewer, 'opacity', 0, 1).name('Opacity');
+        shaderParams.add(sixDofViewer, 'pointSize', 0, 10).name('Point Size');
+        shaderParams.add({ 'debugDepth': false }, 'debugDepth')
+            .name('Debug Depth')
+            .onChange(val => {
+                sixDofViewer.toggleDepthDebug(val);
+            });
+        shaderParams.add({
+            'changeStyle': () => { }
+        }, 'changeStyle', {
+            'Mesh': SixDOF.Style[SixDOF.Style.MESH],
+            'Wireframe': SixDOF.Style[SixDOF.Style.WIRE],
+            'Pointcloud': SixDOF.Style[SixDOF.Style.POINTS]
+        })
+            .name('Rendering Style')
+            .onChange(val => {
+                scene.remove(sixDofViewer);
+                sixDofViewer = new SixDOF.Viewer(colorTexture, depthTexture, {
+                    'style': SixDOF.Style[val]
+                });
+                scene.add(sixDofViewer);
+            });
+
+
+        return gui;
+    }
+}

static/public/js/WebVR.js

@@ -0,0 +1,261 @@
+/**
+ * @author mrdoob / http://mrdoob.com
+ * @author Mugen87 / https://github.com/Mugen87
+ *
+ * Based on @tojiro's vr-samples-utils.js
+ */
+
+THREE.WEBVR = {
+
+	createButton: function ( renderer, options ) {
+
+		if ( options && options.referenceSpaceType ) {
+
+			renderer.vr.setReferenceSpaceType( options.referenceSpaceType );
+
+		}
+
+		function showEnterVR( device ) {
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'ENTER VR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				device.isPresenting ? device.exitPresent() : device.requestPresent( [ { source: renderer.domElement } ] );
+
+			};
+
+			renderer.vr.setDevice( device );
+
+		}
+
+		function showEnterXR( /*device*/ ) {
+
+			var currentSession = null;
+
+			function onSessionStarted( session ) {
+
+				session.addEventListener( 'end', onSessionEnded );
+
+				renderer.vr.setSession( session );
+				button.textContent = 'EXIT XR';
+
+				currentSession = session;
+
+			}
+
+			function onSessionEnded( /*event*/ ) {
+
+				currentSession.removeEventListener( 'end', onSessionEnded );
+
+				renderer.vr.setSession( null );
+				button.textContent = 'ENTER XR';
+
+				currentSession = null;
+
+			}
+
+			//
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'ENTER XR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				if ( currentSession === null ) {
+
+					// WebXR's requestReferenceSpace only works if the corresponding feature
+					// was requested at session creation time. For simplicity, just ask for
+					// the interesting ones as optional features, but be aware that the
+					// requestReferenceSpace call will fail if it turns out to be unavailable.
+					// ('local' is always available for immersive sessions and doesn't need to
+					// be requested separately.)
+
+					var sessionInit = { optionalFeatures: [ 'local-floor', 'bounded-floor' ] };
+					navigator.xr.requestSession( 'immersive-vr', sessionInit ).then( onSessionStarted );
+
+				} else {
+
+					currentSession.end();
+
+				}
+
+			};
+
+		}
+
+		function disableButton() {
+
+			button.style.display = '';
+
+			button.style.cursor = 'auto';
+			button.style.left = 'calc(50% - 75px)';
+			button.style.width = '150px';
+
+			button.onmouseenter = null;
+			button.onmouseleave = null;
+
+			button.onclick = null;
+
+		}
+
+		function showVRNotFound() {
+
+			disableButton();
+
+			button.textContent = 'VR NOT FOUND';
+
+			renderer.vr.setDevice( null );
+
+		}
+
+		function showXRNotFound() {
+
+			disableButton();
+
+			button.textContent = 'XR NOT FOUND';
+
+		}
+
+		function stylizeElement( element ) {
+
+			element.style.position = 'absolute';
+			element.style.bottom = '20px';
+			element.style.padding = '12px 6px';
+			element.style.border = '1px solid #fff';
+			element.style.borderRadius = '4px';
+			element.style.background = 'rgba(0,0,0,0.1)';
+			element.style.color = '#fff';
+			element.style.font = 'normal 13px sans-serif';
+			element.style.textAlign = 'center';
+			element.style.opacity = '0.5';
+			element.style.outline = 'none';
+			element.style.zIndex = '999';
+
+		}
+
+		if ( 'xr' in navigator ) {
+
+			var button = document.createElement( 'button' );
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			navigator.xr.isSessionSupported( 'immersive-vr' ).then( function ( supported ) {
+
+				if ( supported ) {
+
+					showEnterXR();
+
+				} else {
+
+					showXRNotFound();
+
+				}
+
+			} );
+
+			return button;
+
+		} else if ( 'getVRDisplays' in navigator ) {
+
+			var button = document.createElement( 'button' );
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			window.addEventListener( 'vrdisplayconnect', function ( event ) {
+
+				showEnterVR( event.display );
+
+			}, false );
+
+			window.addEventListener( 'vrdisplaydisconnect', function ( /*event*/ ) {
+
+				showVRNotFound();
+
+			}, false );
+
+			window.addEventListener( 'vrdisplaypresentchange', function ( event ) {
+
+				button.textContent = event.display.isPresenting ? 'EXIT VR' : 'ENTER VR';
+
+			}, false );
+
+			window.addEventListener( 'vrdisplayactivate', function ( event ) {
+
+				event.display.requestPresent( [ { source: renderer.domElement } ] );
+
+			}, false );
+
+			navigator.getVRDisplays()
+				.then( function ( displays ) {
+
+					if ( displays.length > 0 ) {
+
+						showEnterVR( displays[ 0 ] );
+
+					} else {
+
+						showVRNotFound();
+
+					}
+
+				} ).catch( showVRNotFound );
+
+			return button;
+
+		} else {
+
+			var message = document.createElement( 'a' );
+			message.href = 'https://webvr.info';
+			message.innerHTML = 'WEBVR NOT SUPPORTED';
+
+			message.style.left = 'calc(50% - 90px)';
+			message.style.width = '180px';
+			message.style.textDecoration = 'none';
+
+			stylizeElement( message );
+
+			return message;
+
+		}
+
+	}
+
+};

static/public/js/three-6dof.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("three")):"function"==typeof define&&define.amd?define(["exports","three"],t):t((e=e||self).SixDOF={},e.THREE)}(this,(function(e,t){"use strict";var r,n,i,o="#define GLSLIFY 1\n\n/** Small util to get the depth texture */\nvec3 getDepth(sampler2D depth, vec2 uvs) {\n\n    /** Return the depth texture */\n    return texture2D(depth, uvs).rgb;\n}\n\n/** Small util to get the lower half of a texture (in our case the depthmap) */\nvec3 getDepthFromBottomHalf(sampler2D tex, vec2 uvs) {\n    \n    /** Chop the uvs to the lower half of the texture (i.e top-bottom) */\n    vec2 lower_half_uvs = vec2(uvs.x, uvs.y * 0.5);\n\n    /** Return the depth texture */\n    return texture2D(tex, lower_half_uvs).rgb;\n}\n\n/** Small util to get the upper half of a texture (in our case the color texture) */\nvec3 getColorFromUpperHalf(sampler2D tex, vec2 uvs) {\n    \n    /** Chop the uvs to the lower half of the texture (i.e top-bottom) */\n    vec2 upper_half_uvs = vec2(uvs.x, (uvs.y * 0.5) + 0.5);\n\n    /** Return the depth texture */\n    return texture2D(tex, upper_half_uvs).rgb;\n}\n\n// Uniforms\nuniform sampler2D colorTexture;\nuniform sampler2D depthTexture;\nuniform float debugDepth;\nuniform float opacity;\n\n// Varyings from vertex program\nvarying vec2 vUv;\n\n// Internal\nvec3 depth;\nvec3 color;\n\nvoid main() {\n\n/** Use compiler definitions to know which method to pick */\n#ifdef TOP_BOTTOM\n    depth = getDepthFromBottomHalf(colorTexture, vUv);\n    color = getColorFromUpperHalf(colorTexture, vUv);\n#endif\n\n#ifdef SEPERATE\n    depth = getDepth(depthTexture, vUv);\n    color = texture2D(colorTexture, vUv).rgb;\n#endif\n\n    // Mix the depth and color based on debugDepth value\n    vec3 depthColorMixer = mix(color, depth , debugDepth);\n\n    // Render dat fragment\n    gl_FragColor = vec4(depthColorMixer, opacity);\n}\n",s="#define GLSLIFY 1\n\n/** Small util to get the depth texture */\nvec3 getDepth(sampler2D depth, vec2 uvs) {\n\n    /** Return the depth texture */\n    return texture2D(depth, uvs).rgb;\n}\n\n/** Small util to get the lower half of a texture (in our case the depthmap) */\nvec3 getDepthFromBottomHalf(sampler2D tex, vec2 uvs) {\n    \n    /** Chop the uvs to the lower half of the texture (i.e top-bottom) */\n    vec2 lower_half_uvs = vec2(uvs.x, uvs.y * 0.5);\n\n    /** Return the depth texture */\n    return texture2D(tex, lower_half_uvs).rgb;\n}\n\n// Uniforms\nuniform sampler2D colorTexture;\nuniform sampler2D depthTexture;\nuniform float pointSize;\nuniform float displacement;\n\n// Varyings passed to fragment\nvarying vec2 vUv;\n\n// Internal\nfloat depth;\n\nvoid main() {\n\n    /** Transform and pass to fragment shader */\n    vUv = uv;\n\n    /** Set the GL point size for when rendering points, ignored otherwise */\n    gl_PointSize = pointSize;\n\n/** Use compiler definitions to know which method to pick */\n#ifdef TOP_BOTTOM\n    depth = getDepthFromBottomHalf(colorTexture, vUv).r;\n#endif\n\n#ifdef SEPERATE\n    depth = getDepth(depthTexture, vUv).r;\n#endif\n\n    /** \n    * Invert the normals (since they are pointing outwards) and \n    * move the position on the normal direction scaled by the \n    * displacement which is the depth for the current vertex\n    * multiplied by a `displacement` scalaer\n    **/\n    float disp = displacement * depth;\n    vec3 offset = position + (-normal) * disp;\n\n    /** Transform */\n    gl_Position = projectionMatrix *\n                    modelViewMatrix *\n                    vec4(offset, 1.0);\n}",a={colorTexture:{type:"t",value:null},depthTexture:{type:"t",value:null},time:{type:"f",value:0},opacity:{type:"f",value:1},pointSize:{type:"f",value:3},debugDepth:{type:"f",value:0},displacement:{type:"f",value:1}};(r=e.MeshDensity||(e.MeshDensity={}))[r.LOW=64]="LOW",r[r.MEDIUM=128]="MEDIUM",r[r.HIGH=256]="HIGH",r[r.EXTRA_HIGH=512]="EXTRA_HIGH",r[r.EPIC=1024]="EPIC",(n=e.Style||(e.Style={}))[n.WIRE=0]="WIRE",n[n.POINTS=1]="POINTS",n[n.MESH=2]="MESH",(i=e.TextureType||(e.TextureType={}))[i.TOP_BOTTOM=0]="TOP_BOTTOM",i[i.SEPERATE=1]="SEPERATE";class u{constructor(){this.type=e.TextureType.SEPERATE,this.density=e.MeshDensity.HIGH,this.style=e.Style.MESH,this.displacement=4,this.radius=6}}class p extends t.Object3D{constructor(r,n,i){super(),this.props=new u,this.material=new t.ShaderMaterial({uniforms:a,vertexShader:s,fragmentShader:o,transparent:!0,side:t.BackSide}),this.setProps(this.props,i),this.setShaderDefines(this.material,[e.TextureType[this.props.type]]),p.geometry||(p.geometry=this.createSphereGeometry(this.props.radius,this.props.density)),this.assignTexture(this.props.type,r,n),this.displacement=this.props.displacement,super.add(this.createMesh(p.geometry,this.material,this.props.style))}setShaderDefines(e,t){t.forEach((function(t){return e.defines[t]=""}))}createSphereGeometry(e,r){return new t.SphereBufferGeometry(e,r,r)}setProps(e,t){if(t)for(var r in t)e[r]?e[r]=t[r]:console.warn("THREE.SixDOF: Provided ".concat(r," in config but it is not a valid property and being ignored"))}assignTexture(t,r,n){if(t===e.TextureType.SEPERATE){if(!n)throw new Error("When using seperate texture type, depthmap must be provided");this.depth=this.setDefaultTextureProps(n)}this.texture=this.setDefaultTextureProps(r)}setDefaultTextureProps(e){return e.minFilter=t.NearestFilter,e.magFilter=t.LinearFilter,e.format=t.RGBFormat,e.generateMipmaps=!1,e}createMesh(r,n,i){switch(i){case e.Style.WIRE:return this.material.wireframe||(this.material.wireframe=!0),new t.Mesh(r,n);case e.Style.MESH:return this.material.wireframe&&(this.material.wireframe=!1),new t.Mesh(r,n);case e.Style.POINTS:return new t.Points(r,n)}}toggleDepthDebug(e){this.material.uniforms.debugDepth.value=null!=e?e:!this.material.uniforms.debugDepth.value}set displacement(e){this.material.uniforms.displacement.value=e}set depth(e){this.material.uniforms.depthTexture.value=e}set texture(e){this.material.uniforms.colorTexture.value=e}set opacity(e){this.material.uniforms.opacity.value=e}set pointSize(e){this.material.uniforms.pointSize.value=e}get config(){return this.props}get opacity(){return this.material.uniforms.opacity.value}get pointSize(){return this.material.uniforms.pointSize.value}get displacement(){return this.material.uniforms.displacement.value}get texture(){return this.material.uniforms.colorTexture.value}get depth(){return this.material.uniforms.opacity.value}}p.geometry=void 0,e.Viewer=p,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=three-6dof.min.js.map

static/public/js/three-6dof.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"three-6dof.min.js","sources":["../src/components/constants.ts","../src/components/uniforms.ts","../src/components/viewer.ts"],"sourcesContent":["enum MeshDensity {\n  LOW = 64,\n  MEDIUM = 128,\n  HIGH = 256,\n  EXTRA_HIGH = 512,\n  EPIC = 1024,\n}\n\nenum Style {\n  WIRE = 0,\n  POINTS = 1,\n  MESH = 2,\n}\n\nenum TextureType {\n  TOP_BOTTOM,\n  SEPERATE,\n}\n\nclass Props {\n  public type: TextureType = TextureType.SEPERATE\n  public density: MeshDensity = MeshDensity.HIGH\n  public style: Style = Style.MESH\n  public displacement: number = 4.0\n  public radius: number = 6\n}\n\nexport { MeshDensity, Style, TextureType, Props }\n","export const Uniforms: object = {\n  colorTexture: {\n    type: 't',\n    value: null,\n  },\n  depthTexture: {\n    type: 't',\n    value: null,\n  },\n  time: {\n    type: 'f',\n    value: 0.0,\n  },\n  opacity: {\n    type: 'f',\n    value: 1.0,\n  },\n  pointSize: {\n    type: 'f',\n    value: 3.0,\n  },\n  debugDepth: {\n    type: 'f',\n    value: 0.0,\n  },\n  displacement: {\n    type: 'f',\n    value: 1.0,\n  },\n}\n","import {\n  Object3D,\n  ShaderMaterial,\n  BackSide,\n  Mesh,\n  Points,\n  SphereBufferGeometry,\n  Texture,\n  NearestFilter,\n  LinearFilter,\n  RGBFormat,\n} from './three'\n\n// @ts-ignore\nimport frag from '../shaders/sixdof.frag'\n// @ts-ignore\nimport vert from '../shaders/sixdof.vert'\n\nimport { Uniforms } from './uniforms'\nimport { Style, MeshDensity, TextureType, Props } from './constants'\n\nexport default class Viewer extends Object3D {\n  /** Default props if not provided */\n  private props: Props = new Props()\n\n  private static geometry: SphereBufferGeometry\n  private material: ShaderMaterial = new ShaderMaterial({\n    uniforms: Uniforms,\n    vertexShader: vert,\n    fragmentShader: frag,\n    transparent: true,\n    side: BackSide,\n  })\n\n  constructor(texture: Texture, depth?: Texture, props?: object) {\n    super()\n\n    /** Assign the user provided props, if any */\n    this.setProps(this.props, props)\n\n    // /** Add the compiler definitions needed to pick the right GLSL methods */\n    this.setShaderDefines(this.material, [TextureType[this.props.type]])\n\n    /**\n     * Create the geometry only once, it can be shared between instances\n     *  of the viewer since it's kept as a static class member\n     **/\n    if (!Viewer.geometry) {\n      Viewer.geometry = this.createSphereGeometry(\n        this.props.radius,\n        this.props.density,\n      )\n    }\n\n    /** Assign the textures and update the shader uniforms */\n    this.assignTexture(this.props.type, texture, depth)\n\n    /** Set the displacement using the public setter */\n    this.displacement = this.props.displacement\n\n    /** Create the Mesh/Points and add it to the viewer object */\n    super.add(this.createMesh(Viewer.geometry, this.material, this.props.style))\n  }\n\n  /** Small util to set the defines of the GLSL program based on textureType */\n  private setShaderDefines(\n    material: ShaderMaterial,\n    defines: Array<string>,\n  ): void {\n    defines.forEach(define => (material.defines[define] = ''))\n  }\n\n  /** Internal util to create buffer geometry */\n  private createSphereGeometry(\n    radius: number,\n    meshDensity: MeshDensity,\n  ): SphereBufferGeometry {\n    return new SphereBufferGeometry(radius, meshDensity, meshDensity)\n  }\n\n  /** Internal util to set viewer props from config object */\n  private setProps(viewerProps: Props, userProps?: object): void {\n    if (!userProps) return\n\n    /** Iterate over user provided props and assign to viewer props */\n    for (let prop in userProps) {\n      if (viewerProps[prop]) {\n        viewerProps[prop] = userProps[prop]\n      } else {\n        console.warn(\n          `THREE.SixDOF: Provided ${prop} in config but it is not a valid property and being ignored`,\n        )\n      }\n    }\n  }\n\n  /** Internal util to assign the textures to the shader uniforms */\n  private assignTexture(\n    type: TextureType,\n    colorTexture: Texture,\n    depthTexture?: Texture,\n  ): void {\n    /** Check wheter we are rendering top bottom or just single textures */\n    if (type === TextureType.SEPERATE) {\n      if (!depthTexture)\n        throw new Error(\n          'When using seperate texture type, depthmap must be provided',\n        )\n      this.depth = this.setDefaultTextureProps(depthTexture)\n    }\n\n    /** Assign the main texture */\n    this.texture = this.setDefaultTextureProps(colorTexture)\n  }\n\n  private setDefaultTextureProps(texture: Texture): Texture {\n    texture.minFilter = NearestFilter\n    texture.magFilter = LinearFilter\n    texture.format = RGBFormat\n    texture.generateMipmaps = false\n    return texture\n  }\n\n  /** An internal util to create the Mesh Object3D */\n  private createMesh(\n    geo: SphereBufferGeometry,\n    mat: ShaderMaterial,\n    style: Style,\n  ): Object3D {\n    switch (style) {\n      case Style.WIRE:\n        if (!this.material.wireframe) this.material.wireframe = true\n        return new Mesh(geo, mat)\n      case Style.MESH:\n        if (this.material.wireframe) this.material.wireframe = false\n        return new Mesh(geo, mat)\n      case Style.POINTS:\n        return new Points(geo, mat)\n    }\n  }\n\n  /** Toggle vieweing texture or depthmap in viewer */\n  public toggleDepthDebug(state?: boolean): void {\n    this.material.uniforms.debugDepth.value =\n      state != undefined ? state : !this.material.uniforms.debugDepth.value\n  }\n\n  /** Setter for displacement amount */\n  public set displacement(val: number) {\n    this.material.uniforms.displacement.value = val\n  }\n\n  /** Setter for depthmap uniform */\n  public set depth(map: Texture) {\n    this.material.uniforms.depthTexture.value = map\n  }\n\n  /** Setter for depthmap uniform */\n  public set texture(map: Texture) {\n    this.material.uniforms.colorTexture.value = map\n  }\n\n  /** Setter for the opacity */\n  public set opacity(val: number) {\n    this.material.uniforms.opacity.value = val\n  }\n\n  /** Setter for the point size */\n  public set pointSize(val: number) {\n    this.material.uniforms.pointSize.value = val\n  }\n\n  /** Getter for the current viewer props */\n  public get config(): Props {\n    return this.props\n  }\n\n  /** Getter for the opacity */\n  public get opacity(): number {\n    return this.material.uniforms.opacity.value\n  }\n\n  /** Getter for the point size */\n  public get pointSize(): number {\n    return this.material.uniforms.pointSize.value\n  }\n\n  /** Getter for displacement amount */\n  public get displacement(): number {\n    return this.material.uniforms.displacement.value\n  }\n\n  /** Getter for texture */\n  public get texture(): Texture {\n    return this.material.uniforms.colorTexture.value\n  }\n\n  /** Getter for the depth texture */\n  public get depth(): Texture {\n    return this.material.uniforms.opacity.value\n  }\n}\n"],"names":["MeshDensity","Style","TextureType","Uniforms","colorTexture","type","value","depthTexture","time","opacity","pointSize","debugDepth","displacement","Props","SEPERATE","density","HIGH","style","MESH","radius","Viewer","Object3D","constructor","texture","depth","props","material","ShaderMaterial","uniforms","vertexShader","vert","fragmentShader","frag","transparent","side","BackSide","setProps","this","setShaderDefines","geometry","createSphereGeometry","assignTexture","add","createMesh","defines","forEach","define","meshDensity","SphereBufferGeometry","viewerProps","userProps","prop","console","warn","Error","setDefaultTextureProps","minFilter","NearestFilter","magFilter","LinearFilter","format","RGBFormat","generateMipmaps","geo","mat","WIRE","wireframe","Mesh","POINTS","Points","toggleDepthDebug","state","undefined","val","map"],"mappings":"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"}

static/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/public/images/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/public/images/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

static/three6dof.html

@@ -0,0 +1,180 @@
+<html>
+
+<head>
+    <title>THREE.6DOF - Image Viewer Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <style>
+        body {
+            background: #000;
+            color: #fff;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+            font-family: georgia;
+            text-align: center;
+        }
+
+        a {
+            color: skyblue;
+            text-decoration: none
+        }
+
+        video {
+            display: none;
+        }
+
+        #info {
+            position: absolute;
+            top: 15px;
+            width: 100%;
+        }
+
+        #info_wrapper {
+            background: rgba(0, 0, 0, 0.7);
+        }
+    </style>
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="public/images/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="public/images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="public/images/favicon/favicon-16x16.png">
+    <link rel="manifest" href="public/site.webmanifest">
+
+    <!-- Libraries -->
+    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+    <!-- <script src="public/js/WebVR.js"></script> -->
+    <script src="public/js/GUIHelper.js"></script>
+
+    <!-- THREE-6DOF -->
+    <script src="public/js/three-6dof.min.js"></script>
+</head>
+
+<body>
+    <script>
+        'use strict';
+        // get data-rgb from parent iframe tag
+        var rgbBase64Img = window.frameElement?.getAttribute('data-rgb');
+        var depthBase64Img = window.frameElement?.getAttribute('data-depth');
+
+        // debug GUI
+        var gui = new dat.GUI({ closed: true, closeOnTop: true });
+
+        // We will create the viewer once the textures are loaded
+        var sixDofViewer;
+
+        // Keep track of time
+        var clock = new THREE.Clock();
+
+        let enableAnimation = true;
+        // Create the scene, renderer and camera
+        var scene = new THREE.Scene();
+        const w = 1024
+        const h = 512
+        var renderer = new THREE.WebGLRenderer({ antialias: true });
+        // renderer.setSize(w, h); //window.innerWidth, window.innerHeight);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        // renderer.vr.enabled = true;
+        document.body.appendChild(renderer.domElement);
+        // document.body.appendChild(THREE.WEBVR.createButton(renderer));
+
+        var camera = new THREE.PerspectiveCamera(55, w / h, 0.001, 1000);
+        var cameraDolly = new THREE.Object3D(); // We use a camera dolly since WebVR/XR will override camera transform
+        cameraDolly.position.y = -1.7;
+
+        cameraDolly.add(camera);
+        scene.add(cameraDolly);
+
+
+        var loadingManager = new THREE.LoadingManager();
+        var textureLoader = new THREE.TextureLoader(loadingManager);
+
+        // Load the textures and store them
+        var colorTexture, depthTexture;
+        // three.js load texture from base64
+        if (rgbBase64Img && depthBase64Img) {
+
+            textureLoader.load(rgbBase64Img, texture => { colorTexture = texture });
+            textureLoader.load(depthBase64Img, texture => { depthTexture = texture });
+        } else {
+            textureLoader.load('public/images/equirectangular/kandao3.jpg', texture => { colorTexture = texture });
+            textureLoader.load('public/images/equirectangular/kandao3_depthmap.jpg', texture => { depthTexture = texture });
+        }
+
+        // On finish loading create the viewer with the textures
+        loadingManager.onLoad = () => {
+            sixDofViewer = new SixDOF.Viewer(colorTexture, depthTexture,
+                {
+                    'type': SixDOF.TextureType.SEPERATE, // For seperate depth and texture (for single top bottom use TextureType.TOP_BOTTOM)
+                    'style': SixDOF.Style.MESH, // Chooses the rendering style (defaults to Style.MESH)
+                    'density': SixDOF.MeshDensity.EXTRA_HIGH, // Chooses geometry tesselation level
+                    'displacement': 4.0, // Defaults to 4.0
+                    'radius': 6 // Defaults to 6
+                })
+            scene.add(sixDofViewer);
+
+            // Create the debug GUI and add some debug params
+            var shaderParams = gui.addFolder('Shader');
+            shaderParams.add(sixDofViewer, 'displacement', 0, 7).name('Displacement');
+            shaderParams.add(sixDofViewer, 'opacity', 0, 1).name('Opacity');
+            shaderParams.add(sixDofViewer, 'pointSize', 0, 10).name('Point Size');
+            shaderParams.add(camera, 'fov', 1, 100).name('Camera FOV').onChange(val => {
+                camera.updateProjectionMatrix();
+            });
+            shaderParams.add(camera.position, 'x', -10, 10).name('Camera X');
+            shaderParams.add(camera.position, 'y', -10, 10).name('Camera Y');
+            shaderParams.add(camera.position, 'z', -10, 10).name('Camera Z');
+
+            shaderParams.add({ 'debugDepth': false }, 'debugDepth')
+                .name('Debug Depth')
+                .onChange(val => {
+                    sixDofViewer.toggleDepthDebug(val);
+                });
+            shaderParams.add({
+                'changeStyle': () => { }
+            }, 'changeStyle', {
+                'Mesh': SixDOF.Style[SixDOF.Style.MESH],
+                'Wireframe': SixDOF.Style[SixDOF.Style.WIRE],
+                'Pointcloud': SixDOF.Style[SixDOF.Style.POINTS]
+            })
+                .name('Rendering Style')
+                .onChange(val => {
+                    scene.remove(sixDofViewer);
+                    sixDofViewer = new SixDOF.Viewer(colorTexture, depthTexture, {
+                        'style': SixDOF.Style[val]
+                    });
+                    scene.add(sixDofViewer);
+                });
+
+            shaderParams.open();
+        }
+        const controls = new THREE.OrbitControls(cameraDolly, renderer.domElement);
+        controls.enableZoom = true
+        controls.enableDamping = true;
+        camera.rotation.x = Math.PI / 2;
+
+        controls.autoRotate = true;
+        controls.addEventListener('start', function () {
+            controls.autoRotate = false;
+        });
+
+
+        renderer.setAnimationLoop((time) => {
+
+            controls.update();
+            renderer.render(scene, camera);
+        });
+
+
+
+        window.addEventListener('resize', ev => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    </script>
+</body>
+
+</html>