From 61da2cb79d54d65ae98d33bc301a73b88ad0c797 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Sat, 27 Jul 2024 10:53:43 +0200 Subject: [PATCH 1/2] WebGPURenderer: Add `debug.getRawShader()`. --- examples/webgpu_tsl_editor.html | 27 ++++++++------------ src/renderers/common/Backend.js | 2 ++ src/renderers/common/Renderer.js | 7 ++++- src/renderers/webgl-fallback/WebGLBackend.js | 8 ++++++ src/renderers/webgpu/WebGPUBackend.js | 9 +++++++ 5 files changed, 36 insertions(+), 17 deletions(-) diff --git a/examples/webgpu_tsl_editor.html b/examples/webgpu_tsl_editor.html index 7a8d6600f3ec69..1c31a20c0052fe 100644 --- a/examples/webgpu_tsl_editor.html +++ b/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 ); @@ -108,7 +104,7 @@ }; let timeout = null; - let nodeBuilder = null; + let rawShader = null; const editorDOM = document.getElementById( 'source' ); const resultDOM = document.getElementById( 'result' ); @@ -158,11 +154,14 @@ const showCode = () => { - result.setValue( nodeBuilder[ options.shader + 'Shader' ] ); + result.setValue( rawShader[ options.shader + 'Shader' ] ); result.revealLine( 1 ); }; + const webGLRenderer = new THREE.WebGPURenderer( { forceWebGL: true } ); + webGLRenderer.init(); + const build = () => { try { @@ -173,21 +172,17 @@ mesh.material.fragmentNode = nodes.output; mesh.material.needsUpdate = true; - let NodeBuilder; - if ( options.output === 'WGSL' ) { - NodeBuilder = WGSLNodeBuilder; + rawShader = renderer.debug.getRawShader( mesh ); + } else if ( options.output === 'GLSL ES 3.0' ) { - NodeBuilder = GLSLNodeBuilder; + rawShader = webGLRenderer.debug.getRawShader( mesh ); } - nodeBuilder = new NodeBuilder( mesh, renderer ); - nodeBuilder.build(); - showCode(); // extra debug info @@ -195,9 +190,9 @@ /*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 ) { diff --git a/src/renderers/common/Backend.js b/src/renderers/common/Backend.js index d0c5ae4a1f3ca2..9dde1c8f77f51f 100644 --- a/src/renderers/common/Backend.js +++ b/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; diff --git a/src/renderers/common/Renderer.js b/src/renderers/common/Renderer.js index 41a2a4be917144..f7c8f97b0ad252 100644 --- a/src/renderers/common/Renderer.js +++ b/src/renderers/common/Renderer.js @@ -147,7 +147,12 @@ class Renderer { this.debug = { checkShaderErrors: true, - onShaderError: null + onShaderError: null, + getRawShader: ( object ) => { + + return backend.getRawShader( object ); + + } }; } diff --git a/src/renderers/webgl-fallback/WebGLBackend.js b/src/renderers/webgl-fallback/WebGLBackend.js index 50f8e4521fc080..9b9be4fa841089 100644 --- a/src/renderers/webgl-fallback/WebGLBackend.js +++ b/src/renderers/webgl-fallback/WebGLBackend.js @@ -1218,6 +1218,14 @@ class WebGLBackend extends Backend { } + getRawShader( object ) { + + const nodeBuilder = new GLSLNodeBuilder( object, this.renderer ); + nodeBuilder.build(); + + return { vertexShader: nodeBuilder.vertexShader, fragmentShader: nodeBuilder.fragmentShader }; + + } getMaxAnisotropy() { diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js index ecefa2c05e9209..6daa5d24f9edce 100644 --- a/src/renderers/webgpu/WebGPUBackend.js +++ b/src/renderers/webgpu/WebGPUBackend.js @@ -1339,6 +1339,15 @@ class WebGPUBackend extends Backend { } + getRawShader( object ) { + + const nodeBuilder = new WGSLNodeBuilder( object, this.renderer ); + nodeBuilder.build(); + + return { vertexShader: nodeBuilder.vertexShader, fragmentShader: nodeBuilder.fragmentShader }; + + } + copyTextureToTexture( srcTexture, dstTexture, srcRegion = null, dstPosition = null, level = 0 ) { let dstX = 0; From 7be37da7ff8652ef326f2d74b858491f2d5c14a0 Mon Sep 17 00:00:00 2001 From: sunag Date: Sat, 27 Jul 2024 13:34:44 -0300 Subject: [PATCH 2/2] Added getRawShaderAsync() --- examples/webgpu_tsl_editor.html | 19 ++++++++++++++----- src/renderers/common/Renderer.js | 15 +++++++++++++-- src/renderers/webgl-fallback/WebGLBackend.js | 9 --------- src/renderers/webgpu/WebGPUBackend.js | 9 --------- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/examples/webgpu_tsl_editor.html b/examples/webgpu_tsl_editor.html index 1c31a20c0052fe..1aaa83bef2efac 100644 --- a/examples/webgpu_tsl_editor.html +++ b/examples/webgpu_tsl_editor.html @@ -84,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 ); } ); @@ -160,9 +166,8 @@ }; const webGLRenderer = new THREE.WebGPURenderer( { forceWebGL: true } ); - webGLRenderer.init(); - const build = () => { + const build = async () => { try { @@ -172,17 +177,21 @@ mesh.material.fragmentNode = nodes.output; mesh.material.needsUpdate = true; + compiling = true; + if ( options.output === 'WGSL' ) { - rawShader = renderer.debug.getRawShader( mesh ); + rawShader = await renderer.debug.getRawShaderAsync( scene, camera, mesh ); } else if ( options.output === 'GLSL ES 3.0' ) { - rawShader = webGLRenderer.debug.getRawShader( mesh ); + rawShader = await webGLRenderer.debug.getRawShaderAsync( scene, camera, mesh ); } + compiling = false; + showCode(); // extra debug info @@ -192,7 +201,7 @@ console.log( '%c [ WGSL ] Vertex Shader ', style ); console.log( rawShader.vertexShader ); console.log( '%c [ WGSL ] Fragment Shader ', style ); - console.log( rawShader.fragmentShader );*/ + console.log( rawShader.fragmentShader );/**/ } catch ( e ) { diff --git a/src/renderers/common/Renderer.js b/src/renderers/common/Renderer.js index f7c8f97b0ad252..174a2c003f3e44 100644 --- a/src/renderers/common/Renderer.js +++ b/src/renderers/common/Renderer.js @@ -148,9 +148,20 @@ class Renderer { this.debug = { checkShaderErrors: true, onShaderError: null, - getRawShader: ( object ) => { + getRawShaderAsync: async ( scene, camera, object ) => { - return backend.getRawShader( 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 }; } }; diff --git a/src/renderers/webgl-fallback/WebGLBackend.js b/src/renderers/webgl-fallback/WebGLBackend.js index 9b9be4fa841089..5c769c62bec341 100644 --- a/src/renderers/webgl-fallback/WebGLBackend.js +++ b/src/renderers/webgl-fallback/WebGLBackend.js @@ -1218,15 +1218,6 @@ class WebGLBackend extends Backend { } - getRawShader( object ) { - - const nodeBuilder = new GLSLNodeBuilder( object, this.renderer ); - nodeBuilder.build(); - - return { vertexShader: nodeBuilder.vertexShader, fragmentShader: nodeBuilder.fragmentShader }; - - } - getMaxAnisotropy() { return this.capabilities.getMaxAnisotropy(); diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js index 6daa5d24f9edce..ecefa2c05e9209 100644 --- a/src/renderers/webgpu/WebGPUBackend.js +++ b/src/renderers/webgpu/WebGPUBackend.js @@ -1339,15 +1339,6 @@ class WebGPUBackend extends Backend { } - getRawShader( object ) { - - const nodeBuilder = new WGSLNodeBuilder( object, this.renderer ); - nodeBuilder.build(); - - return { vertexShader: nodeBuilder.vertexShader, fragmentShader: nodeBuilder.fragmentShader }; - - } - copyTextureToTexture( srcTexture, dstTexture, srcRegion = null, dstPosition = null, level = 0 ) { let dstX = 0;