Emulating global 3D light on a functional web page

Question

I'm struggling with that problem for quite some time now so I decided to ask to have a definitive (and hopefully positive) answer.

Is there any way, using any web friendly language, to allow me to apply a spot light effect to a whole web page ?

Just like in this picture for instance:

This is an illustration made with some kind of software which has nothing to do with the web but that's the result I'm actually looking for: a unique and 3D-like illumination applied dynamically to each and every element of the page.

In terms of static design, gradients and shadows are easy to achieve using CSS but that wouldn't get me there as one thing that css fails to do is to fake a unique illumination that would light everything consistently, even if the web page is resized and the inner elements are dynamic.

Each element can emulate illumination and a shadow source on its own but they won't share a unique and consistent source of light together.

So, is there any trick of the trade or any other language (javascript or anything else) that would help me achieve what I'm looking for ?

This seems such an obvious feature to me and yet, I've never seen anything like this online so far.

Thanks for your input

EDIT: it seems unclear for a user, so here is an illustration to show the problem:

With CSS, each div can have its own light simulated (with gradient and shadow) but then each of them has its own personal pseudo light source "embedded" with it. Move any div and the pseudo-light and shadow associated with it will remain at the same place relative to the element, wherever it is on the page. Because the pseudo-light source relative to each div is static. That is ok for one shot illustrations that will emulate global light but on a real time situation when divs can be moved around and screen resized, multiple static pseudo-lights will not make it look like a global illumination. The global lighting is inconsistent.

in this case, NO global illumination is emulated, just a series of local pseudo-illuminations. One by element.

With a 3D global light however, each div is illuminated by the same unique global light source. When moving elements on the surface, the illumination and shadow will be updated according to the new position of those elements relative to the global light. That way, moving and resizing elements feel real. It looks like everything on the page (divs, text and even the background itself) is illuminated by the same unique light source. This is what I mean by global illumination.

Which is what I want to achieve. Natively or as a workaround, with css or javascript or any other language that is web-friendly, as long as it allosw me to get there with more or less the same performances as any other web page.

Answer 1

The only ways to do this are to:

1. Use "actual" 3D rendering (like WebGL) for the UI which isn't usually recommended for UI because it's harder to make UIs with just WebGL, especially making them accessible. Or

2. Loop through each instance of each relevant item, calculate where it is with respect to your fake light, and adjust the shadows based on that info. The calculations are pretty simple.

In both cases you need to redo the shadow calculations if things are moved or resized. Make sure to throttle any resize events. The only thing that is expensive is if you need to animate the light/change of shadow position because shadows are not cheap to render.

Answer 2

One probable option would be using a parallax script, and on one layer add the shadows as transparent PNG and on the main layer add the objects projecting that shadow.