Color coded shadow map

I am trying to do a sun simulation in three and I am investigating different approaches for this.
I have a three mesh, a position of the directional light source and a shadow map. This gives me the shadows for one (1) given sun position on the mesh and on the ground plane.

I would now need 24 sun positions (one for each our during a day) to show a simulation of where there are much shadows on my mesh and on the plane geometry. What is the best way of achieving this? Should I add 24 light sources and one shadow map? Should I add many shadow maps? Or merge the maps somehow?

I would also like the shadow map to be colour coded so that red represents a lot of sun hours and blue represents a lot of shadow throughout the day. How could I achieve this in three?

I would start with the sky shader example used for the ocean demo.
This way you get a complete environment for your model’s uniforms + sun parameters.

three.js Ocean shader demo

The issue is the shadowmaps, it’s only a darker filter, in theory there is no way to add colors.
BUT, if you separate your shadows on another renderer, then recoloring may become possible. Here is an interesting post about it here.

How to view the shadowmap

By the way, using shadow mesh instead of shadowmap could be a better move, if you care more about the lenght and color of the shadows and not the look/realism.
shadow mesh demo

Thank you for your reply. Im not sure if we are taöking about the same thing. What I am trying to achieve is something similar to these images ( a range of shadows throughout the day):

Does anyone know if it is possible to determine whether a mesh face is in shadow or not?

1 Like

I think there is. At least I think it could be done by somehow tracing rays from the mesh to a light source and checking for shadow casters.

1 Like

So…my attempt here would probably be to add several light sources. If I would like to run a simulation between 14pm and 18pm I would set up 5 light sources (one for every hour).

I would then iterate over the 5 light sources. For the first one I would determine whether the mesh faces are in shadow or not. If it is in shadow I would give the value 0, if it is in sun I would give value 1. Then I would go to the next light source in the iteration and calculate the same thing.

Once I have iterated over all light sources I would calculate the sum for each face in the mesh and apply a colour coding based on that. The result would be similar to the colourful image in my previous comment.

Tbf, This feels a bit complex. Is there a smarter way of doing it? And if not; is there a way to determine whether a face in the mesh is in shadow or not? And how can I store the bool result for every face?
how can I create the sum for each face after that? And how can I apply colours according to the face’a values?