提交 3277fefb 编写于 作者: F Fernando Serrano

Initial working implementation

上级 7e0a78be
......@@ -335,6 +335,7 @@ var files = {
],
"webvr": [
"webvr_ballshooter",
"webvr_ballshooter_multiview",
"webvr_cubes",
"webvr_dragging",
"webvr_lorenzattractor",
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webvr - ball shooter</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: #48f;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/vr/WebVR.js"></script>
<script src="js/geometries/BoxLineGeometry.js"></script>
<script>
var container;
var ms;
var camera, scene, renderer;
var controller1, controller2;
var room;
var count = 0;
var radius = 0.08;
var normal = new THREE.Vector3();
var relativeVelocity = new THREE.Vector3();
var clock = new THREE.Clock();
init();
animate();
function init() {
const urlParams = new URLSearchParams(window.location.search);
const multiview = urlParams.has('enableMultiview');
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';
// @todo Change enabled for requested and check renderer.vr.multiview
info.innerHTML = 'OVR_multiview2 demo - ' + (multiview ? '<b style="color:#3f3">multiview enabled</b>' : '<b style="color:#f33">multiview not enabled</b>') + ` <a href="${multiview ? '?' : '?enableMultiview'}">toggle</a>`;
container.appendChild( info );
ms = document.createElement('div');
ms.innerHTML = '';
info.appendChild(ms);
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x505050 );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
room = new THREE.LineSegments(
new THREE.BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
new THREE.LineBasicMaterial( { color: 0x808080 } )
);
room.geometry.translate( 0, 3, 0 );
scene.add( room );
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 1, 1, 1 );
scene.add( light );
var geometry = new THREE.IcosahedronBufferGeometry( radius, 2 );
var numObjects = urlParams.get('num') || 200;
for ( var i = 0; i < numObjects; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 4 - 2;
object.position.y = Math.random() * 4;
object.position.z = Math.random() * 4 - 2;
object.userData.velocity = new THREE.Vector3();
object.userData.velocity.x = Math.random() * 0.01 - 0.005;
object.userData.velocity.y = Math.random() * 0.01 - 0.005;
object.userData.velocity.z = Math.random() * 0.01 - 0.005;
room.add( object );
}
//
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2', { antialias: false } );
renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context, multiview: multiview } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.vr.enabled = true;
container.appendChild( renderer.domElement );
//
document.body.appendChild( WEBVR.createButton( renderer ) );
// controllers
function onSelectStart() {
this.userData.isSelecting = true;
}
function onSelectEnd() {
this.userData.isSelecting = false;
}
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 );
// helpers
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
var material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
controller1.add( new THREE.Line( geometry, material ) );
controller2.add( new THREE.Line( geometry, material ) );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function handleController( controller ) {
if ( controller.userData.isSelecting ) {
var object = room.children[ count ++ ];
object.position.copy( controller.position );
object.userData.velocity.x = ( Math.random() - 0.5 ) * 3;
object.userData.velocity.y = ( Math.random() - 0.5 ) * 3;
object.userData.velocity.z = ( Math.random() - 9 );
object.userData.velocity.applyQuaternion( controller.quaternion );
if ( count === room.children.length ) count = 0;
}
}
//
function animate() {
renderer.setAnimationLoop( render );
}
function render() {
handleController( controller1 );
handleController( controller2 );
//
var delta = clock.getDelta() * 0.8; // slow down simulation
var range = 3 - radius;
for ( var i = 0; i < room.children.length; i ++ ) {
var object = room.children[ i ];
object.position.x += object.userData.velocity.x * delta;
object.position.y += object.userData.velocity.y * delta;
object.position.z += object.userData.velocity.z * delta;
// keep objects inside room
if ( object.position.x < - range || object.position.x > range ) {
object.position.x = THREE.Math.clamp( object.position.x, - range, range );
object.userData.velocity.x = - object.userData.velocity.x;
}
if ( object.position.y < radius || object.position.y > 6 ) {
object.position.y = Math.max( object.position.y, radius );
object.userData.velocity.x *= 0.98;
object.userData.velocity.y = - object.userData.velocity.y * 0.8;
object.userData.velocity.z *= 0.98;
}
if ( object.position.z < - range || object.position.z > range ) {
object.position.z = THREE.Math.clamp( object.position.z, - range, range );
object.userData.velocity.z = - object.userData.velocity.z;
}
for ( var j = i + 1; j < room.children.length; j ++ ) {
var object2 = room.children[ j ];
normal.copy( object.position ).sub( object2.position );
var distance = normal.length();
if ( distance < 2 * radius ) {
normal.multiplyScalar( 0.5 * distance - radius );
object.position.sub( normal );
object2.position.add( normal );
normal.normalize();
relativeVelocity.copy( object.userData.velocity ).sub( object2.userData.velocity );
normal = normal.multiplyScalar( relativeVelocity.dot( normal ) );
object.userData.velocity.sub( normal );
object2.userData.velocity.add( normal );
}
}
object.userData.velocity.y -= 9.8 * delta;
}
var ts = performance.now();
renderer.render( scene, camera );
ms.innerHTML = 'renderer.render time: ' + (performance.now() - ts).toFixed(2) + 'ms';
}
</script>
</body>
</html>
......@@ -40,6 +40,7 @@ import { WebGLState } from './webgl/WebGLState.js';
import { WebGLTextures } from './webgl/WebGLTextures.js';
import { WebGLUniforms } from './webgl/WebGLUniforms.js';
import { WebGLUtils } from './webgl/WebGLUtils.js';
import { WebGLMultiview } from './webgl/WebGLMultiview.js';
import { WebVRManager } from './webvr/WebVRManager.js';
import { WebXRManager } from './webvr/WebXRManager.js';
......@@ -58,6 +59,8 @@ function WebGLRenderer( parameters ) {
var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' ),
_context = parameters.context !== undefined ? parameters.context : null,
_multiview = parameters.multiview !== undefined ? parameters.multiview : false,
_alpha = parameters.alpha !== undefined ? parameters.alpha : false,
_depth = parameters.depth !== undefined ? parameters.depth : true,
_stencil = parameters.stencil !== undefined ? parameters.stencil : true,
......@@ -312,6 +315,20 @@ function WebGLRenderer( parameters ) {
this.vr = vr;
if ( _multiview && ! capabilities.multiview ) {
console.warn( 'WebGLRenderer: Multiview requested but not supported by the browser' );
this.vr.multiview = false;
} else if ( _multiview !== false && capabilities.multiview ) {
console.info( 'WebGLRenderer: Multiview enabled' );
this.vr.multiview = true;
}
// shadow map
var shadowMap = new WebGLShadowMap( _this, objects, capabilities.maxTextureSize );
......@@ -1360,44 +1377,95 @@ function WebGLRenderer( parameters ) {
}
var multiviewObject = new WebGLMultiview(_gl, _canvas, extensions );
function renderObjects( renderList, scene, camera, overrideMaterial ) {
for ( var i = 0, l = renderList.length; i < l; i ++ ) {
if ( vr.multiview ) {
multiviewObject.bindMultiviewFrameBuffer();
_gl.disable( _gl.SCISSOR_TEST );
var width = _canvas.width;
var height = _canvas.height;
var halfWidth = Math.floor(width * 0.5);
_gl.viewport( 0, 0, halfWidth, height );
renderer.setViewport( 0, 0, halfWidth, height );
_gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT | _gl.STENCIL_BUFFER_BIT );
for ( var i = 0, l = renderList.length; i < l; i ++ ) {
var renderItem = renderList[ i ];
var renderItem = renderList[ i ];
var object = renderItem.object;
var geometry = renderItem.geometry;
var material = overrideMaterial === undefined ? renderItem.material : overrideMaterial;
var group = renderItem.group;
var object = renderItem.object;
var geometry = renderItem.geometry;
var material = overrideMaterial === undefined ? renderItem.material : overrideMaterial;
var group = renderItem.group;
if ( camera.isArrayCamera ) {
renderObject( object, scene, camera, geometry, material, group );
_currentArrayCamera = camera;
}
multiviewObject.unbindMultiviewFrameBuffer();
} else {
for ( var i = 0, l = renderList.length; i < l; i ++ ) {
var renderItem = renderList[ i ];
var object = renderItem.object;
var geometry = renderItem.geometry;
var material = overrideMaterial === undefined ? renderItem.material : overrideMaterial;
var group = renderItem.group;
if ( camera.isArrayCamera ) {
var cameras = camera.cameras;
_currentArrayCamera = camera;
for ( var j = 0, jl = cameras.length; j < jl; j ++ ) {
var cameras = camera.cameras;
var camera2 = cameras[ j ];
for ( var j = 0, jl = cameras.length; j < jl; j ++ ) {
if ( object.layers.test( camera2.layers ) ) {
var camera2 = cameras[ j ];
state.viewport( _currentViewport.copy( camera2.viewport ) );
if ( object.layers.test( camera2.layers ) ) {
if ( 'viewport' in camera2 ) { // XR
state.viewport( _currentViewport.copy( camera2.viewport ) );
} else {
var bounds = camera2.bounds;
var x = bounds.x * _width;
var y = bounds.y * _height;
var width = bounds.z * _width;
var height = bounds.w * _height;
state.viewport( _currentViewport.set( x, y, width, height ).multiplyScalar( _pixelRatio ) );
}
currentRenderState.setupLights( camera2 );
currentRenderState.setupLights( camera2 );
renderObject( object, scene, camera2, geometry, material, group );
renderObject( object, scene, camera2, geometry, material, group );
}
}
}
} else {
} else {
_currentArrayCamera = null;
_currentArrayCamera = null;
renderObject( object, scene, camera, geometry, material, group );
renderObject( object, scene, camera, geometry, material, group );
}
}
......@@ -1682,7 +1750,24 @@ function WebGLRenderer( parameters ) {
if ( refreshProgram || _currentCamera !== camera ) {
p_uniforms.setValue( _gl, 'projectionMatrix', camera.projectionMatrix );
if ( vr.multiview ) {
if ( false && vr.isPresenting() ) {
// @todo Obviously remove the map :)
p_uniforms.setValue( _gl, 'projectionMatrices', camera.cameras.map( c => c.projectionMatrix ) );
} else {
p_uniforms.setValue( _gl, 'projectionMatrices', [ camera.projectionMatrix, camera.projectionMatrix ] );
}
} else {
p_uniforms.setValue( _gl, 'projectionMatrix', camera.projectionMatrix );
}
if ( capabilities.logarithmicDepthBuffer ) {
......@@ -1730,7 +1815,27 @@ function WebGLRenderer( parameters ) {
material.isShaderMaterial ||
material.skinning ) {
p_uniforms.setValue( _gl, 'viewMatrix', camera.matrixWorldInverse );
if ( vr.multiview ) {
if ( vr.isPresenting() ) {
// @todo Obviously remove the map :)
p_uniforms.setValue( _gl, 'viewMatrix', camera.cameras.map( c => c.matrixWorldInverse ) );
} else {
var newMat = camera.matrixWorldInverse.clone();
var newMat = new Matrix4();
p_uniforms.setValue( _gl, 'viewMatrices', [camera.matrixWorldInverse, newMat] );
}
} else {
p_uniforms.setValue( _gl, 'viewMatrix', camera.matrixWorldInverse );
}
}
......
......@@ -86,6 +86,13 @@ function WebGLCapabilities( gl, extensions, parameters ) {
var maxSamples = isWebGL2 ? gl.getParameter( gl.MAX_SAMPLES ) : 0;
var multiview = isWebGL2 && ( !! extensions.get( 'WEBGL_multiview' ) || !! extensions.get( 'OVR_multiview' ) || !! extensions.get( 'OVR_multiview2' ) );
/*
var ovrMultiview2 = extensions.get( 'OVR_multiview2' );
if (ovrMultiview2) {
var num = gl.getParameter(ovrMultiview2.MAX_VIEWS_OVR);
}
*/
return {
isWebGL2: isWebGL2,
......@@ -110,7 +117,9 @@ function WebGLCapabilities( gl, extensions, parameters ) {
floatFragmentTextures: floatFragmentTextures,
floatVertexTextures: floatVertexTextures,
maxSamples: maxSamples
maxSamples: maxSamples,
multiview: multiview
};
......
function err() {
console.error( bgl.getError() );
}
var bgl;
function WebGLMultiview( gl, canvas, extensions ) {
var NUM_MULTIVIEW_VIEWS = 2;
bgl = gl;
var width = canvas.width;
var height = canvas.height;
var g_multiviewFb; // multiview framebuffer.
var g_multiviewViewFb; // single views inside the multiview framebuffer.
var g_multiviewColorTexture; // Color texture for multiview framebuffer.
var g_multiviewDepth; // Depth texture for multiview framebuffer.
var g_multiviewFbWidth = 0;
var g_multiviewFbHeight = 0;
var ext = extensions.get( 'OVR_multiview2' );
if (!ext) {
return;
}
var texture = {
color: null,
depthStencil: null
};
var framebuffer = gl.createFramebuffer();
var multiviewViewFb = null;
this.createMultiviewRenderTargetTexture = function () {
var halfWidth = Math.floor( canvas.width * 0.5 );
framebuffer = gl.createFramebuffer();
gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer );
texture.color = gl.createTexture();
gl.bindTexture( gl.TEXTURE_2D_ARRAY, texture.color );
gl.texParameteri( gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST );
gl.texParameteri( gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST );
gl.texImage3D( gl.TEXTURE_2D_ARRAY, 0, gl.RGBA8, halfWidth, canvas.height, NUM_MULTIVIEW_VIEWS, 0, gl.RGBA, gl.UNSIGNED_BYTE, null );
ext.framebufferTextureMultiviewOVR( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, texture.color, 0, 0, NUM_MULTIVIEW_VIEWS );
texture.depthStencil = gl.createTexture();
gl.bindTexture( gl.TEXTURE_2D_ARRAY, texture.depthStencil );
gl.texParameteri( gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST );
gl.texParameteri( gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST );
gl.texImage3D( gl.TEXTURE_2D_ARRAY, 0, gl.DEPTH24_STENCIL8, halfWidth, canvas.height, NUM_MULTIVIEW_VIEWS, 0, gl.DEPTH_STENCIL, gl.UNSIGNED_INT_24_8, null );
ext.framebufferTextureMultiviewOVR( gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, texture.depthStencil, 0, 0, NUM_MULTIVIEW_VIEWS );
multiviewViewFb = [ null, null ];
for ( var viewIndex = 0; viewIndex < 2; ++ viewIndex ) {
multiviewViewFb[ viewIndex ] = gl.createFramebuffer();
gl.bindFramebuffer( gl.FRAMEBUFFER, multiviewViewFb[ viewIndex ] );
gl.framebufferTextureLayer( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, texture.color, 0, viewIndex );
}
g_multiviewFbWidth = halfWidth;
g_multiviewFbHeight = canvas.height;
};
this.bindMultiviewFrameBuffer = function () {
var halfWidth = Math.floor( canvas.width * 0.5 );
if ( g_multiviewFbWidth < halfWidth || g_multiviewFbHeight < canvas.height ) {
console.log( 'Updating multiview FBO with dimensions: ', halfWidth, canvas.height );
gl.bindTexture( gl.TEXTURE_2D_ARRAY, texture.color );
gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, gl.RGBA8, halfWidth, canvas.height, NUM_MULTIVIEW_VIEWS, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindTexture( gl.TEXTURE_2D_ARRAY, texture.depthStencil );
gl.texImage3D(gl.TEXTURE_2D_ARRAY, 0, gl.DEPTH24_STENCIL8, halfWidth, canvas.height, NUM_MULTIVIEW_VIEWS, 0, gl.DEPTH_STENCIL, gl.UNSIGNED_INT_24_8, null);
g_multiviewFbWidth = halfWidth;
g_multiviewFbHeight = canvas.height;
}
// gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, framebuffer );
};
this.unbindMultiviewFrameBuffer = function () {
var halfWidth = Math.floor( canvas.width * 0.5 );
gl.bindFramebuffer( gl.DRAW_FRAMEBUFFER, null );
gl.bindFramebuffer( gl.READ_FRAMEBUFFER, multiviewViewFb[ 0 ] );
gl.blitFramebuffer( 0, 0, halfWidth, canvas.height, 0, 0, halfWidth, canvas.height, gl.COLOR_BUFFER_BIT, gl.NEAREST );
gl.bindFramebuffer( gl.READ_FRAMEBUFFER, multiviewViewFb[ 1 ] );
gl.blitFramebuffer( 0, 0, halfWidth, canvas.height, halfWidth, 0, canvas.width, canvas.height, gl.COLOR_BUFFER_BIT, gl.NEAREST );
};
this.createMultiviewRenderTargetTexture();
}
export { WebGLMultiview };
......@@ -427,14 +427,27 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
parameters.logarithmicDepthBuffer && ( capabilities.isWebGL2 || extensions.get( 'EXT_frag_depth' ) ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
'uniform mat4 modelMatrix;',
'uniform mat4 modelViewMatrix;',
'uniform mat4 projectionMatrix;',
'uniform mat4 viewMatrix;',
'uniform mat3 normalMatrix;',
'uniform vec3 cameraPosition;',
renderer.vr.multiview ? [
'uniform mat4 modelViewMatrix;',
'uniform mat4 projectionMatrices[2];',
'uniform mat3 normalMatrix;',
'uniform mat4 viewMatrices[2];',
'#define viewMatrix viewMatrices[VIEW_ID]',
'#define projectionMatrix projectionMatrices[VIEW_ID]'
].join( '\n' ) : [
'uniform mat4 modelViewMatrix;',
'uniform mat4 projectionMatrix;',
'uniform mat4 viewMatrix;',
'uniform mat3 normalMatrix;',
].join( '\n' ),
'attribute vec3 position;',
'attribute vec3 normal;',
'attribute vec2 uv;',
......@@ -551,9 +564,15 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
( ( material.extensions ? material.extensions.shaderTextureLOD : false ) || parameters.envMap ) && ( capabilities.isWebGL2 || extensions.get( 'EXT_shader_texture_lod' ) ) ? '#define TEXTURE_LOD_EXT' : '',
'uniform mat4 viewMatrix;',
'uniform vec3 cameraPosition;',
renderer.vr.multiview ? [
'uniform mat4 viewMatrices[2];',
'#define viewMatrix viewMatrices[VIEW_ID]'
].join( '\n' ) : 'uniform mat4 viewMatrix;',
( parameters.toneMapping !== NoToneMapping ) ? '#define TONE_MAPPING' : '',
( parameters.toneMapping !== NoToneMapping ) ? ShaderChunk[ 'tonemapping_pars_fragment' ] : '', // this code is required here because it is used by the toneMapping() function defined below
( parameters.toneMapping !== NoToneMapping ) ? getToneMappingFunction( 'toneMapping', parameters.toneMapping ) : '',
......@@ -607,6 +626,15 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
// GLSL 3.0 conversion
prefixVertex = [
'#version 300 es\n',
renderer.vr.multiview ? [
'#extension GL_OVR_multiview2 : require',
'layout(num_views = 2) in;',
'#define VIEW_ID gl_ViewID_OVR'
].join( '\n' ) : '',
'#define attribute in',
'#define varying out',
'#define texture2D texture'
......@@ -614,6 +642,12 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
prefixFragment = [
'#version 300 es\n',
renderer.vr.multiview ? [
'#extension GL_OVR_multiview2 : require',
'#define VIEW_ID gl_ViewID_OVR'
].join( '\n' ) : '',
'#define varying in',
isGLSL3ShaderMaterial ? '' : 'out highp vec4 pc_fragColor;',
isGLSL3ShaderMaterial ? '' : '#define gl_FragColor pc_fragColor',
......@@ -634,11 +668,16 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
var vertexGlsl = prefixVertex + vertexShader;
var fragmentGlsl = prefixFragment + fragmentShader;
<<<<<<< HEAD
// console.log( '*VERTEX*', vertexGlsl );
// console.log( '*FRAGMENT*', fragmentGlsl );
var glVertexShader = WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl );
var glFragmentShader = WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentGlsl );
=======
var glVertexShader = WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl, renderer.debug.checkShaderErrors );
var glFragmentShader = WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentGlsl, renderer.debug.checkShaderErrors );
>>>>>>> Initial working implementation
gl.attachShader( program, glVertexShader );
gl.attachShader( program, glFragmentShader );
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册