Modifying the ShadowMap Example to Use NodeMaterials and NodeLights

Questions
, , ,
1

(edited 31 Oct 23)

USING NODE LIGHTS WITH WEBGPU (question)

I am trying to use Node Lights with WebGPU. Here is a CodePen version of the WebGPU ShadowMap from three.js examples. I have replaced the PhongMaterials with PhongNodeMaterials. How do I also change the SpotLight and DirectionLight to their Node equivalents?

USING NODE MATERIALS WITH WEBGPU (information only)

When I initially switched to using Node Materials with shadows enabled, my program took a big framerate hit. I have since learned that this was because I needed to make additional changes to my program.

Like many others, my program explicitly called a subroutine to render the scene (rendAll) which contained this first line:

	requestAnimationFrame(rendAll);

To fix the problem, I merely needed to remove the above line from the subroutine, add the following render instruction:

	renderer.setAnimationLoop(rendAll);

and then remove the program call to rendAll (since the renderer is now making the call).

The ShadowMap example already did this correctly.