Three.js how to determine if backfacing in a RawShaderMaterial that's double sided and transparent?

22 views Asked by At

In Three.js, I'm trying to create a fresnel based glowing outline on a sphere, with a RawShaderMaterial, on a double sided transparent sphere.

The RawShaderMaterial GLSL is a fairly straightforward fresnel effect. In the below code block, the variable transparency dictates how see-through the overall object is.


precision highp float;

uniform vec3 color;
uniform float start;
uniform float end;
uniform float alpha;

varying vec3 fPosition;
varying vec3 fNormal;

void main()
{
    vec3 normal = normalize(fNormal);
    vec3 eye = normalize(-fPosition.xyz);
    float rim = smoothstep(start, end, 1.0 - dot(normal, eye));
    float transparency = clamp(rim, 0.0, 1.0);
    gl_FragColor = vec4( clamp(rim, 0.0, 1.0) * alpha * color, transparency );
}

You can see this fresnel glow effect live on Shaderfrog.

the expected result

The problem happens when make the material double sided:

unexpected result

You can see that the material is no longer transparent. I think what's happening is inner material at the back of the sphere is facing the camera, and not calculating the correct fresnel effect, whiting out the background.

I tried setting transparency to zero if gl_FrontFacing is true, but if the above statement is correct, then I don't think the inner material at the back of the sphere is technically backfacing.

I might be asking how to detect if the shader is the "backside" material in a RawShaderMaterial. As far as I know there are no defines I can use in a RawShaderMaterial to detect if I'm on the backside.

You can also modify the code in the editor using the Compile button to edit the example:

click compile to update code

The overall intent of what I'm trying to do is make a fresnel effect I can later compose with other effects to make a shield / forcefield material, which I want to be double sided and transparent, with a fresnel glow.

0

There are 0 answers