Editor: Update path tracer to latest version (#28239)

* Upgrade path tracer to use a new version

* Update materials separately

editor/index.html

@@ -52,8 +52,8 @@
 					"three/addons/": "../examples/jsm/",
 
 					"three/examples/": "../examples/",
-					"three-gpu-pathtracer": "https://cdn.jsdelivr.net/npm/[email protected]9/build/index.module.js",
-					"three-mesh-bvh": "https://cdn.jsdelivr.net/npm/[email protected].3/build/index.module.js"
+					"three-gpu-pathtracer": "https://cdn.jsdelivr.net/npm/[email protected].21/build/index.module.js",
+					"three-mesh-bvh": "https://cdn.jsdelivr.net/npm/[email protected].4/build/index.module.js"
 				}
 			}
 		</script>

editor/js/Viewport.Pathtracer.js

@@ -1,169 +1,69 @@
-import * as THREE from 'three';
-import { FullScreenQuad } from 'three/examples/jsm/postprocessing/Pass.js';
-import {
-	PathTracingSceneGenerator,
-	PathTracingRenderer,
-	PhysicalPathTracingMaterial,
-	ProceduralEquirectTexture,
-} from 'three-gpu-pathtracer';
-
-function buildColorTexture( color ) {
-
-	const texture = new ProceduralEquirectTexture( 4, 4 );
-	texture.generationCallback = ( polar, uv, coord, target ) => {
-
-		target.copy( color );
-
-	};
-
-	texture.update();
-
-	return texture;
-
-}
+import { WebGLPathTracer } from 'three-gpu-pathtracer';
 
 function ViewportPathtracer( renderer ) {
 
-	let generator = null;
-	let pathtracer = null;
-	let quad = null;
-	let hdr = null;
+	let pathTracer = null;
 
 	function init( scene, camera ) {
 
-		if ( pathtracer === null ) {
-
-			generator = new PathTracingSceneGenerator();
+		if ( pathTracer === null ) {
 
-			pathtracer = new PathTracingRenderer( renderer );
-			pathtracer.setSize( renderer.domElement.offsetWidth, renderer.domElement.offsetHeight );
-			pathtracer.alpha = true;
-			pathtracer.camera = camera;
-			pathtracer.material = new PhysicalPathTracingMaterial();
-			pathtracer.tiles.set( 3, 4 );
-
-			quad = new FullScreenQuad( new THREE.MeshBasicMaterial( {
-				map: pathtracer.target.texture,
-				blending: THREE.CustomBlending
-			} ) );
+			pathTracer = new WebGLPathTracer( renderer );
+			pathTracer.filterGlossyFactor = 0.5;
 
 		}
 
-		pathtracer.reset();
-
-		const { bvh, textures, materials, lights } = generator.generate( scene );
-
-		const ptGeometry = bvh.geometry;
-		const ptMaterial = pathtracer.material;
-
-		ptMaterial.bvh.updateFrom( bvh );
-		ptMaterial.attributesArray.updateFrom(
-			ptGeometry.attributes.normal,
-			ptGeometry.attributes.tangent,
-			ptGeometry.attributes.uv,
-			ptGeometry.attributes.color,
-		);
-		ptMaterial.materialIndexAttribute.updateFrom( ptGeometry.attributes.materialIndex );
-		ptMaterial.textures.setTextures( renderer, 2048, 2048, textures );
-		ptMaterial.materials.updateFrom( materials, textures );
-		ptMaterial.lights.updateFrom( lights );
-		ptMaterial.filterGlossyFactor = 0.5;
-
-		//
-
-		setBackground( scene.background, scene.backgroundBlurriness );
-		setEnvironment( scene.environment );
+		pathTracer.setScene( scene, camera );
 
 	}
 
 	function setSize( width, height ) {
 
-		if ( pathtracer === null ) return;
+		if ( pathTracer === null ) return;
 
-		pathtracer.setSize( width, height );
-		pathtracer.reset();
+		// path tracer size automatically updates based on the canvas
+		pathTracer.reset();
 
 	}
 
 	function setBackground( background, blurriness ) {
 
-		if ( pathtracer === null ) return;
-
-		const ptMaterial = pathtracer.material;
-
-		if ( background ) {
-
-			if ( background.isTexture ) {
+		if ( pathTracer === null ) return;
 
-				ptMaterial.backgroundMap = background;
-				ptMaterial.backgroundBlur = blurriness;
+		// update environment settings based on initialized scene fields
+		pathTracer.updateEnvironment();
 
-			} else if ( background.isColor ) {
-
-				ptMaterial.backgroundMap = buildColorTexture( background );
-				ptMaterial.backgroundBlur = 0;
-
-			}
-
-		} else {
+	}
 
-			ptMaterial.backgroundMap = buildColorTexture( new THREE.Color( 0 ) );
-			ptMaterial.backgroundBlur = 0;
+	function updateMaterials() {
 
-		}
+		if ( pathTracer === null ) return;
 
-		pathtracer.reset();
+		pathTracer.updateMaterials();
 
 	}
 
 	function setEnvironment( environment ) {
 
-		if ( pathtracer === null ) return;
-
-		const ptMaterial = pathtracer.material;
-
-		if ( environment && environment.isDataTexture === true ) {
-
-			// Avoid calling envMapInfo() with the same hdr
-
-			if ( environment !== hdr ) {
-
-				ptMaterial.envMapInfo.updateFrom( environment );
-				hdr = environment;
+		if ( pathTracer === null ) return;
 
-			}
-
-		} else {
-
-			ptMaterial.envMapInfo.updateFrom( buildColorTexture( new THREE.Color( 0 ) ) );
-
-		}
-
-		pathtracer.reset();
+		pathTracer.updateEnvironment();
 
 	}
 
 	function update() {
 
-		if ( pathtracer === null ) return;
+		if ( pathTracer === null ) return;
 
-		pathtracer.update();
-
-		if ( pathtracer.samples >= 1 ) {
-
-			renderer.autoClear = false;
-			quad.render( renderer );
-			renderer.autoClear = true;
-
-		}
+		pathTracer.renderSample();
 
 	}
 
 	function reset() {
 
-		if ( pathtracer === null ) return;
+		if ( pathTracer === null ) return;
 
-		pathtracer.reset();
+		pathTracer.updateCamera();
 
 	}
 
@@ -172,6 +72,7 @@ function ViewportPathtracer( renderer ) {
 		setSize: setSize,
 		setBackground: setBackground,
 		setEnvironment: setEnvironment,
+		updateMaterials: updateMaterials,
 		update: update,
 		reset: reset
 	};

editor/js/Viewport.js

@@ -462,7 +462,7 @@ function Viewport( editor ) {
 
 	signals.materialChanged.add( function () {
 
-		initPT();
+		updatePTMaterials();
 		render();
 
 	} );
@@ -777,6 +777,16 @@ function Viewport( editor ) {
 
 	}
 
+	function updatePTMaterials() {
+
+		if ( editor.viewportShading === 'realistic' ) {
+
+			pathtracer.updateMaterials();
+
+		}
+
+	}
+
 	function updatePT() {
 
 		if ( editor.viewportShading === 'realistic' ) {