ThreeJS: Adding shadows to custom shaders r75

Question

In the past it was possible to incorporate the shadow calculations in custom shaders as described here and summed up here.

With r75, the lighting and shadow systems seem to have been merged, changing this. I attempted to work my way through the source to to understand but the abstraction/modules are a little tricky to follow.

I've distilled my shaders down to what I have so far:

Vertex:

#chunk(shadowmap_pars_vertex);

void main() {
    vec4 worldPosition = modelMatrix * vec4(position, 1.0);
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;

    #chunk(shadowmap_vertex);
}

Fragment

#chunk(common);
#chunk(lights_pars);
#chunk(shadowmap_pars_fragment);

void main() {

//#if ( NUM_DIR_LIGHTS > 0 )

    IncidentLight directLight;
    DirectionalLight directionalLight;

    float shadowValue = 1.0;

    for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {

        directionalLight = directionalLights[ i ];

        shadowValue = getShadow( directionalShadowMap[ i ], directionalLight.shadowMapSize, directionalLight.shadowBias, directionalLight.shadowRadius, vDirectionalShadowCoord[ i ] );
    }

//#endif

    gl_FragColor = vec4(vec3(shadowValue), 1.0);
}

I pulled the directional light loop from the lights_template chunk. Unfortunately, shadowValue always seems to return 1.0, but it does work and the shader renders correctly otherwise.

My JS has the appropriate castShadow and receiveShadow set. Other meshes using Phong render shadows correctly.

Thanks so much in advance.

Edit: Adding material.lights = true; to the ShaderMaterial makes something appear, however the value of shadowValue in the fragment shader is clearly incorrect on the side of the sphere facing away from the light. Screenshots attached.

Sorry! I just saw this. My solution was to use `dot(lightPosition, normal)` basically if the dot product returned a number very close to 0 it is on the backside of the geometry and would therefore be in shadow anyway. The exact code which goes in the fragment shader above is: `shadowValue += (1.0 - step(0.002, dot(directionalLight.direction, vNormal))) * clamp(length(vNormal), 0.0, 1.0);` I'm not sure if this will work for every scenario, but it's worked for me so far. @cjonasw — michaeltheory, Aug 30 '16 at 04:30

ThreeJS: Adding shadows to custom shaders r75

0 Answers0