How to use vertexNode of NodeMaterial

Questions
,
1

I set vertexNode like this below, but It always occurs an error. And there are few examples to show how to use it. Can anyone help me please?

const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const material2 = new THREE.NodeMaterial({
});
let viewProj = tsl.modelViewProjection();
	viewProj = viewProj.setZ(viewProj.w);
material2.vertexNode = viewProj;

TypeError: Cannot read properties of undefined (reading 'getNodeType')
    at Proxy.getNodeType (three.webgpu.js?t=1723636822710&v=68c56a24:40115:20)
    at Proxy.setupVarying (three.webgpu.js?t=1723636822710&v=68c56a24:40129:22)
    at Proxy.setup (three.webgpu.js?t=1723636822710&v=68c56a24:40145:8)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38598:34)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38610:17)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38895:16)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38610:17)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38610:17)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38895:16)
    at Proxy.build (three.webgpu.js?t=1723636822710&v=68c56a24:38610:17) []
2

@sunag Excuse me, can you help me please?

3

I am working with NodeMaterial too, but I have no idea. Your code seems fine, maybe it will work in r168? @sunag

4

You tried add a material.colorNode = color( 0xffffff ); for NodeMaterial base class, sorry, let me know if that’s the case and I’ll add some warning messages.

5

After Adding colorNode, it works. So when vertexNode is set, the colorNode should be set too.

6

@sunag I’ve found that if logarithmicDepthBuffer is true, the renderpline also break down. The relevant nodes are ModelViewProjectionNode and ViewportDepthNode. It seems that vertexNode doesn’t work with logarithmic depth. My threejs version is r167, and I don’t if it works fine in the latest version.

image
image1078Ă—492 65.6 KB

7

Does the error message disappear when you try to test this?

material.depthNode = 0.5;  //just for a simple test

The logarithmicDepthBuffer works very nicely. I’m working a lot with it.
But I do all of this with wgslFn and therefore with own shaders. I haven’t yet looked into how this works with the corresponding node element. The logarithmicDepthBuffer works as mentioned but exactly as it should.

8

Yes, I tried it. You are absolutely right. Does this mean you must set value for depthNode when vertexNode is set. Or is it a bug to fix?

9

That was just for testing, because if you don’t use the depthNode when you use the vertexNode with active logDepthBuffer, you’ll get your error message. Instead of the 0.5 which I only mentioned for testing purposes, you need the correct node from the node system. However, I don’t know it and that’s why I simply gave you the 0.5 so that there is something in it.

I do all of this with wgslFn, so I can’t guarantee that the node “depth” is the right one for your way. Import the node “depth” from three/tsl and assign it to the depthNode

material.depthNode = depth;

I’m looking in the forum to see if there is an open question somewhere about how to use the logarithmicDepthBuffer in WebGPU. Then I can add a wgslFn example.

wgsl is not analogue to glsl even though there are many analogies. The clear differences become apparent when it comes to depth. The depthNode is not a bug fix but an elementary necessity to serve the depth in wgsl.

10

I added an example to this question in the forum

11

That’s exactly what I met. If there is some documents or comments to explain why depthNode should be set, it would be much better.

12

In webgl you set the depth from the fragment shader. But not in WebGPU. This is due to WebGPU’s modern and efficient pipeline. The depthNode is not made on the whim of the three.js developers, but rather a useful node to be able to control the depth since, as far as I know, this is processed in the WebGPU pipeline in the same stage as the vertex shader before the fragment shader. WebGPU works differently than WebGL. Therefore, there are things in WebGPU that have no analogy to WebGL.
I don’t know the WebGPU pipeline at its deepest level either, but I knew that I wasn’t allowed to use my WebGL habits as a benchmark. WebGPU is not a further development of WebGl! WebGPU is something new. There are many analogies, but they also exist between electric cars and combustion engine cars. Nevertheless, at their core there are different technologies with huge differences. I hope my example helps

1 Like
13

Do you have a summary of your experience/observations? I think you’re the person working with it the most.

14

No, unfortunately not. Besides my job and my current project, I simply don’t have any time left to write documentation. There are simply not enough hours in the day. Therefore, I hope that my ocean repo on github, which I have to update from r164 ​​to r167.1 or better, r168, will help. I also try to link codePens that are as simple as possible when I find the time.

1 Like