How to use custom shaders in WebGPU

Questions
,
1

I’m looking for an example of using a WGSL shader in which the texels are stored in a texture at the end and a second shader then accesses this texture

3

There may be some online resources that could be useful such as this shader editor found after a quick search… no doubt there will be quite a lot of support for an online application of this type soon…

4

The link is very helpful. I was able to practice working with WGSL shaders diligently. I am now becoming more familiar with WGSL shaders.

But I still don’t know how I can use them in 3js.
I don’t recognize the 3js interface. By that I mean something like a WGSLShaderMaterial that bundles the WGSL uniforms, vertexshader, fragmentshader into a usable material like ShaderMaterial or RawShaderMaterial.

Does it already exist or am I looking for it in vain because it doesn’t exist yet?
I know the two WGSL examples from the example materials.

But I still don’t see how vertex shaders and uniforms are used. If I want to influence vertex positions I need the vertex shader

1 Like
5

Currently you are expected to use the Nodes system to create custom shaders, the WebGPU render works with this to ‘wire up’ the bindings for uniforms vertex buffers/attributes etc automatically. The nodes system allows you to write what looks almost plain javascript and the renderer produces the WGSL code for you. Unfortunately it isn’t documented (yet), but with the help of the examples and the source code a lot of things are already possible. I have produced a version of the thick lines Lines2 example material for instance.

There isn’t an equivalent mechanism to add plain shader code in yourself although you can add sections of raw code into generated shaders.

1 Like
6 
//tslFn = three-shader-language-Function
const customShaderNode = tslFn( ( input ) => {
  return input.uvTex.xyz;
});

const params = {
  uvTex: texture( uvTexture ),
}

const material = new MeshBasicNodeMaterial();
material.colorNode = customShaderNode( params );

Please correct me if I am wrong in my interpretation.

With the “MeshBasicNodeMaterial()” vertexShader and FragmentShader are automatically created in the background. If I want to give these shaders more functionality, I can do that with
“tslFn = three-shader-language-function” or if I use WGSL with
“wgslFn = web-gpu-shader-language-function”

The input and the whole example correspond to a function within a shader.

If I want to influence the fragment color I have to assign the function to the “colorNode”.
If I want to influence the vertex position I have to assign the function to the “positionNode”.

I think this is a very important element that probably interests many.
How do I add uniforms (floats, textures, vectors) which I can then update with “uniformsNeedUpdate”. Because the “MeshBasicNodeMaterial()” has the function “uniformsNeedUpdate”. How to access the attributes is not clear to me either.

I find the three-shader language elegant. It saves you a lot, especially if you make big shaders. But without documentation, it’s difficult to get in there. In my opinion, a nodesystem is graphically simpler. Cryptically, I find shaders easier.
I imported “attribute” and “uniform” from the node system, but I still don’t recognize how to use them with the “MeshBasicNodeMaterial()” so that all “tslFn” have access to them.

7

I’m having the same issue trying to port text sdf rendering over to webgpu. I can’t figure out how to replicate this simple shader over to the node system. Is it a colorNode transformation of the texture and a color and opacity uniform ? Im unsure how to set or get such color and opacity uniform.

I need it portable to both renderers. As webgpu can’t do WebXR yet so WebGL is still needed when WebXR is needed.

8

I’m now so deep into the node system that I can translate my webgl2 shaders into wgsl code with wgslFn.

I have a mini example here that might help you to understand how to access and change the parameters:

9

I’m trying to do something that supports both renderers but seems like it can’t. This is what I came up with to manipulate the color node rather than position. But no idea how to add the median shader method. All those math methods are imports. This breaks trying to do with webgl renderer so maybe I might have to just do straight up wgsl instead.