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 problem happens when make the material double sided:
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:
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.


