Add multiview status on example

examples/webvr_ballshooter_multiview.html

@@ -44,23 +44,12 @@
 			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);
+        const urlParams = new URLSearchParams(window.location.search);
+        const multiview = urlParams.has('enableMultiview');
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x505050 );
@@ -111,6 +100,29 @@
 
 				//
 
+				var info = document.createElement( 'div' );
+				info.style.position = 'absolute';
+				info.style.top = '10px';
+				info.style.width = '100%';
+				info.style.textAlign = 'center';
+
+				function colorize( value ) {
+
+					return value ? '<b style="color:#3f3">true</b>' : '<b style="color:#f33">false</b>';
+
+				}
+
+        // @todo Change enabled for requested and check renderer.vr.multiview
+				info.innerHTML = '<b>OVR_multiview2</b> demo<br/>requested: ' + colorize(multiview) + ` <a href="${multiview ? '?' : '?enableMultiview'}">toggle</a>`
+					+ `<br/>available: ${ colorize( renderer.multiview.isAvailable() ) }<br/>enabled: ${ colorize( renderer.multiview.isEnabled() ) }<br/><br/>`;
+				container.appendChild( info );
+				ms = document.createElement('div');
+				ms.innerHTML = '';
+				info.appendChild(ms);
+
+				//+ (multiview ? '<b style="color:#3f3">true</b>' : '<b style="color:#f33">false</b>')
+				//
+
 				document.body.appendChild( WEBVR.createButton( renderer ) );
 
 				// controllers

src/renderers/WebGLRenderer.js

@@ -62,7 +62,7 @@ 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,
+		_multiviewRequested = parameters.multiview !== undefined ? parameters.multiview : false,
 
 		_alpha = parameters.alpha !== undefined ? parameters.alpha : false,
 		_depth = parameters.depth !== undefined ? parameters.depth : true,
@@ -318,8 +318,8 @@ function WebGLRenderer( parameters ) {
 
 	this.vr = vr;
 
-	var multiviewObject = new WebGLMultiview(_multiview, _gl, _canvas, extensions, capabilities );
-	var multiviewEnabled = this.multiviewEnabled = multiviewObject.isEnabled();
+	var multiview = this.multiview = new WebGLMultiview(_multiviewRequested, _gl, _canvas, extensions, capabilities );
+	var multiviewEnabled = this.multiviewEnabled = multiview.isEnabled();
 
 	// shadow map
 
@@ -1373,7 +1373,7 @@ function WebGLRenderer( parameters ) {
 
 		if ( multiviewEnabled ) {
 
-			multiviewObject.bindMultiviewFrameBuffer( camera );
+			multiview.bindMultiviewFrameBuffer( camera );
 
 			_gl.disable( _gl.SCISSOR_TEST );
 
@@ -1406,7 +1406,7 @@ function WebGLRenderer( parameters ) {
 
 			}
 
-			multiviewObject.unbindMultiviewFrameBuffer( camera );
+			multiview.unbindMultiviewFrameBuffer( camera );
 
 		} else {
 

src/renderers/webgl/WebGLMultiview.js

@@ -1,3 +1,7 @@
+/**
+ * @author fernandojsg / http://fernandojsg.com
+ */
+
 function WebGLMultiview( requested, gl, canvas, extensions, capabilities ) {
 
 	this.isAvailable = function () {

src/renderers/webgl/WebGLProgram.js

@@ -415,10 +415,10 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 			renderer.multiviewEnabled ? [
 				'uniform mat4 modelViewMatrix;',
-				'uniform mat4 projectionMatrices[2];',
 				'uniform mat3 normalMatrix;',
-
 				'uniform mat4 viewMatrices[2];',
+				'uniform mat4 projectionMatrices[2];',
+
 				'#define viewMatrix viewMatrices[VIEW_ID]',
 				'#define projectionMatrix projectionMatrices[VIEW_ID]'