WebGPU Support

.eslintrc.json

@@ -13,7 +13,7 @@
 			}
 		],
 		"quotes": [ "error", "single" ],
-		"indent": [ "error", "tab" ],
+		"indent": [ "error", "tab", { "SwitchCase": 1 } ],
 		"no-var": [ "error" ]
 	},
     	"overrides": [

example/screenshotList.html

@@ -82,6 +82,8 @@
 					<option value="model-viewer">model-viewer</option>
 					<option value="rhodonite">rhodonite</option>
 					<option value="stellar">stellar</option>
+					<option value="vray">vray</option>
+					<option value="blender-cycles">blender-cycles</option>
 					<option value="prior-commit">prior-commit</option>
 				</select>
 			</label>

example/screenshotList.js

@@ -1,4 +1,4 @@
-const CONFIG_URL = 'https://raw.githubusercontent.com/google/model-viewer/master/packages/render-fidelity-tools/test/config.json';
+const CONFIG_URL = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Render-Fidelity-Generator/refs/heads/main/test/config.json';
 const COMMITS_URL = 'https://api.github.com/repos/gkjohnson/three-gpu-pathtracer/commits?sha=screenshots';
 
 ( async () => {
@@ -51,7 +51,7 @@ const COMMITS_URL = 'https://api.github.com/repos/gkjohnson/three-gpu-pathtracer
 
 			} else {
 
-				url2 = `https://raw.githubusercontent.com/google/model-viewer/master/packages/render-fidelity-tools/test/goldens/${ name }/${ imageType }-golden.png`;
+				url2 = `https://media.githubusercontent.com/media/KhronosGroup/glTF-Render-Fidelity-Generator/refs/heads/main/test/goldens/${ name }/${ imageType }-golden.png`;
 
 			}
 

example/utils/LoaderElement.js

@@ -142,12 +142,29 @@ export class LoaderElement {
 
 	}
 
-	setSamples( count, compiling = false ) {
+	setSamples( count, compiling = false, detailedSamples = null ) {
 
 		if ( compiling ) {
 
 			this._samples.innerText = 'compiling shader...';
 
+		} else if ( detailedSamples !== null ) {
+
+			const {
+				min,
+				max,
+				avg,
+				perSecond,
+			} = detailedSamples;
+
+			this._samples.innerText = `[${ min }..${ max }], avg = ${ avg } samples`;
+
+			if ( perSecond ) {
+
+				this._samples.innerText += ` (${ perSecond.toFixed( 1 ) } samples/sec)`;
+
+			}
+
 		} else {
 
 			this._samples.innerText = `${ Math.floor( count ) } samples`;

example/viewerTest.js

@@ -10,27 +10,34 @@ import {
 	Group,
 	Sphere,
 	Box3,
+	Vector2,
 } from 'three';
+import { WebGPURenderer } from 'three/webgpu';
 import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
 import { HDRLoader } from 'three/examples/jsm/loaders/HDRLoader.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
 import { WebGLPathTracer } from 'three-gpu-pathtracer';
+import { WebGPUPathTracer } from 'three-gpu-pathtracer/webgpu';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { ParallelMeshBVHWorker } from 'three-mesh-bvh/worker';
 import { LoaderElement } from './utils/LoaderElement.js';
 
-const CONFIG_URL = 'https://raw.githubusercontent.com/google/model-viewer/master/packages/render-fidelity-tools/test/config.json';
-const BASE_URL = 'https://raw.githubusercontent.com/google/model-viewer/master/packages/render-fidelity-tools/test/config/';
+const CONFIG_URL = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Render-Fidelity-Generator/refs/heads/main/test/config.json';
+const BASE_URL = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Render-Fidelity-Generator/refs/heads/main/test/renderers/three-gpu-pathtracer/';
 
 const urlParams = new URLSearchParams( window.location.search );
 const maxSamples = parseInt( urlParams.get( 'samples' ) ) || - 1;
 const hideUI = urlParams.get( 'hideUI' ) === 'true';
 const tiles = parseInt( urlParams.get( 'tiles' ) ) || 2;
 const scale = parseInt( urlParams.get( 'scale' ) ) || 1 / window.devicePixelRatio;
+const isWebGPU = urlParams.get( 'isWebGPU' ) === 'true';
 
 const params = {
 
+	isWebGPU,
+	useMegakernel: true,
+
 	enable: true,
 	bounces: 10,
 	transmissiveBounces: 10,
@@ -55,6 +62,9 @@ let pathTracer, renderer, camera, scene, controls;
 let loadingModel = false;
 let delaySamples = 0;
 let modelDatabase;
+let detailedSampleCount = null;
+let lastDetailedSample = 0;
+const detailedSampleInterval = 4;
 
 init();
 
@@ -78,19 +88,7 @@ async function init() {
 
 	}
 
-	// renderer
-	renderer = new WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
-	renderer.physicallyCorrectLights = true;
-	renderer.toneMapping = ACESFilmicToneMapping;
-	renderer.setClearAlpha( 0 );
-	containerEl.appendChild( renderer.domElement );
-
-	// path tracer
-	pathTracer = new WebGLPathTracer( renderer );
-	pathTracer.filterGlossyFactor = 0.5;
-	pathTracer.tiles.set( params.tiles );
-	pathTracer.setBVHWorker( new ParallelMeshBVHWorker() );
-	pathTracer.multipleImportanceSampling = params.multipleImportanceSampling;
+	await createRenderer( params.isWebGPU );
 
 	// scene
 	scene = new Scene();
@@ -116,6 +114,41 @@ async function init() {
 
 }
 
+async function createRenderer( isWebGPU ) {
+
+	if ( isWebGPU ) {
+
+		// renderer - WebGPU version
+		renderer = new WebGPURenderer( { antialias: true, trackTimestamp: false } );
+		await renderer.init();
+		renderer.toneMapping = ACESFilmicToneMapping;
+		renderer.setClearAlpha( 0 );
+		containerEl.appendChild( renderer.domElement );
+
+		// path tracer - WebGPU version
+		pathTracer = new WebGPUPathTracer( renderer );
+		pathTracer.useMegakernel( params.useMegakernel );
+
+	} else {
+
+		// renderer
+		renderer = new WebGLRenderer( { antialias: true, preserveDrawingBuffer: true } );
+		renderer.physicallyCorrectLights = true;
+		renderer.toneMapping = ACESFilmicToneMapping;
+		renderer.setClearAlpha( 0 );
+		containerEl.appendChild( renderer.domElement );
+
+		// path tracer
+		pathTracer = new WebGLPathTracer( renderer );
+		pathTracer.filterGlossyFactor = 0.5;
+		pathTracer.tiles.set( params.tiles );
+		pathTracer.setBVHWorker( new ParallelMeshBVHWorker() );
+		pathTracer.multipleImportanceSampling = params.multipleImportanceSampling;
+
+	}
+
+}
+
 function animate() {
 
 	requestAnimationFrame( animate );
@@ -127,6 +160,31 @@ function animate() {
 
 	}
 
+	if ( pathTracer.getRenderTime && pathTracer.getDetailedSampleCount ) {
+
+		const elapsed = pathTracer.getRenderTime() / 1000;
+		// Reset sample count state if no sample is taken yet
+		if ( elapsed < detailedSampleInterval ) {
+
+			detailedSampleCount = null;
+			lastDetailedSample = 0;
+
+		}
+
+		if ( elapsed - lastDetailedSample > detailedSampleInterval ) {
+
+			lastDetailedSample = Math.floor( elapsed / detailedSampleInterval ) * detailedSampleInterval;
+			pathTracer.getDetailedSampleCount().then( sampleCount => {
+
+				sampleCount.perSecond = sampleCount.avg / elapsed;
+				detailedSampleCount = sampleCount;
+
+			} );
+
+		}
+
+	}
+
 	imgEl.style.display = ! params.displayImage ? 'none' : 'inline-block';
 	imgEl.style.opacity = params.imageMode === 'side-by-side' ? 1.0 : params.imageOpacity;
 	imgEl.style.position = params.imageMode === 'side-by-side' ? 'initial' : 'absolute';
@@ -147,7 +205,7 @@ function animate() {
 
 		pathTracer.renderSample();
 
-	} else if ( delaySamples > 0 || ! params.enable ) {
+	} else if ( ( delaySamples > 0 || ! params.enable ) && renderer.initialized !== false ) {
 
 		delaySamples = Math.max( delaySamples - 1, 0 );
 		renderer.render( scene, camera );
@@ -161,7 +219,7 @@ function animate() {
 
 	}
 
-	loader.setSamples( pathTracer.samples, pathTracer.isCompiling );
+	loader.setSamples( pathTracer.samples, pathTracer.isCompiling, detailedSampleCount );
 
 }
 
@@ -234,6 +292,38 @@ function buildGui() {
 	} );
 
 	const pathTracingFolder = gui.addFolder( 'Path Tracer' );
+
+	let webgpuOptions = null;
+	pathTracingFolder.add( params, 'isWebGPU' ).onChange( v => {
+
+		const size = renderer.getSize( new Vector2() );
+		pathTracer.dispose();
+		containerEl.removeChild( renderer.domElement );
+		renderer.dispose();
+
+		webgpuOptions.show( v );
+
+		createRenderer( v ).then( () => {
+
+			renderer.setSize( size.x, size.y );
+			renderer.setPixelRatio( window.devicePixelRatio );
+			pathTracer.setScene( scene, camera );
+
+			onParamsChange();
+
+		} );
+
+	} );
+
+	webgpuOptions = pathTracingFolder.add( params, 'useMegakernel' );
+	webgpuOptions.onChange( () => {
+
+		pathTracer.useMegakernel( params.useMegakernel );
+		pathTracer.reset();
+
+	} );
+	webgpuOptions.show( params.isWebGPU );
+
 	pathTracingFolder.add( params, 'enable' );
 	pathTracingFolder.add( params, 'pause' );
 	pathTracingFolder.add( params, 'scale', 0.1, 1 ).onChange( onParamsChange );
@@ -261,7 +351,9 @@ function buildGui() {
 		'gltf-sample-viewer',
 		'model-viewer',
 		'rhodonite',
-		'stellar'
+		'stellar',
+		'vray',
+		'blender-cycles',
 	] ).onChange( updateImage );
 	comparisonFolder.add( params, 'imageOpacity', 0, 1.0 );
 	comparisonFolder.add( params, 'checkerboardTransparency' ).onChange( onParamsChange );
@@ -315,7 +407,7 @@ async function updateModel() {
 	const modelInfo = modelDatabase[ params.model ];
 	const {
 		verticalFoV = 45,
-		lighting = '../../../shared-assets/environments/lightroom_14b.hdr',
+		lighting = '../../../environments/lightroom_14b.hdr',
 	} = modelInfo;
 
 	let {
@@ -352,6 +444,11 @@ async function updateModel() {
 
 				}
 
+			} ).then( value => {
+
+				loader.setPercentage( 1 );
+				return value;
+
 			} ),
 		new Promise( resolve => manager.onLoad = resolve ),
 	] );
@@ -428,6 +525,6 @@ async function updateModel() {
 
 function updateImage() {
 
-	imgEl.src = `https://raw.githubusercontent.com/google/model-viewer/master/packages/render-fidelity-tools/test/goldens/${ params.model }/${ params.imageType }-golden.png`;
+	imgEl.src = `https://media.githubusercontent.com/media/KhronosGroup/glTF-Render-Fidelity-Generator/refs/heads/main/test/goldens/${ params.model }/${ params.imageType }-golden.png`;
 
 }

example/webgpu_primitives.html

@@ -0,0 +1,49 @@
+<html>
+	<head>
+		<title>Basic Primitives Path Tracing Example</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+		<style>
+			html, body {
+				margin: 0;
+				padding: 0;
+
+				/* transparent background checkerboard */
+				background-image: conic-gradient(#fff 25%, #eee 25%, #eee 50%, #fff 50%, #fff 75%, #eee 75%);
+				background-size: 20px 20px;
+			}
+
+			#info {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				font-family: 'Courier New', Courier, monospace;
+				color: white;
+				pointer-events: none;
+			}
+
+			#samples, #credits {
+
+				opacity: 0.5;
+				background-color: rgba( 0.0, 0.0, 0.0, 0.5 );
+				padding: 5px;
+				display: inline-block;
+
+			}
+
+			#corner-canvas {
+				position: fixed;
+				bottom: 0;
+				left: 0;
+				max-width: 500px;
+				max-height: 200px;
+				z-index: 1000;
+			}
+		</style>
+
+	</head>
+	<body>
+		<canvas id="corner-canvas" width="200" height="300"></canvas>
+		<script src="./webgpu_primitives.js" type="module"></script>
+	</body>
+</html>