Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Merge pull request #16316 from fernandojsg/ovr_multiview2

Multiview support using OVR_multiview2
Mr.doob 5 жил өмнө
parent
95f8fd49f5 12d4698c97
commit
c680e4c715
8 өөрчлөгдсөн 639 нэмэгдсэн , 19 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 1 0
      examples/files.js
  2. 195 0
      examples/webvr_multiview.html
  3. 50 0
      src/renderers/WebGLMultiviewRenderTarget.js
  4. 61 11
      src/renderers/WebGLRenderer.js
  5. 8 1
      src/renderers/webgl/WebGLCapabilities.js
  6. 211 0
      src/renderers/webgl/WebGLMultiview.js
  7. 46 6
      src/renderers/webgl/WebGLProgram.js
  8. 67 1
      src/renderers/webgl/WebGLTextures.js

+ 1 - 0
examples/files.js
Файл харах 

@@ -337,6 +337,7 @@ var files = {
 
 		"webvr_cubes",
 
 		"webvr_dragging",
 
 		"webvr_lorenzattractor",
 
+		"webvr_multiview",
 
 		"webvr_panorama",
 
 		"webvr_paint",
 
 		"webvr_rollercoaster",

+ 195 - 0
examples/webvr_multiview.html
Файл харах 

@@ -0,0 +1,195 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webvr - multiview</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 type="module">
 
+
 
+			import * as THREE from '../build/three.module.js';
 
+			import { BoxLineGeometry } from './jsm/geometries/BoxLineGeometry.js';
 
+			import { WEBVR } from './jsm/vr/WebVR.js';
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			var container;
 
+			var camera, scene, renderer;
 
+
 
+			var room;
 
+			var stats;
 
+
 
+			var count = 0;
 
+			var radius = 0.02;
 
+			var normal = new THREE.Vector3();
 
+			var relativeVelocity = new THREE.Vector3();
 
+
 
+			var clock = new THREE.Clock();
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				//
 
+
 
+				var canvas = document.createElement( 'canvas' );
 
+
 
+
 
+				// Currently OVR_multiview2 is supported just on WebGL2 non-multisampled contexts
 
+				// so we must create the context manually ensuring `antialias` is set to false
 
+				//
 
+				// There is an ongoing discussion on how to add multisampled multiview support
 
+				// on the Khronos Group's WebGL repo: https://github.com/KhronosGroup/WebGL/issues/2912
 
+				// as soon as that will get solved we will update the code so it will be
 
+				// transparent for the user and you could use this extension with or without multisampled
 
+				// contexts
 
+				var context = canvas.getContext( 'webgl2', { antialias: false } );
 
+
 
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 
+
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.vr.enabled = true;
 
+				container.appendChild( renderer.domElement );
 
+
 
+				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="https://threejs.org" target="_blank" rel="noopener">three.js</a> webvr - multiview<br/>';
 
+				info.innerHTML += renderer.capabilities.multiview ? `<span style="color: #33ff33"><b>OVR_multiview2</b> is supported in your browser</span>` :
 
+					`<span style="color: #ff3333"><b>OVR_multiview2</b> is not supported or enabled in your browser</span>`;
 
+
 
+				container.appendChild( info );
 
+
 
+				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 BoxLineGeometry( 6, 6, 6, 10, 10, 10 ),
 
+					new THREE.LineBasicMaterial( { color: renderer.capabilities.multiview ? 0x99ff99 : 0xff3333 } )
 
+				);
 
+				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 );
 
+
 
+				for ( var i = 0; i < 2000; 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 = 2 * Math.random() - 1;
 
+					object.userData.velocity.y = 2 * Math.random() - 1;
 
+					object.userData.velocity.z = 2 * Math.random() - 1;
 
+
 
+					room.add( object );
 
+
 
+				}
 
+
 
+				//
 
+
 
+				document.body.appendChild( WEBVR.createButton( renderer ) );
 
+
 
+				//
 
+
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				renderer.setAnimationLoop( render );
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				//
 
+				stats.update();
 
+
 
+				var delta = clock.getDelta();
 
+
 
+				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.y = - object.userData.velocity.y;
 
+
 
+					}
 
+
 
+					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;
 
+
 
+					}
 
+
 
+				}
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 50 - 0
src/renderers/WebGLMultiviewRenderTarget.js
Файл харах 

@@ -0,0 +1,50 @@
 
+/**
 
+ * @author fernandojsg / http://fernandojsg.com
 
+ * @author Takahiro https://github.com/takahirox
 
+ */
 
+
 
+import { WebGLRenderTarget } from './WebGLRenderTarget.js';
 
+
 
+function WebGLMultiviewRenderTarget( width, height, numViews, options ) {
 
+
 
+	WebGLRenderTarget.call( this, width, height, options );
 
+
 
+	this.depthBuffer = false;
 
+	this.stencilBuffer = false;
 
+
 
+	this.numViews = numViews;
 
+
 
+}
 
+
 
+WebGLMultiviewRenderTarget.prototype = Object.assign( Object.create( WebGLRenderTarget.prototype ), {
 
+
 
+	constructor: WebGLMultiviewRenderTarget,
 
+
 
+	isWebGLMultiviewRenderTarget: true,
 
+
 
+	copy: function ( source ) {
 
+
 
+		WebGLRenderTarget.prototype.copy.call( this, source );
 
+
 
+		this.numViews = source.numViews;
 
+
 
+		return this;
 
+
 
+	},
 
+
 
+	setNumViews: function ( numViews ) {
 
+
 
+		if ( this.numViews !== numViews ) {
 
+
 
+			this.numViews = numViews;
 
+			this.dispose();
 
+
 
+		}
 
+
 
+		return this;
 
+
 
+	}
 
+
 
+} );
 
+
 
+export { WebGLMultiviewRenderTarget };

+ 61 - 11
src/renderers/WebGLRenderer.js
Файл харах 

@@ -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';
 
 
@@ -312,6 +313,10 @@ function WebGLRenderer( parameters ) {
 
 
 	this.vr = vr;
 
 
+	// Multiview
 
+
 
+	var multiview = new WebGLMultiview( _this, _gl );
 
+
 
 	// shadow map
 
 
 	var shadowMap = new WebGLShadowMap( _this, objects, capabilities.maxTextureSize );
 
@@ -1175,6 +1180,12 @@ function WebGLRenderer( parameters ) {
 
 
 		}
 
 
+		if ( capabilities.multiview ) {
 
+
 
+			multiview.attachCamera( camera );
 
+
 
+		}
 
+
 
 		//
 
 
 		background.render( currentRenderList, scene, camera, forceClear );
 
@@ -1229,6 +1240,12 @@ function WebGLRenderer( parameters ) {
 
 
 		state.setPolygonOffset( false );
 
 
+		if ( capabilities.multiview ) {
 
+
 
+			multiview.detachCamera( camera );
 
+
 
+		}
 
+
 
 		if ( vr.enabled ) {
 
 
 			vr.submitFrame();
 
@@ -1375,19 +1392,27 @@ function WebGLRenderer( parameters ) {
 
 
 				_currentArrayCamera = camera;
 
 
-				var cameras = camera.cameras;
 
+				if ( capabilities.multiview ) {
 
+
 
+					renderObject(	object, scene, camera, geometry, material, group );
 
+
 
+				} else {
 
+
 
+					var cameras = camera.cameras;
 
 
-				for ( var j = 0, jl = cameras.length; j < jl; j ++ ) {
 
+					for ( var j = 0, jl = cameras.length; j < jl; j ++ ) {
 
 
-					var camera2 = cameras[ j ];
 
+						var camera2 = cameras[ j ];
 
 
-					if ( object.layers.test( camera2.layers ) ) {
 
+						if ( object.layers.test( camera2.layers ) ) {
 
 
-						state.viewport( _currentViewport.copy( camera2.viewport ) );
 
+							state.viewport( _currentViewport.copy( camera2.viewport ) );
 
 
-						currentRenderState.setupLights( camera2 );
 
+							currentRenderState.setupLights( camera2 );
 
 
-						renderObject( object, scene, camera2, geometry, material, group );
 
+							renderObject( object, scene, camera2, geometry, material, group );
 
+
 
+						}
 
 
 					}
 
 
@@ -1682,7 +1707,15 @@ function WebGLRenderer( parameters ) {
 
 
 		if ( refreshProgram || _currentCamera !== camera ) {
 
 
-			p_uniforms.setValue( _gl, 'projectionMatrix', camera.projectionMatrix );
 
+			if ( program.numMultiviewViews > 0 ) {
 
+
 
+				multiview.updateCameraProjectionMatricesUniform( camera, p_uniforms );
 
+
 
+			} else {
 
+
 
+				p_uniforms.setValue( _gl, 'projectionMatrix', camera.projectionMatrix );
 
+
 
+			}
 
 
 			if ( capabilities.logarithmicDepthBuffer ) {
 
 
@@ -1730,7 +1763,15 @@ function WebGLRenderer( parameters ) {
 
 				material.isShaderMaterial ||
 
 				material.skinning ) {
 
 
-				p_uniforms.setValue( _gl, 'viewMatrix', camera.matrixWorldInverse );
 
+				if ( program.numMultiviewViews > 0 ) {
 
+
 
+					multiview.updateCameraViewMatricesUniform( camera, p_uniforms );
 
+
 
+				} else {
 
+
 
+					p_uniforms.setValue( _gl, 'viewMatrix', camera.matrixWorldInverse );
 
+
 
+				}
 
 
 			}
 
 
@@ -1935,8 +1976,17 @@ function WebGLRenderer( parameters ) {
 
 
 		// common matrices
 
 
-		p_uniforms.setValue( _gl, 'modelViewMatrix', object.modelViewMatrix );
 
-		p_uniforms.setValue( _gl, 'normalMatrix', object.normalMatrix );
 
+		if ( program.numMultiviewViews > 0 ) {
 
+
 
+			multiview.updateObjectMatricesUniforms( object, camera, p_uniforms );
 
+
 
+		} else {
 
+
 
+			p_uniforms.setValue( _gl, 'modelViewMatrix', object.modelViewMatrix );
 
+			p_uniforms.setValue( _gl, 'normalMatrix', object.normalMatrix );
 
+
 
+		}
 
+
 
 		p_uniforms.setValue( _gl, 'modelMatrix', object.matrixWorld );
 
 
 		return program;

+ 8 - 1
src/renderers/webgl/WebGLCapabilities.js
Файл харах 

@@ -86,6 +86,10 @@ function WebGLCapabilities( gl, extensions, parameters ) {
 
 
 	var maxSamples = isWebGL2 ? gl.getParameter( gl.MAX_SAMPLES ) : 0;
 
 
+	var multiviewExt = extensions.get( 'OVR_multiview2' );
 
+	var multiview = isWebGL2 && !! multiviewExt && ! gl.getContextAttributes().antialias;
 
+	var maxMultiviewViews = multiview ? gl.getParameter( multiviewExt.MAX_VIEWS_OVR ) : 0;
 
+
 
 	return {
 
 
 		isWebGL2: isWebGL2,
 
@@ -110,7 +114,10 @@ function WebGLCapabilities( gl, extensions, parameters ) {
 
 		floatFragmentTextures: floatFragmentTextures,
 
 		floatVertexTextures: floatVertexTextures,
 
 
-		maxSamples: maxSamples
 
+		maxSamples: maxSamples,
 
+
 
+		multiview: multiview,
 
+		maxMultiviewViews: maxMultiviewViews
 
 
 	};

+ 211 - 0
src/renderers/webgl/WebGLMultiview.js
Файл харах 

@@ -0,0 +1,211 @@
 
+/**
 
+ * @author fernandojsg / http://fernandojsg.com
 
+ * @author Takahiro https://github.com/takahirox
 
+ */
 
+
 
+import { WebGLMultiviewRenderTarget } from '../WebGLMultiviewRenderTarget.js';
 
+import { Matrix3 } from '../../math/Matrix3.js';
 
+import { Matrix4 } from '../../math/Matrix4.js';
 
+import { Vector2 } from '../../math/Vector2.js';
 
+
 
+function WebGLMultiview( renderer, gl ) {
 
+
 
+	var DEFAULT_NUMVIEWS = 2;
 
+
 
+	var capabilities = renderer.capabilities;
 
+	var properties = renderer.properties;
 
+
 
+	var maxNumViews = capabilities.maxMultiviewViews;
 
+
 
+	var renderTarget, currentRenderTarget;
 
+	var mat3, mat4, cameraArray, renderSize;
 
+
 
+	function getCameraArray( camera ) {
 
+
 
+		if ( camera.isArrayCamera ) return camera.cameras;
 
+
 
+		cameraArray[ 0 ] = camera;
 
+
 
+		return cameraArray;
 
+
 
+	}
 
+
 
+	//
 
+
 
+	function updateCameraProjectionMatricesUniform( camera, uniforms ) {
 
+
 
+		var cameras = getCameraArray( camera );
 
+
 
+		for ( var i = 0; i < cameras.length; i ++ ) {
 
+
 
+			mat4[ i ].copy( cameras[ i ].projectionMatrix );
 
+
 
+		}
 
+
 
+		uniforms.setValue( gl, 'projectionMatrices', mat4 );
 
+
 
+	}
 
+
 
+	function updateCameraViewMatricesUniform( camera, uniforms ) {
 
+
 
+		var cameras = getCameraArray( camera );
 
+
 
+		for ( var i = 0; i < cameras.length; i ++ ) {
 
+
 
+			mat4[ i ].copy( cameras[ i ].matrixWorldInverse );
 
+
 
+		}
 
+
 
+		uniforms.setValue( gl, 'viewMatrices', mat4 );
 
+
 
+	}
 
+
 
+	function updateObjectMatricesUniforms( object, camera, uniforms ) {
 
+
 
+		var cameras = getCameraArray( camera );
 
+
 
+		for ( var i = 0; i < cameras.length; i ++ ) {
 
+
 
+			mat4[ i ].multiplyMatrices( cameras[ i ].matrixWorldInverse, object.matrixWorld );
 
+			mat3[ i ].getNormalMatrix( mat4[ i ] );
 
+
 
+		}
 
+
 
+		uniforms.setValue( gl, 'modelViewMatrices', mat4 );
 
+		uniforms.setValue( gl, 'normalMatrices', mat3 );
 
+
 
+	}
 
+
 
+	function isMultiviewCompatible( camera ) {
 
+
 
+		if ( ! camera.isArrayCamera ) return true;
 
+
 
+		var cameras = camera.cameras;
 
+
 
+		if ( cameras.length > maxNumViews ) return false;
 
+
 
+		for ( var i = 1, il = cameras.length; i < il; i ++ ) {
 
+
 
+			if ( cameras[ 0 ].viewport.z !== cameras[ i ].viewport.z ||
 
+				cameras[ 0 ].viewport.w !== cameras[ i ].viewport.w ) return false;
 
+
 
+		}
 
+
 
+		return true;
 
+
 
+	}
 
+
 
+	function resizeRenderTarget( camera ) {
 
+
 
+		if ( currentRenderTarget ) {
 
+
 
+			renderSize.set( currentRenderTarget.width, currentRenderTarget.height );
 
+
 
+		} else {
 
+
 
+			renderer.getDrawingBufferSize( renderSize );
 
+
 
+		}
 
+
 
+		if ( camera.isArrayCamera ) {
 
+
 
+			var viewport = camera.cameras[ 0 ].viewport;
 
+
 
+			renderTarget.setSize( viewport.z, viewport.w );
 
+
 
+			renderTarget.setNumViews( camera.cameras.length );
 
+
 
+		} else {
 
+
 
+			renderTarget.setSize( renderSize.x, renderSize.y );
 
+			renderTarget.setNumViews( DEFAULT_NUMVIEWS );
 
+
 
+		}
 
+
 
+	}
 
+
 
+	function attachCamera( camera ) {
 
+
 
+		if ( ! isMultiviewCompatible( camera ) ) return;
 
+
 
+		currentRenderTarget = renderer.getRenderTarget();
 
+		resizeRenderTarget( camera );
 
+		renderer.setRenderTarget( renderTarget );
 
+
 
+	}
 
+
 
+	function detachCamera( camera ) {
 
+
 
+		if ( renderTarget !== renderer.getRenderTarget() ) return;
 
+
 
+		renderer.setRenderTarget( currentRenderTarget );
 
+		flush( camera );
 
+
 
+	}
 
+
 
+	function flush( camera ) {
 
+
 
+		var srcRenderTarget = renderTarget;
 
+		var numViews = srcRenderTarget.numViews;
 
+
 
+		var srcFramebuffers = properties.get( srcRenderTarget ).__webglViewFramebuffers;
 
+
 
+		var viewWidth = srcRenderTarget.width;
 
+		var viewHeight = srcRenderTarget.height;
 
+
 
+		if ( camera.isArrayCamera ) {
 
+
 
+			for ( var i = 0; i < numViews; i ++ ) {
 
+
 
+				var viewport = camera.cameras[ i ].viewport;
 
+
 
+				var x1 = viewport.x;
 
+				var y1 = viewport.y;
 
+				var x2 = x1 + viewport.z;
 
+				var y2 = y1 + viewport.w;
 
+
 
+				gl.bindFramebuffer( gl.READ_FRAMEBUFFER, srcFramebuffers[ i ] );
 
+				gl.blitFramebuffer( 0, 0, viewWidth, viewHeight, x1, y1, x2, y2, gl.COLOR_BUFFER_BIT, gl.NEAREST );
 
+
 
+			}
 
+
 
+		} else {
 
+
 
+			gl.bindFramebuffer( gl.READ_FRAMEBUFFER, srcFramebuffers[ 0 ] );
 
+			gl.blitFramebuffer( 0, 0, viewWidth, viewHeight, 0, 0, renderSize.x, renderSize.y, gl.COLOR_BUFFER_BIT, gl.NEAREST );
 
+
 
+		}
 
+
 
+	}
 
+
 
+
 
+	if ( renderer.capabilities.multiview ) {
 
+
 
+		renderTarget = new WebGLMultiviewRenderTarget( 0, 0, DEFAULT_NUMVIEWS );
 
+
 
+		renderSize = new Vector2();
 
+		mat4 = [];
 
+		mat3 = [];
 
+		cameraArray = [];
 
+
 
+		var maxViews = capabilities.maxMultiviewViews;
 
+
 
+		for ( var i = 0; i < maxViews; i ++ ) {
 
+
 
+			mat4[ i ] = new Matrix4();
 
+			mat3[ i ] = new Matrix3();
 
+
 
+		}
 
+
 
+	}
 
+
 
+
 
+	this.attachCamera = attachCamera;
 
+	this.detachCamera = detachCamera;
 
+	this.updateCameraProjectionMatricesUniform = updateCameraProjectionMatricesUniform;
 
+	this.updateCameraViewMatricesUniform = updateCameraViewMatricesUniform;
 
+	this.updateObjectMatricesUniforms = updateObjectMatricesUniforms;
 
+
 
+}
 
+
 
+export { WebGLMultiview };

+ 46 - 6
src/renderers/webgl/WebGLProgram.js
Файл харах 

@@ -340,6 +340,9 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 
 	var prefixVertex, prefixFragment;
 
 
+	var renderTarget = renderer.getRenderTarget();
 
+	var numMultiviewViews = renderTarget && renderTarget.isWebGLMultiviewRenderTarget ? renderTarget.numViews : 0;
 
+
 
 	if ( material.isRawShaderMaterial ) {
 
 
 		prefixVertex = [
 
@@ -427,14 +430,29 @@ 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;',
 
 
+			numMultiviewViews > 0 ? [
 
+				'uniform mat4 modelViewMatrices[' + numMultiviewViews + '];',
 
+				'uniform mat3 normalMatrices[' + numMultiviewViews + '];',
 
+				'uniform mat4 viewMatrices[' + numMultiviewViews + '];',
 
+				'uniform mat4 projectionMatrices[' + numMultiviewViews + '];',
 
+
 
+				'#define modelViewMatrix modelViewMatrices[VIEW_ID]',
 
+				'#define normalMatrix normalMatrices[VIEW_ID]',
 
+				'#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 +569,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;',
 
 
+			numMultiviewViews > 0 ? [
 
+
 
+				'uniform mat4 viewMatrices[' + numMultiviewViews + '];',
 
+				'#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 +631,15 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 		// GLSL 3.0 conversion
 
 		prefixVertex = [
 
 			'#version 300 es\n',
 
+
 
+			numMultiviewViews > 0 ? [
 
+
 
+				'#extension GL_OVR_multiview2 : require',
 
+				'layout(num_views = ' + numMultiviewViews + ') in;',
 
+				'#define VIEW_ID gl_ViewID_OVR'
 
+
 
+			].join( '\n' ) : '',
 
+
 
 			'#define attribute in',
 
 			'#define varying out',
 
 			'#define texture2D texture'
 
@@ -614,6 +647,12 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 
 		prefixFragment = [
 
 			'#version 300 es\n',
 
+			numMultiviewViews > 0 ? [
 
+
 
+				'#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',
 
@@ -771,6 +810,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 	this.program = program;
 
 	this.vertexShader = glVertexShader;
 
 	this.fragmentShader = glFragmentShader;
 
+	this.numMultiviewViews = numMultiviewViews;
 
 
 	return this;

+ 67 - 1
src/renderers/webgl/WebGLTextures.js
Файл харах 

@@ -260,6 +260,21 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 
 		}
 
 
+		if ( renderTarget.isWebGLMultiviewRenderTarget ) {
 
+
 
+			_gl.deleteTexture( renderTargetProperties.__webglColorTexture );
 
+			_gl.deleteTexture( renderTargetProperties.__webglDepthStencilTexture );
 
+
 
+			info.memory.textures -= 2;
 
+
 
+			for ( var i = 0, il = renderTargetProperties.__webglViewFramebuffers.length; i < il; i ++ ) {
 
+
 
+				_gl.deleteFramebuffer( renderTargetProperties.__webglViewFramebuffers[ i ] );
 
+
 
+			}
 
+
 
+		}
 
+
 
 		properties.remove( renderTarget.texture );
 
 		properties.remove( renderTarget );
 
 
@@ -946,6 +961,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 
 		var isCube = ( renderTarget.isWebGLRenderTargetCube === true );
 
 		var isMultisample = ( renderTarget.isWebGLMultisampleRenderTarget === true );
 
+		var isMultiview = ( renderTarget.isWebGLMultiviewRenderTarget === true );
 
 		var supportsMips = isPowerOfTwo( renderTarget ) || capabilities.isWebGL2;
 
 
 		// Setup framebuffer
 
@@ -998,6 +1014,56 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 
 				}
 
 
+			} else if ( isMultiview ) {
 
+
 
+				if ( capabilities.multiview ) {
 
+
 
+					var width = renderTarget.width;
 
+					var height = renderTarget.height;
 
+					var numViews = renderTarget.numViews;
 
+
 
+					_gl.bindFramebuffer( _gl.FRAMEBUFFER, renderTargetProperties.__webglFramebuffer );
 
+
 
+					var ext = extensions.get( 'OVR_multiview2' );
 
+
 
+					info.memory.textures += 2;
 
+
 
+					var colorTexture = _gl.createTexture();
 
+					_gl.bindTexture( _gl.TEXTURE_2D_ARRAY, colorTexture );
 
+					_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, width, height, numViews, 0, _gl.RGBA, _gl.UNSIGNED_BYTE, null );
 
+					ext.framebufferTextureMultiviewOVR( _gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, colorTexture, 0, 0, numViews );
 
+
 
+					var depthStencilTexture = _gl.createTexture();
 
+					_gl.bindTexture( _gl.TEXTURE_2D_ARRAY, depthStencilTexture );
 
+					_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, width, height, numViews, 0, _gl.DEPTH_STENCIL, _gl.UNSIGNED_INT_24_8, null );
 
+					ext.framebufferTextureMultiviewOVR( _gl.FRAMEBUFFER, _gl.DEPTH_STENCIL_ATTACHMENT, depthStencilTexture, 0, 0, numViews );
 
+
 
+					var viewFramebuffers = new Array( numViews );
 
+					for ( var i = 0; i < numViews; ++ i ) {
 
+
 
+						viewFramebuffers[ i ] = _gl.createFramebuffer();
 
+						_gl.bindFramebuffer( _gl.FRAMEBUFFER, viewFramebuffers[ i ] );
 
+						_gl.framebufferTextureLayer( _gl.FRAMEBUFFER, _gl.COLOR_ATTACHMENT0, colorTexture, 0, i );
 
+
 
+					}
 
+
 
+					renderTargetProperties.__webglColorTexture = colorTexture;
 
+					renderTargetProperties.__webglDepthStencilTexture = depthStencilTexture;
 
+					renderTargetProperties.__webglViewFramebuffers = viewFramebuffers;
 
+
 
+					_gl.bindFramebuffer( _gl.FRAMEBUFFER, null );
 
+					_gl.bindTexture( _gl.TEXTURE_2D_ARRAY, null );
 
+
 
+				} else {
 
+
 
+					console.warn( 'THREE.WebGLRenderer: WebGLMultiviewRenderTarget can only be used with WebGL2 and Multiview extension support.' );
 
+
 
+				}
 
+
 
 			}
 
 
 		}
 
@@ -1023,7 +1089,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 
 			state.bindTexture( _gl.TEXTURE_CUBE_MAP, null );
 
 
-		} else {
 
+		} else if ( ! isMultiview ) {
 
 
 			state.bindTexture( _gl.TEXTURE_2D, textureProperties.__webglTexture );
 
 			setTextureParameters( _gl.TEXTURE_2D, renderTarget.texture, supportsMips );