WebThings/Depth-Map.html at main · thamaracode/WebThings · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Depth-Map 3D Parallax</title>
    <style>
        body { margin: 0; background: #000; overflow: hidden; font-family: 'Inter', sans-serif; }
        canvas { display: block; width: 100vw; height: 100vh; }

        #overlay {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            pointer-events: none;
            z-index: 10;
        }
        h1 { font-size: 4rem; margin: 0; letter-spacing: 15px; font-weight: 100; text-shadow: 0 0 20px rgba(0,0,0,0.5); }
        p { opacity: 0.5; letter-spacing: 5px; font-size: 0.7rem; }
    </style>
</head>
<body>

    <div id="overlay">
        <h1>DIMENSION</h1>
        <p>2D TO 3D DISPLACEMENT MAPPING</p>
    </div>

    <script type="importmap">
        {
          "imports": {
            "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
          }
        }
    </script>

    <script type="module">
        import * as THREE from 'three';

        // --- THE SHADER (The Brain) ---
        const vertexShader = `
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

        const fragmentShader = `
            varying vec2 vUv;
            uniform sampler2D uImage;
            uniform sampler2D uDepthMap;
            uniform vec2 uMouse;

            void main() {
                // Look up the depth value (0.0 to 1.0)
                float depth = texture2D(uDepthMap, vUv).r;

                // Calculate displacement based on mouse position and depth
                // Near pixels (high depth) move more than far pixels
                vec2 displacement = uMouse * depth * 0.05;

                // Sample the original image with the shifted coordinates
                vec4 color = texture2D(uImage, vUv + displacement);

                gl_FragColor = color;
            }
        `;

        // --- THREE.JS SETUP ---
        const scene = new THREE.Scene();
        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // --- LOADING ASSETS ---
        const loader = new THREE.TextureLoader();
        // Standard Demo Assets (Mountains + Depth Map)
        const image = loader.load('https://raw.githubusercontent.com/akella/webgl-depth-map/master/img/mountains.jpg');
        const depthMap = loader.load('https://raw.githubusercontent.com/akella/webgl-depth-map/master/img/mountains-map.jpg');

        const uniforms = {
            uImage: { value: image },
            uDepthMap: { value: depthMap },
            uMouse: { value: new THREE.Vector2(0, 0) }
        };

        const geometry = new THREE.PlaneGeometry(2, 2);
        const material = new THREE.ShaderMaterial({
            uniforms,
            vertexShader,
            fragmentShader
        });

        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        // --- INTERACTION ---
        window.addEventListener('mousemove', (e) => {
            // Smooth easing for the mouse movement
            const x = (e.clientX / window.innerWidth) - 0.5;
            const y = (e.clientY / window.innerHeight) - 0.5;

            // We use target values for smooth interpolation (optional but looks better)
            uniforms.uMouse.value.x = x;
            uniforms.uMouse.value.y = -y; // Invert Y for correct 3D look
        });

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>