Shadows on custom shader

Questions
,
1

Hello,

I have a custom terrain shader and would like to know the least expensive approach to render shadows on it?

Thank you in advance for your help!

2

What have you tried so far?

3

Three has these:

Material.customDepthMaterial
Material.customDistanceMaterial

https://github.com/mrdoob/three.js/issues/10764

In order to get a custom shader transformation to work with default THREE shadows, you need to make a depth and distance materials with the corresponding transformation logic.

This should be the least expensive when it comes to code… you don’t have to set up render targets, cameras etc.

1 Like
4

So far I have tried the “native” shadowing and the “shadowmap”. After testing, I will go with shawdowmaps for flexibility sake. I have it setup properly on non shader materials, but there is a missing part to share the shawdowmap to the custom terrainshader. As you will see on the following picture, the shadow is rendering on the sample plane, but it doesn’t when reaching the terrain with the custom shader.

Thank you for the info @pailhead, this post might be the key to unlock the missing piece. I will take a good look at it and get back to you.

++

5

I think it should definitely help in this case! You can look at the lights example in three.js since it has shadow camera viewers. You can render the depth of the terrain and see if it looks the same as the color rendering.

6

Did you get anywhere with this I’m trying the same thing, so far I copied the code from the Lambert shader but every time I try to add any of my own logic the shadow size goes huge!

I’m wondering if I need to alter the distance and depth maps to fix this.

7

Hello CaiusEugene,

I have yet to fiddle with the shadowmap depth buffer. I know the shadow data is shared and it can easily be accessed: threejs/examples/js/shaders/UnpackDepthRGBAShader.js at master · timoxley/threejs · GitHub

"float unpackDepth( const in vec4 rgba_depth ) {",

			"const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );",
			"float depth = dot( rgba_depth, bit_shift );",
			"return depth;",

		"}",

As soon as I get something, I’ll keep you posted…

Are you using the three.js builtin shadows for your work? [quote=“CaiusEugene, post:6, topic:123”]
alter the distance and depth maps to fix this.
[/quote]

You may have to calculate the ratio between the terrain size and the light frustum.

Maybe, the material author could help you out with this one?

8

Thanks for all the information @INF1N1T

Yes so my approach was to copy the source of ThreeJs built-in Lambert shader and add some extra logic, replacing the chunk with my own logic.

This works in part but the shadows suddenly project 10 times larger whenever I add any more texture2D calls. Later I’ll create a fiddle to demonstrate what I’m attempting.

Thanks, C.