Will direct/standalone WGSL support be included

Questions
,
1

Without TSL.

Thank you in advance.

2

I haven’t worked with TSL at all, but from reading the documentation, it seems like it is.

NodeMaterial has vertexNode and fragmentNode properties. It seems that you can write the entire shader within them, with some caveats (you still need to initialize and include the uniform nodes for example).

This, to me seems the same as:

const m = new ShaderMaterial()
m.vertexShader = ‘…’
m.fragmentShader = ‘…’

Basically its

const m = new NodeMaterial()
m.vertexNode = WgslFn('...')
m.fragmentNode = WgslFn('...')

With some gotchas on how you include the varyings and the uniforms (still TSL).

Again, i have never used TSL, these are just my assumptions. They could be completely and uterly wrong, because it does seem that no one has ever said that even something similar to ShaderMaterial will exist in the future versions of three. But judging from this documentation, i don’t think i can be terribly wrong here :slight_smile:

1 Like
3

Yes that’s how it’s done. Sadly it doesn’t really work “without TSL”
It’s also the most unpractical hybrid solution since you need both TSL features on top of your mandatory WGSL declaration to make it work smoothly. Maybe still useful as a starting point to learn pure WGSL?

very basic attempt using fragmentNode and passing some values
https://codepen.io/William-J-Jones/pen/raLgBqN?editors=1111

4

Maybe some imports from TSL are not needed (at least in this case)?

const resolution = new THREE.Vector2(innerWidth, innerHeight); // no vec2
const mat = new THREE.MeshBasicNodeMaterial();
mat.fragmentNode = customFragment(screenCoord, resolution); // no vec4

image
image615×453 26.9 KB

1 Like
5

fixed :sweat_smile: it also confirm you can mix the two
probably only WgslFn is mandatory, but i’m too lazy to look for a raw version of screenCoordinate

1 Like
6

Whats custom fragment?

7

This is the name of the WGSL function/node. It’s not a class, just a regular call, rename it as you wish.

const customFragment = wgslFn(`
    fn customFragment(screenCoord: vec2<f32>, resolution: vec2<f32>) -> vec3<f32> {
1 Like
8

I wonder why this isn’t being advertised.

1 Like
9

You can use WGSL in Three.js very well without TSL. It’s not completely native, but in my view that’s not a disadvantage. I have a smaller repo here that shows how I use WGSL code.

2 Likes