TSL Editor Example: Does not work because of 404 of three JS files

[boytchev]

Description

When trying the latest TSL Editor from the Three.js website (r167) I get 404 error for three JS files and the TSL Editor shows blank page.

GET https://threejs.org/src/renderers/webgpu/WebGPURenderer.js net::ERR_ABORTED 404 (Not Found)
webgpu_tsl_editor.html:56 
GET https://threejs.org/src/renderers/webgpu/nodes/WGSLNodeBuilder.js net::ERR_ABORTED 404 (Not Found)
webgpu_tsl_editor.html:57 
GET https://threejs.org/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js net::ERR_ABORTED 404 (Not Found)

Tried Chrome (with WebGPU) and FireFox (without WebGPU), the result is the same.

A direct link to one of the files https://threejs.org/src/renderers/webgpu/WebGPURenderer.js confirms the 404 error.

It might be a temporary network issue (that will resolve by itself in a few hours), or missing files, or wrong URLs.

Reproduction steps

1. Visit https://threejs.org/examples/#webgpu_tsl_editor
2. If the page is blank, see the JS console

Code

N/A

Live example

https://threejs.org/examples/#webgpu_tsl_editor

Screenshots

Page with the TSL Editor:

Direct visit to one of the 404 files:

Version

r167

Device

Desktop

Browser

Chrome, Firefox

OS

Windows

[Mugen87]

The links the example are not correct since the gh-pages branch has a different src directory.

How about we move WGSLNodeBuilder and GLSLNodeBuilder into the THREE namespace by updating Three.WebGPU.js? The src links could then be removed since the modules are imported over THREE.

[boytchev]

I'm not sure what is the best solution, as my guts say this is a political issue related to the design policy about what goes into THREE namespace and what stays outside it.

[Mugen87]

If we want to completely hide the builders from the users, the examples needs to be rewritten and the renderer a new API to report the raw shaders for a render item (like a mesh).

[Mugen87]

@sunag Maybe something like:

const output = 'WGSL'; // WGSL | GLSL;

const shader = renderer.debug.getRawShader( mesh, output );

console.log( shader.vertexShader, shader.fragmentShader );

[sunag]

I think it should return the code of the current backend, if the user want glsl, use new WebGPURenderer( { forceWebGL: true } ).

Maybe with this signature could work:

const shader = renderer.debug.getRawShader( scene, camera, mesh );