Merge pull request #17936 from juniorxsound/add-panorama-6dof-example

Use MeshStandardMaterial for displacement in panoramic 6DoF example

examples/webvr_6dof_panorama.html

@@ -13,149 +13,125 @@
 
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - 360 6DOF panorama<br />
-			Written by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
+			Created by <a href="https://orfleisher.com" target="_blank" rel="noopener">@juniorxsound</a>. Panorama from <a href="https://krpano.com/examples/?depthmap" target="_blank" rel="noopener">krpano</a>.
         </div>
-        
-        <script type="x-shader/x-vertex" id="vertexshader">
-            varying vec2 vUv;
-
-            uniform sampler2D depth_map;
-            uniform float displacement;
-
-            void main() {
-
-                vUv = uv;
-                
-                float depth = texture2D(depth_map, uv).r;
-                float disp = displacement * depth;
-                vec3 offset = position + (-normal) * disp;
-            
-                gl_Position = projectionMatrix *
-                                modelViewMatrix *
-                                vec4(offset, 1.0);
-            }
-
-        </script>
-
-        <script type="x-shader/x-fragment" id="fragmentshader">
-
-            varying vec2 vUv;
-
-            uniform sampler2D texture;
-
-            void main() {
-
-                gl_FragColor = texture2D(texture, vUv);
-
-            }
-
-        </script>
 
 		<script src="js/vr/HelioWebXRPolyfill.js"></script>
 
 		<script type="module">
 
-			import * as THREE from '../build/three.module.js';
-			import { WEBVR } from './jsm/vr/WebVR.js';
+            import * as THREE from '../build/three.module.js';
+            import { WEBVR } from './jsm/vr/WebVR.js';
 
-			var camera, scene, renderer, sphere, clock;
+            var camera, scene, renderer, sphere, clock;
 
-			init();
-			animate();
+            init();
+            animate();
 
-			function init() {
+            function init() {
 
                 var container = document.getElementById( 'container' );
-                
+
                 clock = new THREE.Clock();
 
                 scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x101010 );
+                scene.background = new THREE.Color( 0x101010 );
+
+                var light = new THREE.AmbientLight( 0x404040, 10 );
+                scene.add( light );
 
                 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
                 var cameraRig = new THREE.Object3D();
-                cameraRig.position.y = -1.6;
+                cameraRig.position.y = - 1.6;
                 cameraRig.add( camera );
                 scene.add( cameraRig );
 
-                // Create the panoramic sphere with the custom shader material
+                // Create the panoramic sphere geometery
                 var panoSphereGeo = new THREE.SphereBufferGeometry( 6, 256, 256 );
-                var panoSphereMat = new THREE.ShaderMaterial({
-                    uniforms: {
-                        texture: { value : null },
-                        depth_map: { value: null },
-                        displacement: { value: 4 }
-                    },
-                    vertexShader: document.getElementById( 'vertexshader' ).textContent,
-                    fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-                    side: THREE.BackSide
-                });
+
+                // Create the panoramic sphere material
+                var panoSphereMat = new THREE.MeshStandardMaterial( {
+                    side: THREE.BackSide,
+                    displacementScale: - 4.0
+                } );
+
+                // Create the panoramic sphere mesh
                 sphere = new THREE.Mesh( panoSphereGeo, panoSphereMat );
-                scene.add( sphere );
 
                 // Load and assign the texture and depth map
-                var loader = new THREE.TextureLoader();
-                loader.load('./textures/kandao3.jpg', function ( texture ) {
-                    texture.minFilter = THREE.NearestFilter
-                    texture.magFilter = THREE.LinearFilter
-                    texture.format = THREE.RGBFormat
-                    texture.generateMipmaps = false
-                    sphere.material.uniforms.texture.value = texture;
-                });
+                var manager = new THREE.LoadingManager();
+                var loader = new THREE.TextureLoader( manager );
+
+                loader.load( './textures/kandao3.jpg', function ( texture ) {
 
-                loader.load('./textures/kandao3_depthmap.jpg', function ( depth ) {
-                    depth.minFilter = THREE.NearestFilter
-                    depth.magFilter = THREE.LinearFilter
-                    depth.format = THREE.RGBFormat
-                    depth.generateMipmaps = false
-                    sphere.material.uniforms.depth_map.value = depth;
-                });
+                    texture.minFilter = THREE.NearestFilter;
+                    texture.format = THREE.RGBFormat;
+                    texture.generateMipmaps = false;
+                    sphere.material.map = texture;
 
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.vr.enabled = true;
-				container.appendChild( renderer.domElement );
+                } );
 
-				document.body.appendChild( WEBVR.createButton( renderer ) );
+                loader.load( './textures/kandao3_depthmap.jpg', function ( depth ) {
 
-				//
+                    depth.minFilter = THREE.NearestFilter;
+                    depth.format = THREE.RGBFormat;
+                    depth.generateMipmaps = false;
+                    sphere.material.displacementMap = depth;
 
-				window.addEventListener( 'resize', onWindowResize, false );
+                } );
 
-			}
+                // On load complete add the panoramic sphere to the scene
+                manager.onLoad = function () {
 
-			function onWindowResize() {
+                    scene.add( sphere );
 
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
+                };
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
+                renderer = new THREE.WebGLRenderer();
+                renderer.setPixelRatio( window.devicePixelRatio );
+                renderer.setSize( window.innerWidth, window.innerHeight );
+                renderer.vr.enabled = true;
+                container.appendChild( renderer.domElement );
 
-			}
+                document.body.appendChild( WEBVR.createButton( renderer ) );
 
-			function animate() {
+                //
 
-				renderer.setAnimationLoop( render );
+                window.addEventListener( 'resize', onWindowResize, false );
+
+            }
 
-			}
+            function onWindowResize() {
 
-			function render() {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+
+                renderer.setSize( window.innerWidth, window.innerHeight );
+
+            }
+
+            function animate() {
+
+                renderer.setAnimationLoop( render );
+
+            }
+
+            function render() {
 
                 // If we are not presenting move the camera a little so the effect is visible
-                if (!renderer.vr.isPresenting()) {
+                if ( ! renderer.vr.isPresenting() ) {
 
                     var time = clock.getElapsedTime();
 
                     sphere.rotation.y += 0.001;
-                    sphere.position.x = Math.sin(time) * 0.2;
-                    sphere.position.z = Math.cos(time) * 0.2;
+                    sphere.position.x = Math.sin( time ) * 0.2;
+                    sphere.position.z = Math.cos( time ) * 0.2;
 
                 }
 
-				renderer.render( scene, camera );
+                renderer.render( scene, camera );
 
-			}
+            }
 
 		</script>
 	</body>