Any ideas on how to create solar irradiance maps?

[Peque]

I have seen a couple of solar 3D editors that allow you to visualize the solar irradiance in the roofs. They display “hotter” colors for higher irradiance and “colder” colors for lower irradiance. Note that the irradiance is taking into account not just the orientation of each plane, but also the shadow projections of nearby objects:

Here are a couple of videos if you feel interested:

• https://youtu.be/xZkzvIKEaVg?t=17
• https://youtu.be/ZB9pwALnnSY?t=132
• https://youtu.be/hubDyCqJVg4?t=285

I wonder if that could be done with Three.js. Do you have any ideas?

I can think of putting multiple directional lights in the scene at different positions where the Sun can be at different times of the day. Each would project a different shadow, but would they add up correctly? Maybe I could then smooth the projected shadows. I guess the orange-purple gradient can be a filter applied to an originally white-black gradient?

Not asking for source code, just general ideas on how this could be implemented, theoretically, with Three.js.

[felixmariotto]

I think I would compute solar exposure per vertex and display it like in this example

[becky_rose]

If I was doing it I’d probably draw the radiance on a canvas and then throw that at the geo as a THREE.CanvasTexture. This would let you update the heat map in real time and show as much or as little detail as you liked regardless of the vertex count.

[prisoner849]

I would modify @becky_rose 's method: a grayscale texture of heat as a base, and a gradient texture.
Like in this example (click grayscale and gradien canvases to change their content):

[Peque]

@felixmariotto @becky_rose @prisoner849 Thank you all for your suggestions!

It seems you all agree in having the irradiance texture calculated first and then use a gradient texture.