How to do a nice soft shadow?

I really love the soft shadows in https://threejs.org/examples/#webgl_materials_lightmap but I’m not sure if I can get those lovely blurry edges without custom shaders, or how much it’ll impact real-time performance. Any tips?

To archive realistic shadow features the best option is backing them in your tool like Blender, which is an option if you

  • don’t need dynamic lighting
  • have a relatively small scene

The result of course can be very realistic with no cost for rendering dynamic shadows, it’s a good option for indoor scenes.

Ah, but I don’t use a tool at all, I’m just writing TypeScript against Three’s API. Everything fully dynamic. Should I just live with sharp-edged shadows?

You can take a look at this example with contact hardening giving a similar soft shadowing result
https://threejs.org/examples/?q=shado#webgl_shadowmap_pcss

You don’t have to write custom shaders for shadowing. If you want to bake shadows you can use Blender (which is free), it generates the maps for you.

3 Likes

That’s what I was after, thanks!

1 Like