Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Average last frame times on the multiview demo

Fernando Serrano 6 years ago
parent
9c7a8ba0d0
commit
898eff7594
5 changed files with 21 additions and 26 deletions
Split View Show Diff Stats
  1. 13 6
      examples/webvr_ballshooter_multiview.html
  2. 6 10
      src/renderers/WebGLRenderer.js
  3. 1 1
      src/renderers/webgl/WebGLCapabilities.js
  4. 1 1
      src/renderers/webgl/WebGLMultiview.js
  5. 0 8
      src/renderers/webgl/WebGLProgram.js

+ 13 - 6
examples/webvr_ballshooter_multiview.html
View File 

@@ -1,7 +1,7 @@
 
 <!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)`;
 
 
 			}

+ 6 - 10
src/renderers/WebGLRenderer.js
View File 

@@ -87,7 +87,7 @@ function WebGLRenderer( parameters ) {
 
 		 * Enables error checking and reporting when shader programs are being compiled
 
 		 * @type {boolean}
 
 		 */
 
-		checkShaderErrors: true
 
+		checkShaderErrors: false
 
 	};
 
 
 	// clearing
 
@@ -318,7 +318,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
 
 
@@ -1388,7 +1388,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 );
 
 
@@ -1748,7 +1747,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 ) );
 
@@ -1757,7 +1756,7 @@ function WebGLRenderer( parameters ) {
 
 
 					p_uniforms.setValue( _gl, 'projectionMatrices', [ camera.projectionMatrix, camera.projectionMatrix ] );
 
 
-			}
 
+				}
 
 
 			} else {
 
 
@@ -1813,17 +1812,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 ] );
 
 
 					}

+ 1 - 1
src/renderers/webgl/WebGLCapabilities.js
View File 

@@ -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 {

+ 1 - 1
src/renderers/webgl/WebGLMultiview.js
View File 

@@ -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 );

+ 0 - 8
src/renderers/webgl/WebGLProgram.js
View File 

@@ -644,16 +644,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 );