I am delving into the world of Three.js and JavaScript coding for the first time. Lately, I have been experimenting with Shaders and Shader Materials.
The issue I encountered was when I loaded a mesh with a Fresnel material. While the surface material appeared fine, I couldn't see inside the mesh when I rotated it: http://codepen.io/gnazoa/pen/WrLJay
I attempted to add a second material beneath the shader material as a workaround. However, at times, upon loading in the browser, it didn't function correctly: http://codepen.io/gnazoa/pen/rxovKb
Do you have any suggestions? Is there a way to view all sides of the mesh using the Fresnel Shader?
Below are the shaders that I am utilizing:
<script id="vertexShader" type="x-shader/x-vertex">
uniform float fresnelBias;
uniform float fresnelScale;
uniform float fresnelPower;
varying float vReflectionFactor;
varying vec3 vReflect;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
vec3 I = worldPosition.xyz - cameraPosition;
vReflect = reflect( I, worldNormal );
vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color;
uniform samplerCube envMap;
varying vec3 vReflect;
varying float vReflectionFactor;
void main() {
vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}
</script>
EDIT:
I managed to resolve the issue by simply adding side: THREE.DoubleSide to the material, allowing me to see all sides of the mesh.
Now, my current challenge is figuring out why the mesh doesn't appear black on the inside even though my color uniform is set to black.
Any suggestions would be greatly appreciated.