Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 1e9605b7 编写于 作者: F Fernando Serrano
浏览文件
操作

Introduce supportsMultiview on Material. Fix shadows with multiview enabled

上级 5c1e9abd
隐藏空白更改
内联 并排
Showing with 296 addition and 6 deletion
examples/webvr_dragging_multiview.html 0 → 100644
浏览文件 @ 1e9605b7
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webvr - dragging</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
font-family: Monospace;
background-color: #101010;
color: #fff;
margin: 0px;
overflow: hidden;
}
a {
color: #f00;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/vr/WebVR.js"></script>
<script>
var container;
var camera, scene, renderer;
var controller1, controller2;
var raycaster, intersected = [];
var tempMatrix = new THREE.Matrix4();
var group;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - dragging';
container.appendChild( info );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x808080 );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
var geometry = new THREE.PlaneBufferGeometry( 4, 4 );
var material = new THREE.MeshStandardMaterial( {
color: 0xeeeeee,
roughness: 1.0,
metalness: 0.0
} );
var floor = new THREE.Mesh( geometry, material );
floor.rotation.x = - Math.PI / 2;
floor.receiveShadow = true;
scene.add( floor );
scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 6, 0 );
light.castShadow = true;
light.shadow.camera.top = 2;
light.shadow.camera.bottom = - 2;
light.shadow.camera.right = 2;
light.shadow.camera.left = - 2;
light.shadow.mapSize.set( 4096, 4096 );
scene.add( light );
group = new THREE.Group();
scene.add( group );
var geometries = [
new THREE.BoxBufferGeometry( 0.2, 0.2, 0.2 ),
new THREE.ConeBufferGeometry( 0.2, 0.2, 64 ),
new THREE.CylinderBufferGeometry( 0.2, 0.2, 0.2, 64 ),
new THREE.IcosahedronBufferGeometry( 0.2, 3 ),
new THREE.TorusBufferGeometry( 0.2, 0.04, 64, 32 )
];
for ( var i = 0; i < 200; i ++ ) {
var geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
var material = new THREE.MeshStandardMaterial( {
color: Math.random() * 0xffffff,
roughness: 0.7,
metalness: 0.0
} );
var object = new THREE.Mesh( geometry, material );
object.position.x = Math.random() * 4 - 2;
object.position.y = Math.random() * 2;
object.position.z = Math.random() * 4 - 2;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.setScalar( Math.random() + 0.5 );
object.castShadow = true;
object.receiveShadow = true;
group.add( object );
}
//
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2', { antialias: false } );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context, multiview: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.vr.enabled = true;
container.appendChild( renderer.domElement );
document.body.appendChild( WEBVR.createButton( renderer ) );
// controllers
controller1 = renderer.vr.getController( 0 );
controller1.addEventListener( 'selectstart', onSelectStart );
controller1.addEventListener( 'selectend', onSelectEnd );
scene.add( controller1 );
controller2 = renderer.vr.getController( 1 );
controller2.addEventListener( 'selectstart', onSelectStart );
controller2.addEventListener( 'selectend', onSelectEnd );
scene.add( controller2 );
//
var geometry = new THREE.BufferGeometry().setFromPoints( [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, - 1 ) ] );
var line = new THREE.Line( geometry );
line.name = 'line';
line.scale.z = 5;
controller1.add( line.clone() );
controller2.add( line.clone() );
raycaster = new THREE.Raycaster();
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onSelectStart( event ) {
var controller = event.target;
var intersections = getIntersections( controller );
if ( intersections.length > 0 ) {
var intersection = intersections[ 0 ];
tempMatrix.getInverse( controller.matrixWorld );
var object = intersection.object;
object.matrix.premultiply( tempMatrix );
object.matrix.decompose( object.position, object.quaternion, object.scale );
object.material.emissive.b = 1;
controller.add( object );
controller.userData.selected = object;
}
}
function onSelectEnd( event ) {
var controller = event.target;
if ( controller.userData.selected !== undefined ) {
var object = controller.userData.selected;
object.matrix.premultiply( controller.matrixWorld );
object.matrix.decompose( object.position, object.quaternion, object.scale );
object.material.emissive.b = 0;
group.add( object );
controller.userData.selected = undefined;
}
}
function getIntersections( controller ) {
tempMatrix.identity().extractRotation( controller.matrixWorld );
raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
return raycaster.intersectObjects( group.children );
}
function intersectObjects( controller ) {
// Do not highlight when already selected
if ( controller.userData.selected !== undefined ) return;
var line = controller.getObjectByName( 'line' );
var intersections = getIntersections( controller );
if ( intersections.length > 0 ) {
var intersection = intersections[ 0 ];
var object = intersection.object;
object.material.emissive.r = 1;
intersected.push( object );
line.scale.z = intersection.distance;
} else {
line.scale.z = 5;
}
}
function cleanIntersected() {
while ( intersected.length ) {
var object = intersected.pop();
object.material.emissive.r = 0;
}
}
//
function animate() {
renderer.setAnimationLoop( render );
}
function render() {
cleanIntersected();
intersectObjects( controller1 );
intersectObjects( controller2 );
renderer.render( scene, camera );
}
</script>
</body>
</html>
src/materials/Material.js
浏览文件 @ 1e9605b7
......@@ -71,6 +71,7 @@ function Material() {
this.visible = true;
this.toneMapped = true;
this.supportsMultiview = true;
this.userData = {};
......
src/renderers/WebGLRenderer.js
浏览文件 @ 1e9605b7
......@@ -1733,7 +1733,7 @@ function WebGLRenderer( parameters ) {
if ( refreshProgram || _currentCamera !== camera ) {
if ( multiview.isEnabled() ) {
if ( material.supportsMultiview && multiview.isEnabled() ) {
if ( camera.isArrayCamera ) {
......@@ -1798,7 +1798,7 @@ function WebGLRenderer( parameters ) {
material.isShaderMaterial ||
material.skinning ) {
if ( multiview.isEnabled() ) {
if ( material.supportsMultiview && multiview.isEnabled() ) {
if ( camera.isArrayCamera ) {
......
src/renderers/webgl/WebGLProgram.js
浏览文件 @ 1e9605b7
......@@ -430,7 +430,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
'uniform mat4 modelMatrix;',
'uniform vec3 cameraPosition;',
renderer.multiview.isEnabled() ? [
material.supportsMultiview && renderer.multiview.isEnabled() ? [
'uniform mat4 modelViewMatrix;',
'uniform mat3 normalMatrix;',
'uniform mat4 viewMatrices[2];',
......@@ -566,7 +566,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
'uniform vec3 cameraPosition;',
renderer.multiview.isEnabled() ? [
material.supportsMultiview && renderer.multiview.isEnabled() ? [
'uniform mat4 viewMatrices[2];',
'#define viewMatrix viewMatrices[VIEW_ID]'
......@@ -627,7 +627,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
prefixVertex = [
'#version 300 es\n',
renderer.multiview.isEnabled() ? [
material.supportsMultiview && renderer.multiview.isEnabled() ? [
'#extension GL_OVR_multiview2 : require',
'layout(num_views = 2) in;',
......@@ -642,7 +642,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
prefixFragment = [
'#version 300 es\n',
renderer.multiview.isEnabled() ? [
material.supportsMultiview && renderer.multiview.isEnabled() ? [
'#extension GL_OVR_multiview2 : require',
'#define VIEW_ID gl_ViewID_OVR'
......
src/renderers/webgl/WebGLShadowMap.js
浏览文件 @ 1e9605b7
......@@ -81,6 +81,8 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
var depthMaterial = new MeshDepthMaterial( {
supportsMultiview: false,
depthPacking: RGBADepthPacking,
morphTargets: useMorphing,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或