Hugging Face's logo

Spaces:
Intel
/
ldm3d
Starting on T4

App Files Community
4
ldm3d
File size: 6,871 Bytes 
71d12ce
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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/three@0.147.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.147.0/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>