This page requires a reasonably modern browser with support for HTML5 and
For optimum aggregation of shading patterns,
support for the following OpenGL ES extensions is preferred:
Day of the year:
Sunrise: , Sunset:
This is a simple experiment with soft shadows and ambient occlusion effects to see if I can get some interesting visual results. It uses a straightforward shadow mapping technique (see below for credits), but renders pseudo-random shadows iteratively over multiple frames and accumulates them to achieve a more realistic shadow/shading effect.
You should be able to see the process in action whenever you make any change to the sun position which, after a short pause, will trigger a recalculation of the depth map and a regeneration of the cumulative shadow map.
Despite having done quite a few projects that render interactive shadows on building models, I have never been particularly happy with the visual result. However, I was greatly inspired by the GPU lightmap generation example in the lightgl.js project by Evan Wallace, so I felt that I had to at least see what I could do with it.
This experiment uses a lot of the code from Evan's example, as well as some additional work refactoring the mechanics, adding some UI elements and 3D interaction, etc. The result is certainly not a general solution to the problem, being limited to quads and relatively simple models, but it has proved to be a really intriguing starting point for me.
You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.
NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.
The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.
NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.
This page uses the following frameworks/components: