Loading - please wait...

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

If this message is not soon replaced by an interactive 3D model,
then it is likely that your browser does not support this web app.
Check your JavaScript Console for specific error messages.

Latitude:
Longitude:
Timezone:
Date:
Time:
SOLAR INFORMATION
Azi / Alt: /
Rise / Set: /
Daylight: Hrs
TWILIGHT TIMES
Civil:
Nautical:
Astronom.:

ANIMATION



Speed

3D VIEW SETTINGS

Projection

DISPLAY SETTINGS

DATE AND TIME

GEOGRAPHIC LOCATION


Time Zone

INFORMATION

Overview

This is my first real experiment with shadow mapping in WebGL. I've always used shadow volumes in previous OpenGL work, but the real-time calculation and projection of silhouette edges in JavaScript seems unnecessarily onerous. Thus, I wanted to see how much of the process could be done on the GPU and whether this is a reasonably viable alternative for the kind of shadows I need.

Implementation

At first I had some pretty horrible aliasing effects on surfaces with high incidence angles, but a bit of tweaking in the shader and I've been quite surprised at how good the results are, even without any filtering or bluring effects (which I'll try later).

If you want to see what I mean about aliasing effects, go to the 'Display Settings' popup and reduce the 'Surface Opacity' to near zero. Then set the date/time such that the Sun is quite close to the ground. You should then be able to see an amount of jaggedness at the leading edge of each shadow block. Normally this is completely hidden by the opacity of the building facades, but it does illustrate the problem.

The key to getting a good result was not relying solely on the depth mask for all surfaces in the model. By testing each normal in the fragment shader, you don't need to use the depth mask at all for any surfaces that face away from the light as you can assume that they are in shadow. This one tweak was enough to get rid of all sorts of visual glitches that occured when the light source was near grazing incidence on both horizontal and vertical surfaces.

© 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)

JSON Editor
Copyright © 2015 Jos de Jong - github.com/josdejong
https://github.com/josdejong/jsoneditor/   (LICENSE)

JSURL
Copyright © 2011 Bruno Jouhier - github.com/Sage
https://github.com/Sage/jsurl/   (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)

SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)