I’ve found that setting Drei’s Html component’s prop occlude="blending", which seems to be the only way to currently get html/3d depth to place nice, will cause Html, Leva and any similar html overlay to not render to the screen anymore. I’ve included a demo recreating this here
I’ve set up some leva controls for the blend modes on post processing’s noise effect, my own custom effect, and to set occlude to “blending” (though once you do that the leva controls will disappear if either of the two are set to normal.)
I’m afraid there are two different things going on here but I’m having trouble addressing both. One is, with my custom effect that I would like to render in BlendingFunction.NORMAL, the input with the space removed for occlude="blending" to show through to the rendered html is being replaced with black pixels by my glsl script. Two is that even with something like leva that is normally not even occluded but simply rendered on top of the canvas, when occlude="blending" is on, it simply does not render to the screen.
I have a slight inclination that something with the order of the WebGlRenderer and the CSS3DRenderer is creating the problem, but I’m still pretty new to three, glsl and webGL in generally so I’m having a bit of trouble wrapping my head around how to debug this.