Average last frame times on the multiview demo

03b1efa8 · Fernando Serrano · 96f46dfe · 03b1efa8 · 03b1efa8 · 03b1efa8
5 changed file
--- a/examples/webvr_ballshooter_multiview.html
+++ b/examples/webvr_ballshooter_multiview.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webvr - ball shooter</title>
+		<title>three.js webvr - ball shooter with multiview</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<style>
@@ -28,9 +28,12 @@

 			var container;
 			var ms;
+
 			var camera, scene, renderer;
 			var controller1, controller2;

+			var avgCounter = new Array(240, 0);
+
 			var room;

 			var count = 0;
@@ -118,12 +121,12 @@

 				}

-        // @todo Change enabled for requested and check renderer.vr.multiview
 				info.innerHTML = '<b>OVR_multiview2</b> demo<br/>requested: ' + colorize( multiview ) + ` <a href="?num=${ numObjects }&${ multiview ? '' : 'enableMultiview' }">toggle</a>`
 					+ `<br/>available: ${ colorize( renderer.multiview.isAvailable() ) }<br/>enabled: ${ colorize( renderer.multiview.isEnabled() ) }<br/>
 						${addNumLink(200)}
 						${addNumLink(500)}
 						${addNumLink(1000)}
+						${addNumLink(2500)}
 						${addNumLink(5000)}
 					<br/>`;
 				container.appendChild( info );
@@ -131,9 +134,6 @@
 				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
@@ -291,7 +291,14 @@

 				var ts = performance.now();
 				renderer.render( scene, camera );
-				ms.innerHTML = 'renderer.render time: ' + (performance.now() - ts).toFixed(2) + 'ms';
+				var trender = performance.now() - ts;
+
+				// Compute average of the last frames
+				for (var i = 0; i < avgCounter.length-1; ++i) avgCounter[i] = avgCounter[i+1];
+				avgCounter[avgCounter.length-1] = trender;
+				var avg = avgCounter.reduce(function(a, b) { return a + b; }) / avgCounter.length;
+
+				ms.innerHTML = `renderer.render time: ${ trender.toFixed( 2 ) }ms (avg: ${ avg.toFixed( 2 ) }ms)`;

 			}


--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -84,7 +84,7 @@ function WebGLRenderer( parameters ) {
 		 * Enables error checking and reporting when shader programs are being compiled
 		 * @type {boolean}
 		 */
-		checkShaderErrors: true
+		checkShaderErrors: false
 	};

 	// clearing
@@ -315,7 +315,7 @@ function WebGLRenderer( parameters ) {

 	this.vr = vr;

-	var multiview = this.multiview = new WebGLMultiview(_multiviewRequested, _gl, _canvas, extensions, capabilities );
+	var multiview = this.multiview = new WebGLMultiview( _multiviewRequested, _gl, _canvas, extensions, capabilities );

 	// shadow map

@@ -1385,7 +1385,6 @@ function WebGLRenderer( parameters ) {

 			}
 			_gl.viewport( 0, 0, width, height );
-			renderer.setViewport( 0, 0, width, height );

 			_gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT | _gl.STENCIL_BUFFER_BIT );

@@ -1745,7 +1744,7 @@ function WebGLRenderer( parameters ) {

 			if ( multiview.isEnabled() ) {

-				if ( false && vr.isPresenting() ) {
+				if ( camera.isArrayCamera ) {

 					// @todo Obviously remove the map :)
 					p_uniforms.setValue( _gl, 'projectionMatrices', camera.cameras.map( c => c.projectionMatrix ) );
@@ -1754,7 +1753,7 @@ function WebGLRenderer( parameters ) {

 					p_uniforms.setValue( _gl, 'projectionMatrices', [ camera.projectionMatrix, camera.projectionMatrix ] );

-			}
+				}

 			} else {

@@ -1810,17 +1809,14 @@ function WebGLRenderer( parameters ) {

 				if ( multiview.isEnabled() ) {

-					if ( vr.isPresenting() ) {
+					if ( camera.isArrayCamera ) {

 						// @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] );
+						p_uniforms.setValue( _gl, 'viewMatrices', [ camera.matrixWorldInverse, camera.matrixWorldInverse ] );

 					}


--- a/src/renderers/webgl/WebGLCapabilities.js
+++ b/src/renderers/webgl/WebGLCapabilities.js
@@ -88,7 +88,7 @@ function WebGLCapabilities( gl, extensions, parameters ) {

 	var multiviewExt = extensions.get( 'OVR_multiview2' );
 	var multiview = isWebGL2 && ( !! multiviewExt );
-	var maxMultiviewViews = multiview ? gl.getParameter(multiviewExt.MAX_VIEWS_OVR) : 1;
+	var maxMultiviewViews = multiview ? gl.getParameter( multiviewExt.MAX_VIEWS_OVR ) : 1;

 	return {


--- a/src/renderers/webgl/WebGLMultiview.js
+++ b/src/renderers/webgl/WebGLMultiview.js
@@ -45,7 +45,7 @@ function WebGLMultiview( requested, gl, canvas, extensions, capabilities ) {
 	};


-  // @todo Get ArrayCamera
+	// @todo Get ArrayCamera
 	this.createMultiviewRenderTargetTexture = function () {

 		var halfWidth = Math.floor( canvas.width * 0.5 );

--- a/src/renderers/webgl/WebGLProgram.js
+++ b/src/renderers/webgl/WebGLProgram.js
@@ -668,16 +668,8 @@ 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 );