From this topic, I found out how to mix two passes in TSL.
But if I noticed an unexpected behavior, as the opacity city decreases the rendered pass on top is getting “whiter”.
To reproduce: three.js dev template - module - JSFiddle - Code Playground
On this image you can see a smoothstep with alpha, that is supposed to be full “black”, but as the alpha decreased, the colored on the pass on top is getting “whiter”.
Am I doing something wrong ?
scenePassUI.background = new THREE.Color(0x0000ff);
This line has no effect. scenePassUI is a pass, not an instance of THREE.Scene. Backgrounds can only be configured for scenes.
Besides, keep in mind that you are working with a transparent canvas by default in WebGPURenderer so the white color you see is the color from the HTML background.
Would this approach work for you? three.js dev template - module - JSFiddle - Code Playground
You only blend the RGB colors of the passes. Alpha is fixed.
Absolutely thanks.