Latitude: | 54.15197° |
Longitude: | -4.48524° |
Timezone: | +00:00 |
Date: | 21 Mar 2014 |
Time: | 10:30 |
Zoom Factor |
||
|
|
Camera Azimuth | ||
| | |
Camera Altitude | ||
| | |
Field of View Angle | ||
| | |
Direct Light Diffusion | ||
| | |
Ambient Light Diffusion | ||
| | |
Aggregation Iterations | ||
| | |
Date | ||
| | |
Time of Day | ||
| | |
|
|
Latitude | ||
| | |
Longitude | ||
| | |
Time Zone: |
||
|
||
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:
Bootstrap v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/
(LICENSE)
Bootstrap-popover-x v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x
(LICENSE)
Google Maps API v3
Copyright © 2015 Google Inc. - http://google.com,
https://developers.google.com/maps/
(Terms of Service)
jQuery v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/
(LICENSE)
KnockoutJS v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/
(LICENSE)
Knockstrap v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/
(LICENSE)
lightgl.js
Copyright © 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.js/
(LICENSE)
Nanobar v0.2.0
Copyright © 2014 Jacobo Tabernero - github.com/jacoborus,
http://nanobar.micronube.com
(LICENSE)
SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/
(LICENSE)