[pull] dev from mrdoob:dev

examples/jsm/inspector/Inspector.js

@@ -79,6 +79,11 @@ class Inspector extends RendererInspector {
 				needsUpdate: false,
 				duration: .02,
 				time: 0
+			},
+			toggleGraph: {
+				needsUpdate: false,
+				duration: .02,
+				time: 0
 			}
 		};
 
@@ -463,6 +468,7 @@ class Inspector extends RendererInspector {
 
 		this.updateCycle( this.displayCycle.text );
 		this.updateCycle( this.displayCycle.graph );
+		this.updateCycle( this.displayCycle.toggleGraph );
 
 		if ( this.displayCycle.text.needsUpdate ) {
 
@@ -473,6 +479,17 @@ class Inspector extends RendererInspector {
 
 		}
 
+		if ( this.displayCycle.toggleGraph.needsUpdate ) {
+
+			if ( this.profiler.toggleGraph ) {
+
+				this.profiler.toggleGraph.addPoint( 'fps', this.fps );
+				this.profiler.toggleGraph.update();
+
+			}
+
+		}
+
 		if ( this.displayCycle.graph.needsUpdate ) {
 
 			this.performance.updateGraph( this, frame );
@@ -482,6 +499,7 @@ class Inspector extends RendererInspector {
 
 		this.displayCycle.text.needsUpdate = false;
 		this.displayCycle.graph.needsUpdate = false;
+		this.displayCycle.toggleGraph.needsUpdate = false;
 
 	}
 

examples/jsm/inspector/RendererInspector.js

@@ -191,88 +191,140 @@ export class RendererInspector extends InspectorBase {
 
 				const renderer = this.getRenderer();
 
-				await renderer.resolveTimestampsAsync( TimestampQuery.COMPUTE );
-				await renderer.resolveTimestampsAsync( TimestampQuery.RENDER );
+				if ( renderer.backend.hasTimestamp ) {
 
-				const computeFrames = renderer.backend.getTimestampFrames( TimestampQuery.COMPUTE );
-				const renderFrames = renderer.backend.getTimestampFrames( TimestampQuery.RENDER );
+					await renderer.resolveTimestampsAsync( TimestampQuery.COMPUTE );
+					await renderer.resolveTimestampsAsync( TimestampQuery.RENDER );
 
-				const frameIds = [ ...new Set( [ ...computeFrames, ...renderFrames ] ) ];
+					const computeFrames = renderer.backend.getTimestampFrames( TimestampQuery.COMPUTE );
+					const renderFrames = renderer.backend.getTimestampFrames( TimestampQuery.RENDER );
 
-				for ( const frameId of frameIds ) {
+					const frameIds = [ ...new Set( [ ...computeFrames, ...renderFrames ] ) ];
 
-					const frame = this.getFrameById( frameId );
+					for ( const frameId of frameIds ) {
 
-					if ( frame !== null ) {
+						const frame = this.getFrameById( frameId );
 
-						// resolve compute timestamps
+						if ( frame !== null ) {
 
-						if ( frame.resolvedCompute === false ) {
+							// resolve compute timestamps
+
+							if ( frame.resolvedCompute === false ) {
+
+								if ( frame.computes.length > 0 ) {
 
-							if ( frame.computes.length > 0 ) {
+									if ( computeFrames.includes( frameId ) ) {
 
-								if ( computeFrames.includes( frameId ) ) {
+										for ( const stats of frame.computes ) {
 
-									for ( const stats of frame.computes ) {
+											if ( renderer.backend.hasTimestampQuery( stats.uid ) ) {
 
-										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+												stats.gpu = renderer.backend.getTimestamp( stats.uid );
 
-											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+											} else {
 
-										} else {
+												stats.gpu = 0;
+												stats.gpuNotAvailable = true;
 
-											stats.gpu = 0;
-											stats.gpuNotAvailable = true;
+											}
 
 										}
 
+										frame.resolvedCompute = true;
+
 									}
 
+								} else {
+
 									frame.resolvedCompute = true;
 
 								}
 
-							} else {
-
-								frame.resolvedCompute = true;
-
 							}
 
-						}
+							// resolve render timestamps
 
-						// resolve render timestamps
+							if ( frame.resolvedRender === false ) {
 
-						if ( frame.resolvedRender === false ) {
+								if ( frame.renders.length > 0 ) {
 
-							if ( frame.renders.length > 0 ) {
+									if ( renderFrames.includes( frameId ) ) {
 
-								if ( renderFrames.includes( frameId ) ) {
+										for ( const stats of frame.renders ) {
 
-									for ( const stats of frame.renders ) {
+											if ( renderer.backend.hasTimestampQuery( stats.uid ) ) {
 
-										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+												stats.gpu = renderer.backend.getTimestamp( stats.uid );
 
-											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+											} else {
 
-										} else {
+												stats.gpu = 0;
+												stats.gpuNotAvailable = true;
 
-											stats.gpu = 0;
-											stats.gpuNotAvailable = true;
+											}
 
 										}
 
+										frame.resolvedRender = true;
+
 									}
 
+								} else {
+
 									frame.resolvedRender = true;
 
 								}
 
-							} else {
+							}
+
+							if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {
+
+								this.resolveFrame( frame );
+
+							}
+
+						}
+
+					}
+
+				} else {
 
-								frame.resolvedRender = true;
+					for ( const frame of this.frames ) {
+
+						if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {
+
+							continue;
+
+						}
+
+						const nextFrame = this.getFrameById( frame.frameId + 1 );
+
+						if ( nextFrame === null ) continue;
+
+						if ( frame.resolvedCompute === false ) {
+
+							for ( const stats of frame.computes ) {
+
+								stats.gpu = 0;
+								stats.gpuNotAvailable = true;
 
 							}
 
+							frame.resolvedCompute = true;
+
+						}
+
+						if ( frame.resolvedRender === false ) {
+
+							for ( const stats of frame.renders ) {
+
+								stats.gpu = 0;
+								stats.gpuNotAvailable = true;
+
+							}
+
+							frame.resolvedRender = true;
+
 						}
 
 						if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {

examples/jsm/inspector/tabs/Performance.js

@@ -249,7 +249,7 @@ class Performance extends Tab {
 		//
 
 		setText( this.frameStats.data[ 1 ], frame.cpu.toFixed( 2 ) );
-		setText( this.frameStats.data[ 2 ], frame.gpu.toFixed( 2 ) );
+		setText( this.frameStats.data[ 2 ], inspector.getRenderer().backend.hasTimestamp ? frame.gpu.toFixed( 2 ) : '-' );
 		setText( this.frameStats.data[ 3 ], frame.total.toFixed( 2 ) );
 
 		//

examples/jsm/inspector/tabs/Timeline.js

@@ -208,7 +208,8 @@ class Timeline extends Tab {
 		graphContainer.appendChild( this.graphSlider );
 
 		// Setup SVG from Graph
-		this.graph.domElement.style.width = '100%';
+		this.graph.domElement.style.width = '0';
+		this.graph.domElement.style.minWidth = '100%';
 		this.graph.domElement.style.height = '100%';
 		this.graphSlider.appendChild( this.graph.domElement );