WebGPURenderer: Add `debug.getRawShaderAsync()`. (#28997)

* WebGPURenderer: Add `debug.getRawShader()`.

* Added getRawShaderAsync()

---------

Co-authored-by: sunag <sunagbrasil@gmail.com>

examples/webgpu_tsl_editor.html

@@ -52,10 +52,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from '../src/renderers/webgpu/WebGPURenderer.js';
-			import WGSLNodeBuilder from '../src/renderers/webgpu/nodes/WGSLNodeBuilder.js';
-			import GLSLNodeBuilder from '../src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js';
-
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			init();
@@ -76,7 +72,7 @@
 
 				const rendererDOM = document.getElementById( 'renderer' );
 
-				const renderer = new WebGPURenderer( { antialias: true } );
+				const renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( 200, 200 );
@@ -88,8 +84,14 @@
 				const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( mesh );
 
+				//
+
+				let compiling = false;
+
 				renderer.setAnimationLoop( () => {
 
+					if ( compiling ) return;
+
 					renderer.render( scene, camera );
 
 				} );
@@ -108,7 +110,7 @@
 					};
 
 					let timeout = null;
-					let nodeBuilder = null;
+					let rawShader = null;
 
 					const editorDOM = document.getElementById( 'source' );
 					const resultDOM = document.getElementById( 'result' );
@@ -158,12 +160,14 @@ output = vec4( finalColor, opacity );
 
 					const showCode = () => {
 
-						result.setValue( nodeBuilder[ options.shader + 'Shader' ] );
+						result.setValue( rawShader[ options.shader + 'Shader' ] );
 						result.revealLine( 1 );
 
 					};
 
-					const build = () => {
+					const webGLRenderer = new THREE.WebGPURenderer( { forceWebGL: true } );
+
+					const build = async () => {
 
 						try {
 
@@ -173,20 +177,20 @@ output = vec4( finalColor, opacity );
 							mesh.material.fragmentNode = nodes.output;
 							mesh.material.needsUpdate = true;
 
-							let NodeBuilder;
+							compiling = true;
 
 							if ( options.output === 'WGSL' ) {
 
-								NodeBuilder = WGSLNodeBuilder;
+								rawShader = await renderer.debug.getRawShaderAsync( scene, camera, mesh );
+
 
 							} else if ( options.output === 'GLSL ES 3.0' ) {
 
-								NodeBuilder = GLSLNodeBuilder;
+								rawShader = await webGLRenderer.debug.getRawShaderAsync( scene, camera, mesh );
 
 							}
 
-							nodeBuilder = new NodeBuilder( mesh, renderer );
-							nodeBuilder.build();
+							compiling = false;
 
 							showCode();
 
@@ -195,9 +199,9 @@ output = vec4( finalColor, opacity );
 							/*const style = 'background-color: #333; color: white; font-style: italic; border: 2px solid #777; font-size: 22px;';
 
 							console.log( '%c  [ WGSL ] Vertex Shader      ', style );
-							console.log( nodeBuilder.vertexShader );
+							console.log( rawShader.vertexShader );
 							console.log( '%c  [ WGSL ] Fragment Shader    ', style );
-							console.log( nodeBuilder.fragmentShader );*/
+							console.log( rawShader.fragmentShader );/**/
 
 						} catch ( e ) {
 

src/renderers/common/Backend.js

@@ -99,6 +99,8 @@ class Backend {
 
 	hasFeature( /*name*/ ) { } // return Boolean
 
+	getRawShader( /*object*/ ) { } // return { vertexShader, fragmentShader }
+
 	getInstanceCount( renderObject ) {
 
 		const { object, geometry } = renderObject;

src/renderers/common/Renderer.js

@@ -147,7 +147,23 @@ class Renderer {
 
 		this.debug = {
 			checkShaderErrors: true,
-			onShaderError: null
+			onShaderError: null,
+			getRawShaderAsync: async ( scene, camera, object ) => {
+
+				await this.compileAsync( scene, camera );
+
+				const renderList = this._renderLists.get( scene, camera );
+				const renderContext = this._renderContexts.get( scene, camera, this._renderTarget );
+
+				const material = scene.overrideMaterial || object.material;
+
+				const renderObject = this._objects.get( object, material, scene, camera, renderList.lightsNode, renderContext );
+
+				const { fragmentShader, vertexShader } = renderObject.getNodeBuilderState();
+
+				return { fragmentShader, vertexShader };
+
+			}
 		};
 
 	}

src/renderers/webgl-fallback/WebGLBackend.js

@@ -1218,7 +1218,6 @@ class WebGLBackend extends Backend {
 
 	}
 
-
 	getMaxAnisotropy() {
 
 		return this.capabilities.getMaxAnisotropy();