Controlling WebGPU blending

I’m porting some shaders from glsl to tsl but don’t know how to make materials fade to the color behind them rather than fade to white which seems to be the default.
Additionally, when I set the opacity on a red color to 0 it seems to suddenly switch to a turquoise color.

colorNode expects a vec3. Try it with opacityNode:

I didn’t use colorNode in the example because the shaders I’m porting use signed distance fields which require discarding fragments according to some equation. Is there any way to get the blending from colorNode with the flexibility from fragmentNode?

Also, I haven’t been able to find a good resource on how to control the node graph for these shaders, but if there’s a way I can keep most of the default shader logic for MeshBasicNodeMaterial and insert a node that handles the discarding according to a signed distance field, that would be even better.

Sorry, I’ve missed that you used fragmentNode. Then maybe like so? three.js dev template - module - JSFiddle - Code Playground

Thanks, that solves it. If there is a simple way to do it by modeling the sdf as a node let me know.