Welcome to my shader experiment using three.js in a 3D environment. The scene features a sphere displaying a demo shader I created, which incorporates a simple 2D noise implementation.
The shader presents a visually striking effect with one side of the sphere remaining transparent while the other side is visible. To achieve this, transparency and double-sided rendering are enabled for the material.
material = new THREE.ShaderMaterial({
'uniforms': uniforms,
'fragmentShader': $('textarea#input-fragment').val(),
'vertexShader': $('textarea#input-vertex').val()
});
material.side = THREE.DoubleSide;
material.transparent = true;
You can observe the visual anomalies more clearly in this specific example. Depending on the viewing angle – top, side, bottom – you may notice differences in how the shader is displayed.
Examining the fragment shader code snippet reveals an interesting color calculation based on different axes. The opacity values are combined for the final color output.
void main() {
float r = cnoise(vNormal.yz * 2.0 + t);
float g = cnoise(vNormal.xz * -1.0 + t);
float b = cnoise(vNormal.xy * -2.0 + t);
// Opacity ranges assumed from 0 - 3, creating an intriguing effect
gl_FragColor = vec4(r, g, b, r + g + b);
}
The question remains: Why do choppy edges appear and why does the viewing angle have such an impact on the shader's appearance?