Grid component is not compatible with NodeMaterial

[EvenZHAnglll]

• three version: 0.172.0
• @react-three/fiber version: 9.0.0-rc.4
• @react-three/drei version: 9.121.2
• node version: using bun 1.1.33
• npm (or yarn) version: using bun 1.1.33

Problem description:

I'm trying out the new TSL(Threejs Shading Language) and running it on WebGPU. However, when I added the Grid component into the Canvas, I encountered an error:

NodeMaterial: Material "ShaderMaterial" is not compatible.

Is Drei currently incompatible with WebGPU? It seems that TSL can only run on the WebGPU version at present. Can it be run on WebGL? Or do you have any other workarounds?

I found this in threejs forum

Custom materials based on ShaderMaterial, RawShaderMaterial and modifications via onBeforeCompile() won’t work with WebGPURenderer. This will be indeed the major migration task when moving to WebGPURenderer.

Relevant code:

my example code

      <Canvas
        camera={{ position: [6, 5, 10], fov: 40 }}
        gl={(canvas) => {
          const renderer = new WebGPURenderer({
            canvas: canvas as HTMLCanvasElement,
          });
          return renderer;
        }}
      >
        <Grid />
      </Canvas>

Suggested solution:

• Grid component compatible with WebGPU

[CodyJasonBennett]

No, it should not be expected for any library on NPM to be compatible with node materials or any unspecified or experimental technology. WebGPU and WGSL will remain in this state until it matures from working draft status to living standard, where it will be API stable and simply be up to browser support. In the meantime, libraries cannot implement this without code breaking or being written against a non-existent standard.

[EvenZHAnglll]

No, it should not be expected for any library on NPM to be compatible with node materials or any unspecified or experimental technology. WebGPU and WGSL will remain in this state until it matures from working draft status to living standard, where it will be API stable and simply be up to browser support. In the meantime, libraries cannot implement this without code breaking or being written against a non-existent standard.

Hey, thanks a lot for getting back to me. I got it now.

But I'm still a bit confused. I thought TSL was supposed to be compatible with both WebGL and WebGPU. So how come it only supports WebGPU right now? Or maybe I just haven't found the right way to use TSL in WebGL?

I think TSL has great potential to become a powerful and user-friendly tool. In the past, when writing shaders, we had to use string replacement, which was extremely troublesome and a real headache.

[CodyJasonBennett]

TSL and nodes materials are only supported in WebGPURenderer (which has a WebGL fallback). It is not supported in the current WebGLRenderer or any stable code the ecosystem currently relies on. For that, see mrdoob/three.js#30185.