Skip to content

Use MeshStandardMaterial for displacement in panoramic 6DoF example #17936

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 15, 2019
Merged

Use MeshStandardMaterial for displacement in panoramic 6DoF example #17936

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 71 additions & 95 deletions examples/webvr_6dof_panorama.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down