Self-shadowing via customDepthMaterial stopped working in Three r132

Questions
, ,
1

I’m offsetting planes with a custom vertex shader using elevation maps (basically bump maps). For them to cast shadows on themselves (through a directional light source), I’ve been using a customDepthMaterial that uses the same elevation maps. Worked like a charm:

Bildschirmfoto 2021-10-28 um 20.44.22
Bildschirmfoto 2021-10-28 um 20.44.221060×1042 39 KB

Since three.r132 however, the shadows stopped working. I digged through the changelog in r132 and found nothing of help. Beside minor changes in the customDepthMaterial shader:

  • added #include <normal_pars_fragment>
  • added #include <output_fragment>

… there was nothing required to get the app running again, but the shadows are gone:

Bildschirmfoto 2021-10-28 um 20.44.55
Bildschirmfoto 2021-10-28 um 20.44.55890×860 31.4 KB

I digged through the changelog from r131 to r132 but didn’t find anything that would cause this misbehavior. Any ideas?

2

Just to resolve this: @Mugen87 fixed it in Since r132, I can't replicate MeshPhongMaterial’s new displacementMap-based self-shadowing using ShaderMaterial (with ShaderLib.phong) · Issue #22881 · mrdoob/three.js · GitHub
It’s important to set all displacement map properties (bias, scale, map) in the uniforms to make it work.

3

@molzer is your project open source? I am interested by how you achieved this with shadows.
Right now i am doing this with a modified version of geo-three GitHub - farfromrefug/geo-three: Tile based geographic world map visualization library for threejs
I have a running demo here https://farfromrefug.github.io/geo-three/example/index.html

4

Until r131, I offsetted the terrain in the vertex shader and used a customDepthMaterial to allow self-shadowing. since r132, this stopped working, unfortunately :thinking:

and no, it’s not open sourced.

5

I understand any chance you can share the shadow part? Your sun light and shadows look really awesome.

6

Well it’s not working right now, that’s the problem :smiley:
I just created this post in an attempt to solve it: Get custom displacementMap (RGB encoded) to work with shadows in r132

Thing is: Basic shadowing is rather easy, it really depends on how you’re creating your terrain. If it is offsetted on the CPU, any out of the box shadowing should work (there are many (!) tutorials, examples, etc.). If it happens in the vertex shader, things start to get tricky …

7

@molzer thanks for the explanation. I guess this is why i am having issues :slight_smile: I am offseting in GPU :smiley:

8

I see!
So until r131, this strategy worked perfectly fine: Dev. Blog of Edan Kwan-THREE.JS Advanced Tips : Shadow
(links to webarchive since the original – http://blog.edankwan.com/post/three-js-advanced-tips-shadow – seems to be offline, unfortunately).