I understand and like a lot that the WebGPU renderer is setup as a modular system that allows adapting the shader code at the different pipeline steps using TSL. However, I have problems using this in practice.
For example, I want to modify the shadow mapping of the THREE.PointLight.
My approach would be to create a MyPointLightNode derived from THREE.PointLightNode, override the setupShadowNode() and register it in the StandardNodeLibrary
However, whenever I want to modify TSL code, I stumble over similar issues, that are best explained by below custom MyPointLightNode, that should for now just do the identical thing as the original THREE.PointLightNode
class MyPointLightNode extends THREE.PointLightNode {
constructor(light?: THREE.PointLight | null) {
super(light)
}
override setupShadowNode() {
return new PointShadowNode(this.light!, undefined as any) //(1)
//return TSL.pointShadow(this.light!) //(2)
}
}
The first line (1) in yields
THREE.TSL: No stack defined for assign operation. Make sure the assign is inside a Fn().
utils.js:149
THREE.TSL: TypeError: Cannot read properties of null (reading 'If')
The second line (2) works, BUT pointShadow is defined as
export const pointShadow = ( light, shadow ) => new PointShadowNode( light, shadow );
so it should be identical?
Of course I would later create my own MyPointLightShadowNode, derived from PointShadowNode, but I already fail at this point.
What am I doing wrong, or is something like this not supported?
