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.
Uniform Sky Obstruction: | |
Overcast Sky Shading: |
Sky Subdivision Type
|
Sky Subdivision AngleAvailable angles will change depending on the sky subdivision type. |
|
CIE Standard General Sky
Sky luminances can vary enormously so this scale will unlock whenever you select a different sky. |
|
Displayed UnitsThis affects only the display of dimensions within the user interface not their stored value. Displays editable dimension lines along the edges of blocks when they are selected. |
Projection (Shortcut keys: 1 to 6) |
||
|
||
|
|
Sky Subdivision Type
|
Sky Subdivision Angle |
|
CIE Standard General Sky
Sky luminances can vary enormously so this scale will unlock whenever you select a different sky. |
|
|
The aim of this app was to investigate the possibility of generating real-time interactive shading masks. A shading mask is simply a map of which parts of the sky dome are visible from a particular point and which are obstructed by opaque objects in and around a site.
The other key aim was to see if I could implement dynamic sky luminance mapping for use with the shading. The degree of shading at any point is usually quantified by the percentage of the sky that is occluded. However, the luminous distribution over the sky dome is typically quite uneven and varies significantly over short time periods. With this app, you can experiment with a range of different sky conditions and quantify shading based on the percentage of actual sky luminance that is occluded.
Actually you can import any type of 3D model as an OBJ, STL or PLY file. The app only starts out with simple rectilinear blocks as a way of illustrating the process and providing an interactive site that you can play around with. To load a 3D model, use either the button that looks like a building () or drag/drop the model file anywhere in the app window.
The app automatically detects when a calculation is taking too long to be interactive and will try to degrade appropriately. For example, if the detailed shading takes longer than 200ms to complete, it will try to use a simpler method to maintain the dynamic feedback. If the simpler method takes longer than 200ms, it will stop trying to dynamically update until you finish dragging and release the pointer. Sometimes the browser or system might be busy with something else when you drag, causing it to temporarily stop dynamic updates even on a relatively simple model. However, as soon as the calculations return back to speed, the dynamic update will resume automatically.
The following are some of this app's interesting features:
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)
D3.js
Copyright © 2010-2015, Michael Bostock
http://d3js.org (LICENSE)
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)
Leaflet Maps API v1.4.0
Copyright © Cloudmade, Vladimir Agafonkin - github.com/Leaflet,
https://leafletjs.com/
(LICENSE)
OpenStreetMap Map Data
Copyright © OpenStreetMap contributors - openstreetmap.org,
https://www.openstreetmap.org/about
(LICENSE)
SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/
(LICENSE)