Three.js: Depth Packing & Point Light Shadowing

[DiogoSlepetys]

Description of the problem:

Hello!

I just wrote a billboard shader to make my own BufferGeometry particle system, for simulating vegetation. It all worked fine, until i enabled customDepthMaterials, enabling my geometry to cast shadows from textures.

The issue is:

While THREE.DirectionalLight works just fine, by casting the silhouette of the texture to the ground, THREE.PointLight won't react to depth packing the same way, casting just solid square shadows.

Live code:

Here is my fiddle depicting the problem.

Screenshot:

I've tried reproducing my problem, using the cloth example, by swapping the directional light by a point light, but the results were the same, a dark square being cast on the floor (instead of the half transparent, labyrinth like, cloth texture).

Shouldn't every light source be able to cast shadows from customDepthMaterials? If not, i guess it could be taken as a suggestion, or am i missing something?

It's my first time posting on a forum, please excuse me for any mistakes.
A big Thank You in advance!

Three.js version

• [x] Dev
• [x] r85
• [x] r80

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[WestLangley]

Your fiddle is throwing CORS errors, and hence is not working.

If you are using a PointLight, you need to specify a customDistanceMaterial for each scene object casting shadows.

I am not sure there is an example of that, so this post can be considered to be a request to create one.

[Mugen87]

I am not sure there is an example of that, so this post can be considered to be a request to create one.

I did not find something in the examples directory. Let's mark this issue as an enhancement.

[DiogoSlepetys]

Your fiddle is throwing CORS errors, and hence is not working.

I've fixed my fiddle by changing the image host and added a screenshot to my post. (edit)

I am not sure there is an example of that, so this post can be considered to be a request to create one.

Indeed! An example would be very nice!
I'll try applying the customDistanceMaterial to my Mesh.

Thank You for your attention!

[DiogoSlepetys]

Now that the dev branch has been updated, i've added the customDistanceMaterial* and a PointLight to the cloth example, achieving the following result:

From PR #11591:

// distance material * 
    var distanceShader = THREE.ShaderLib[ "distanceRGBA" ];
    var duniforms = THREE.UniformsUtils.clone( distanceShader.uniforms );
    duniforms.alphaMap.value = clothTexture;
    object.customDistanceMaterial = new THREE.ShaderMaterial( {
        defines: {
             'USE_SHADOWMAP': '',
             'USE_ALPHAMAP': '',
             'ALPHATEST': 0.5
        },
        uniforms: duniforms,
            vertexShader: distanceShader.vertexShader,
            fragmentShader: distanceShader.fragmentShader,
            side: THREE.DoubleSide,
        } );

Also had to add those lines:

• If using the same texture for the alpha mapping:
  clothTexture.premultiplyAlpha = true;
• And to have both sides casting shadows:
  renderer.shadowMap.renderSingleSided = false;

I still have a few doubts about having a Mesh with multiple customDepthMaterial & customDistanceMaterial, meaning i wouldn't have to make endless draw calls if i wanted to have a different alphaMap for every quad on my geometry. But i'm unsure if it would make more sense opening a new issue since i couldn't find anything about it. Please let me know.

Thanks a lot!

[WestLangley]

If using the same texture for the alpha mapping: clothTexture.premultiplyAlpha = true;

If your mesh has a transparent map, then you should use this pattern, instead

duniforms.map.value = clothTexture;
object.customDistanceMaterial = new THREE.ShaderMaterial( {
    defines: {
        'USE_SHADOWMAP': '',
        'USE_MAP': '',
        'ALPHATEST': 0.5
    },

I do not think setting clothTexture.premultiplyAlpha = true; should be required.

And to have both sides casting shadows: renderer.shadowMap.renderSingleSided = false;

Yes. I'll add that to the existing example. Thanks.

[WestLangley]

A customDistanceMaterial example was added in #11591.

Closing.