Three.js: Black artifacts using SubSurface Scattering shader - three.js

Question

I would like to use a ShaderMaterial in Three.js that allows some light to go through. As I learned recently, the effect I need is called "sub-Surface Scattering". I found several examples, but only a few allow real-time calculations (without additional mapping). The closest one is shown in this snippet:
var container;
var camera, scene, renderer;
var sssMesh;
var lightSourceMesh;
var sssUniforms;
var clock = new THREE.Clock();
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 4;
camera.position.y = 2;
camera.rotation.x = -0.45;
scene = new THREE.Scene();
var boxGeometry = new THREE.CubeGeometry(0.75, 0.75, 0.75);
var lightSourceGeometry = new THREE.CubeGeometry(0.1, 0.1, 0.1);
sssUniforms = {
u_lightPos: {
type: "v3",
value: new THREE.Vector3()
}
};
var sssMaterial = new THREE.ShaderMaterial({
uniforms: sssUniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragment_shader').textContent
});
var lightSourceMaterial = new THREE.MeshBasicMaterial();
sssMesh = new THREE.Mesh(boxGeometry, sssMaterial);
sssMesh.position.x = 0;
sssMesh.position.y = 0;
scene.add(sssMesh);
lightSourceMesh = new THREE.Mesh(lightSourceGeometry, lightSourceMaterial);
lightSourceMesh.position.x = 0;
lightSourceMesh.position.y = 0;
scene.add(lightSourceMesh);
renderer = new THREE.WebGLRenderer();
container.appendChild(renderer.domElement);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var delta = clock.getDelta();
var lightHeight = Math.sin(clock.elapsedTime * 1.0) * 0.5 + 0.7;
lightSourceMesh.position.y = lightHeight;
sssUniforms.u_lightPos.value.y = lightHeight;
sssMesh.rotation.y += delta * 0.5;
renderer.render(scene, camera);
}
body {
color: #ffffff;
background-color: #050505;
margin: 0px;
overflow: hidden;
}
<script src="http://threejs.org/build/three.min.js"></script>
<div id="container"></div>
<script id="fragment_shader" type="x-shader/x-fragment">
varying vec3 v_fragmentPos;
varying vec3 v_normal;
uniform vec3 u_lightPos;
void main(void)
{
vec3 _LightColor0 = vec3(1.0,0.5,0.5);
float _LightIntensity0 = 0.2;
vec3 translucencyColor = vec3(0.8,0.2,0.2);
vec3 toLightVector = u_lightPos - v_fragmentPos;
float lightDistanceSQ = dot(toLightVector, toLightVector);
vec3 lightDir = normalize(toLightVector);
float ndotl = max(0.0, dot(v_normal, lightDir));
float inversendotl = step(0.0, dot(v_normal, -lightDir));
vec3 lightColor = _LightColor0.rgb * ndotl / lightDistanceSQ * _LightIntensity0;
vec3 subsurfacecolor = translucencyColor.rgb * inversendotl / lightDistanceSQ * _LightIntensity0;
vec3 final = subsurfacecolor + lightColor;
gl_FragColor=vec4(final,1.0);
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec3 v_fragmentPos;
varying vec3 v_normal;
void main()
{
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
v_fragmentPos = (modelMatrix * vec4( position, 1.0 )).xyz;
v_normal = (modelMatrix * vec4( normal, 0.0 )).xyz;
gl_Position = projectionMatrix * mvPosition;
}
</script>
The code above works perfect on a simple geometry (a cube in this case). But it draws some strange black faces on more complex meshes. The final objetive is to "iluminate" heightmap terrains, but applying this same code, I get this:
As you can see, the "glass-effect" is very nice on the lightened areas, but on the darker ones (where the light doesn´t reach so well) it draws some full black faces that I don´t know how to avoid.
I consider myself a medium-level Three.js user, but this is the first time I play with shaders, and is not being that easy, to be fair. Everytime I change something on the shaders code, the result is a visual garbage. The only single thing I changed properly are the light colors (both front and back). I also tried to increase the light intensity, but this doesn´t work, it only "burns" more the shader, making even more black faces to appear.
Can anyone point me on the right direction? What is this effect called on the first place? I don´t even know how to search about it on WebGL resources. Any help would be appreciated!
EDIT: It seems that making the terrain thicker (with a higher Z scale) solves the issue. Maybe this has something to do with the angle of the light against the faces? This also happens in the original snippet just when the light enters the cube (you can see a full black face in a frame). Or maybe I´m just talking nonsense. This is easily the hardest piece of code I faced in years, and it´s just 10 lines!! I just want to see the shader look as good in the original scale as it looks in the thicker one. But the complexity of the physics involved in that formulas is beyond me.

Answer 1

There is a few places where you potentially divide by zero in your pixel shader, which often shows up as black (line 3 and 4):
float ndotl = max(0.0, dot(v_normal, lightDir));
float inversendotl = step(0.0, dot(v_normal, -lightDir));
vec3 lightColor = _LightColor0.rgb * ndotl / lightDistanceSQ * _LightIntensity0;
vec3 subsurfacecolor = translucencyColor.rgb * inversendotl / lightDistanceSQ * _LightIntensity0;
vec3 final = subsurfacecolor + lightColor;
both ndotl and inversendotl can have a value of 0 (and pretty often, since you clamp them in both cases). Either of the subsequent terms can then be divided by zero, rendering them black. Try commenting out either subsurfacecolor or lightColor to isolate the faulty one (might be both).
max() can be non-zero by just having a tiny delta: max(0.0001, x)
step() can be solved by replacing it with a static branching, which would also have the benefit of getting rid of that extra dot product, since you just negate a vector, the result is just the opposite.