Stacked planes transparency not working

[droplab]

Hi Martin!

Taking react-curtains for a spin and I'm coming across an issue I wanted to get your thoughts on. I'm finding that I can't seem to get planes with alpha transparency to render as expected (you can partially see the plane underneath the semi transparent one on top.) It looks like the alpha'd plane is punching a hole in the entire canvas and the html body background is showing through... 😕

I've tried combinations of the following and can't get it to work. The frag shader is very simple but perhaps there's an issue there?

Plane

• transparent={true}
• alwaysDraw={true}

Curtains

• alpha={true}
• premultipliedAlpha={true}

Reduced test case here.

Thanks!

[droplab]

I'm seeing the identical behavior in the vanilla curtains.js as well. After search through the github issues and not finding this issue at all, I'm starting to wonder if the issue lies in the shader?

precision mediump float;

varying vec3 vVertexPosition;
varying vec2 vTextureCoord;

uniform sampler2D uSampler0;

uniform float uTime;
uniform float uAlpha;

void main() 
{
    vec2 textureCoord = vTextureCoord;
    vec3 texel = vec3(texture2D(uSampler0, textureCoord));

    gl_FragColor = vec4(texel, uAlpha);
}

I've tested this with and without a plane underneath it and in all cases, the background of the underlying page shows through.

[martinlaxenaire]

Hey @droplab,

It seems that there's indeed a bug with the transparent planes for now with curtains.js. I think this has to do with the depth buffer, I'll have to check how other libraries (ie three.js) handle that.

The good news is this is easily solvable for now by disabling the depthTest instead when drawing the plane that should have transparency (without passing the transparent property at all).
Here's a fix codesandbox: https://codesandbox.io/s/misty-violet-e75wd?file=/src/App.js

Cheers,

[martinlaxenaire]

Hey @droplab,

this one should be fixed with v1.0.10
See this codesandbox: https://codesandbox.io/s/xenodochial-chebyshev-tic1z?file=/src/App.js

Cheers,