Update MaterialX WebViewer to use WebGPU

[ashwinbhat]

The MaterialX Web Viewer uses Three.js WebGL renderer. See relevant code here

With the recent addition MaterialX WebGPU Code Generator, enhancing the Web Viewer uses Three.js WebGPURenderer would be useful to demonstrate the new code generator to the community.

[scotbrew]

This looks feasible.

Dependencies:

• [x] Three.js supports WebGPU renderer
• [x] MaterialX generates GLSL code compliant with WGSL (as of MaterialX 1.39.4)
• [x] Conversion from GLSL code to WGSL

Details: As Three.js now provides a WebGPU renderer (see WebGPURenderer.js), the main thing required to implement in the MaterialX Web Viewer would be to have the WGSL-compliant GLSL (now generated by MaterialX as of version 1.39.4) converted into WGSL code, ideally with Javascript code inside the MaterialX Web Viewer. After doing some basic tests from the webgpu-test repository, it looks like that should be possible with the glslang.js and twgsl.js modules.

The next step would be to put together an experimental build of the MaterialX Web Viewer that uses these 3 technologies.

[kwokcb]

Adding some notes on status of investigation by Scott, Ashwin and myself:

• [x] Transpiling is straightforward either as a preprocess, or at runtime. For the viewer we would be looking at runtime.

  • Code gen -> glslang to get SPIR-V
  • SPIR-V to WGSL via tint or twsl which is the Bablyon wrapper for tint.
  • [ ] There are warnings / possible errors that show up that can be investigated / logged as issues against codegen.

• [ ] RawShaderMaterial seems to not be supported in Three.WebGPURenderer. This is the code path for WebGLRenderer now. Codegen produces raw shader so this could be a blocker.

  • [ ] Is using Bablyon a alternative? Note that it accepts both GLSL and WGSL. The former is transpiled on the fly. It also appears to still support raw shaders.
  • [ ] TSL appears to tbe sole route for WebGPU support. Some previous work as been done by ThreeJS folks to port MaterialX to TSL nodes but is incomplete and unsure if it's up-to-date especially for shading models.
  • [ ] TSL codegen could be an option but probably not worth looking at as this would be ThreeJS only.

• [ ] Infrastructure can be updated to get newer versions of empscripten, NodeJS and ThreeJS to get current level support.

  • [ ] Ashwin notes we should try for compatible versions with USD. (empscripten is 4.0.8 for e.g.)