首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Initial working implementation

Fernando Serrano 6 年之前
父节点
7e0a78beb9
当前提交
3277fefbdf
共有 6 个文件被更改，包括 564 次插入 和 28 次删除
合并视图 显示文件统计
  1. 1 0
      examples/files.js
  2. 277 0
      examples/webvr_ballshooter_multiview.html
  3. 126 21
      src/renderers/WebGLRenderer.js
  4. 10 1
      src/renderers/webgl/WebGLCapabilities.js
  5. 105 0
      src/renderers/webgl/WebGLMultiview.js
  6. 45 6
      src/renderers/webgl/WebGLProgram.js

+ 1 - 0
examples/files.js
查看文件 

@@ -335,6 +335,7 @@ var files = {
 
 	],
 
 	],
 
 	"webvr": [
 
 	"webvr": [
 
 		"webvr_ballshooter",
 
 		"webvr_ballshooter",
 
+		"webvr_ballshooter_multiview",
 
 		"webvr_cubes",
 
 		"webvr_cubes",
 
 		"webvr_dragging",
 
 		"webvr_dragging",
 
 		"webvr_lorenzattractor",
 
 		"webvr_lorenzattractor",

+ 277 - 0
examples/webvr_ballshooter_multiview.html
查看文件 

@@ -0,0 +1,277 @@
 
+<!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>

+ 126 - 21
src/renderers/WebGLRenderer.js
查看文件 

@@ -40,6 +40,7 @@ import { WebGLState } from './webgl/WebGLState.js';
 
 import { WebGLTextures } from './webgl/WebGLTextures.js';
 
 import { WebGLTextures } from './webgl/WebGLTextures.js';
 
 import { WebGLUniforms } from './webgl/WebGLUniforms.js';
 
 import { WebGLUniforms } from './webgl/WebGLUniforms.js';
 
 import { WebGLUtils } from './webgl/WebGLUtils.js';
 
 import { WebGLUtils } from './webgl/WebGLUtils.js';
 
+import { WebGLMultiview } from './webgl/WebGLMultiview.js';
 
 import { WebVRManager } from './webvr/WebVRManager.js';
 
 import { WebVRManager } from './webvr/WebVRManager.js';
 
 import { WebXRManager } from './webvr/WebXRManager.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' ),
 
 	var _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' ),
 
 		_context = parameters.context !== undefined ? parameters.context : null,
 
 		_context = parameters.context !== undefined ? parameters.context : null,
 
 
 
+		_multiview = parameters.multiview !== undefined ? parameters.multiview : false,
 
+
 
 		_alpha = parameters.alpha !== undefined ? parameters.alpha : false,
 
 		_alpha = parameters.alpha !== undefined ? parameters.alpha : false,
 
 		_depth = parameters.depth !== undefined ? parameters.depth : true,
 
 		_depth = parameters.depth !== undefined ? parameters.depth : true,
 
 		_stencil = parameters.stencil !== undefined ? parameters.stencil : true,
 
 		_stencil = parameters.stencil !== undefined ? parameters.stencil : true,
 
@@ -312,6 +315,20 @@ function WebGLRenderer( parameters ) {
 
 
 
 	this.vr = vr;
 
 	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
 
 	// shadow map
 
 
 
 	var shadowMap = new WebGLShadowMap( _this, objects, capabilities.maxTextureSize );
 
 	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 ) {
 
 	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 ) {
 
 		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 ) {
 
 			if ( capabilities.logarithmicDepthBuffer ) {
 
 
 
@@ -1730,7 +1815,27 @@ function WebGLRenderer( parameters ) {
 
 				material.isShaderMaterial ||
 
 				material.isShaderMaterial ||
 
 				material.skinning ) {
 
 				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 );
 
+
 
+				}
 
 
 
 			}
 
 			}

+ 10 - 1
src/renderers/webgl/WebGLCapabilities.js
查看文件 

@@ -86,6 +86,13 @@ function WebGLCapabilities( gl, extensions, parameters ) {
 
 
 
 	var maxSamples = isWebGL2 ? gl.getParameter( gl.MAX_SAMPLES ) : 0;
 
 	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 {
 
 	return {
 
 
 
 		isWebGL2: isWebGL2,
 
 		isWebGL2: isWebGL2,
 
@@ -110,7 +117,9 @@ function WebGLCapabilities( gl, extensions, parameters ) {
 
 		floatFragmentTextures: floatFragmentTextures,
 
 		floatFragmentTextures: floatFragmentTextures,
 
 		floatVertexTextures: floatVertexTextures,
 
 		floatVertexTextures: floatVertexTextures,
 
 
 
-		maxSamples: maxSamples
 
+		maxSamples: maxSamples,
 
+
 
+		multiview: multiview
 
 
 
 	};
 
 	};

+ 105 - 0
src/renderers/webgl/WebGLMultiview.js
查看文件 

@@ -0,0 +1,105 @@
 
+
 
+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 };

+ 45 - 6
src/renderers/webgl/WebGLProgram.js
查看文件 

@@ -427,14 +427,27 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 
 
 			parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
 
 			parameters.logarithmicDepthBuffer ? '#define USE_LOGDEPTHBUF' : '',
 
 			parameters.logarithmicDepthBuffer && ( capabilities.isWebGL2 || extensions.get( 'EXT_frag_depth' ) ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
 
 			parameters.logarithmicDepthBuffer && ( capabilities.isWebGL2 || extensions.get( 'EXT_frag_depth' ) ) ? '#define USE_LOGDEPTHBUF_EXT' : '',
 
-
 
 			'uniform mat4 modelMatrix;',
 
 			'uniform mat4 modelMatrix;',
 
-			'uniform mat4 modelViewMatrix;',
 
-			'uniform mat4 projectionMatrix;',
 
-			'uniform mat4 viewMatrix;',
 
-			'uniform mat3 normalMatrix;',
 
 			'uniform vec3 cameraPosition;',
 
 			'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 position;',
 
 			'attribute vec3 normal;',
 
 			'attribute vec3 normal;',
 
 			'attribute vec2 uv;',
 
 			'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' : '',
 
 			( ( 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;',
 
 			'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 ) ? '#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 ) ? 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 ) : '',
 
 			( parameters.toneMapping !== NoToneMapping ) ? getToneMappingFunction( 'toneMapping', parameters.toneMapping ) : '',
 
@@ -607,6 +626,15 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 		// GLSL 3.0 conversion
 
 		// GLSL 3.0 conversion
 
 		prefixVertex = [
 
 		prefixVertex = [
 
 			'#version 300 es\n',
 
 			'#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 attribute in',
 
 			'#define varying out',
 
 			'#define varying out',
 
 			'#define texture2D texture'
 
 			'#define texture2D texture'
 
@@ -614,6 +642,12 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 
 
 		prefixFragment = [
 
 		prefixFragment = [
 
 			'#version 300 es\n',
 
 			'#version 300 es\n',
 
+			renderer.vr.multiview ? [
 
+
 
+				'#extension GL_OVR_multiview2 : require',
 
+				'#define VIEW_ID gl_ViewID_OVR'
 
+
 
+			].join( '\n' ) : '',
 
 			'#define varying in',
 
 			'#define varying in',
 
 			isGLSL3ShaderMaterial ? '' : 'out highp vec4 pc_fragColor;',
 
 			isGLSL3ShaderMaterial ? '' : 'out highp vec4 pc_fragColor;',
 
 			isGLSL3ShaderMaterial ? '' : '#define gl_FragColor 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 vertexGlsl = prefixVertex + vertexShader;
 
 	var fragmentGlsl = prefixFragment + fragmentShader;
 
 	var fragmentGlsl = prefixFragment + fragmentShader;
 
 
 
+<<<<<<< HEAD
 
 	// console.log( '*VERTEX*', vertexGlsl );
 
 	// console.log( '*VERTEX*', vertexGlsl );
 
 	// console.log( '*FRAGMENT*', fragmentGlsl );
 
 	// console.log( '*FRAGMENT*', fragmentGlsl );
 
 
 
 	var glVertexShader = WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl );
 
 	var glVertexShader = WebGLShader( gl, gl.VERTEX_SHADER, vertexGlsl );
 
 	var glFragmentShader = WebGLShader( gl, gl.FRAGMENT_SHADER, fragmentGlsl );
 
 	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, glVertexShader );
 
 	gl.attachShader( program, glFragmentShader );
 
 	gl.attachShader( program, glFragmentShader );