From 783220d35c9b25cd97e694e886c75b911a4c15d4 Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:51:37 -0800
Subject: [PATCH] add screenshot and performance metrics

---
 .../screenshots/webgpu_compute_prefix_sum.jpg | Bin 0 -> 6557 bytes
 examples/webgpu_compute_prefix_sum.html       |  32 +++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 examples/screenshots/webgpu_compute_prefix_sum.jpg

diff --git a/examples/screenshots/webgpu_compute_prefix_sum.jpg b/examples/screenshots/webgpu_compute_prefix_sum.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..feabfb2f71420d0d585610444771779c0d216c6e
GIT binary patch
literal 6557
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

literal 0
HcmV?d00001

diff --git a/examples/webgpu_compute_prefix_sum.html b/examples/webgpu_compute_prefix_sum.html
index 063107e54d0df2..758ff359368ad6 100644
--- a/examples/webgpu_compute_prefix_sum.html
+++ b/examples/webgpu_compute_prefix_sum.html
@@ -12,7 +12,7 @@
 			<br /> Prefix sum performance comparisons.
 			<br /> Each display loops through initialization, sum, and validation steps.
 			<br/>
-			<div id="local_swap" style="
+			<div id="left_side" style="
 				position: absolute;
 				top: 150px;
 				left: 0;
@@ -25,7 +25,7 @@
 				pointer-events: none;
 				text-align: left;
 			"></div>
-			<div id="global_swap" style="
+			<div id="right_side" style="
 			position: absolute;
 			top: 150px;
 			right: 0;
@@ -66,23 +66,26 @@
 				rightGridDim: uniform( Math.sqrt( maxElements ) ),
 				validate: uniform( 0 ),
 				// Algorithm being displayed
-				'Left Method Name': 'Fake Prefix',
+				'Left Method Name': 'Fake',
 				'Right Method Name': 'Kogge-Stone',
 			};
 
 			const algorithms = [
 				'Sklansky',
 				'Kogge-Stone',
-				'Fake Prefix',
+				'Fake',
 				'Incorrect'
 			];
 
 			const gui = new GUI();
-
 			gui.add( effectController, 'Left Method Name', algorithms );
-
 			gui.add( effectController, 'Right Method Name', algorithms );
 
+			const timestamps = {
+				left_side: document.getElementById( 'left_side' ),
+				right_side: document.getElementById( 'right_side' )
+			};
+
 			// Initialize Two Views
 			init( false );
 			init( true );
@@ -134,7 +137,7 @@
 					// Emulates a prefix sum by manually assigning the instanceIndex to the storage buffer.
 					// This method should only be used to validate the correctness of new algorithms, and not as
 					// a yardstick for performance.
-					'Fake Prefix': {
+					'Fake': {
 						threads: [ maxElements ],
 						runMethod: ( currentElements ) => {
 
@@ -373,9 +376,12 @@
 				}
 
 				let stepType = 'Init';
+				renderer.info.autoReset = false;
 
 				 const stepAnimation = async function () {
 
+					renderer.info.reset();
+
 					const methodName = rightSide ?
 						effectController[ 'Right Method Name' ] :
 						effectController[ 'Left Method Name' ];
@@ -404,7 +410,6 @@
 						case 'Validate': {
 
 							const currentElements = new Uint32Array( await renderer.getArrayBufferAsync( currentElementsBuffer ) );
-							//console.log( currentElements );
 
 							effectController.validate.value = 1;
 							stepType = 'Init';
@@ -415,6 +420,8 @@
 
 						case 'Init': {
 
+							effectController.validate.value = 0;
+
 							renderer.compute( method.initFunction );
 
 							stepType = 'Run';
@@ -429,7 +436,14 @@
 
 					renderer.render( scene, camera );
 
-					effectController.validate.value = 0;
+					console.log( renderer.info );
+
+					timestamps[ rightSide ? 'right_side' : 'left_side' ].innerHTML = `
+
+							Compute ${rightSide ? effectController[ 'Right Method Name' ] : effectController[ 'Left Method Name' ]} Prefix Sum: ${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
+							Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.render.timestamp.toFixed( 6 )}ms
+					`;
+
 
 					setTimeout( stepAnimation, 1000 );