Loading components - please wait...

This page requires a reasonably modern browser with support for HTML5 and
both Javascript and WebGL enabled.

For optimum aggregation of shading patterns,
support for the following OpenGL ES extensions is preferred:
OES_texture_float_linear
OES_texture_float

GEOGRAPHIC LOCATION
Latitude:
Longitude:
Timezone:
DATE AND TIME
Date:
Time:

3D VIEW SETTINGS

Zoom Factor

SHADOW SETTINGS

DATE AND TIME

Day of the year:

Sunrise: , Sunset:

GEOGRAPHIC LOCATION

Time Zone:

INFORMATION

Overview

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.

Background

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.

© Dr. Andrew J. Marsh, 2014.

View Manipulation

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.

Rotation:
Drag with the left/right button or a single finger,
or use the arrow keys.
Panning:
Drag with the middle button or two/three fingers,
or use the A and D keys.
Zooming:
Use the scroll wheel or pinch with two fingers,
or use the W and S keys.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

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.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

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.

Credits

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)