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.


LEGEND

MIN AVERAGE MAX AVG IRC AVG VSC

Shows the percentage of the unobstructed sky dome visible from each grid point, ignoring sky distribution and glass transmittance.

Daylight Threshold: Lux
Lower Threshold: Lux
Upper Threshold: Lux
Lower Threshold: Lux
Upper Threshold: Lux
Sunlight Threshold: Lux

Requires annual hourly weather data.

Must calculate hourly illuminances.

INFO: ROOM
WIDTH DEPTH HEIGHT WALL WINDOW FLOOR WIDTH HEIGHT AREA SILL OFFSET VSC WIDTH DEPTH HEIGHT X OFFSET Y OFFSET Z OFFSET X POS Y POS Z POS HEIGHT AREA CELLS

ANIMATION



Speed

GRID DATA LEGEND


Distribution Type

Contours

A histogram shows the percentage within each value range whilst a cumulative distribution shows the percentage of the grid at or above each value.


Area of Room Above Target: %


Displays a contour on the grid showing that area of the work plane with a daylight metric at or above the target value. The calculated percentage of the room is also displayed within the legend on the left.

SKY-DOME SETTINGS

2D Projection Method


Indicators

Path Lines


Sky Subdivision Type


Sky Subdivision Angle

Available angles will change depending on the sky subdivision type.


Sky luminance ratios can vary enormously so scale will unlock whenever you select a different sky.


CIE Standard General Sky

Selecting different sky types is only possible when displaying dynamic daylight factors or illuminances.


EDIT ROOM

Move Relative To

Alignment

Transition Speed

This is the height of the horizontal daylight grid above the floor of the room. Typical desktop height in the UK and Europe is 0.85m (33" 1/2) and 0.75m (30") in the US. The maximum work plane height is limited to the current room height.

HOURLY WEATHER DATA

3D VIEW SETTINGS

Projection (Shortcut keys: 1 to 6)

DISPLAY SETTINGS


When checked, a realistic sky is rendered and the current/dynamic sky distribution is used to simulate ambient light and shadow contrast.

When checked, Displays shadows cast from the current Sun position and shows areas of direct sunlight penetration through windows.

Select this option to render the 3D WebGL canvas in high resolution, even on a low-res monitor.

Select this option the display of the title of the current grid data within the 3D room model.

SNAP SETTINGS


Displayed Dimension Units

This affects only the display of dimensions within the interface, all dimensions are stored in millimetres.


Displays editable dimension lines along the edges of blocks when they are selected.

MODEL SETTINGS

The thickness of external walls affects daylighting by effectively increasing the distance between each grid point and the apertures.


The thickness of ceiling/roof construction has no effect on the daylighting, but does allow wall-mounted shading devices well above the window.


Reflectances above 0.9 and below 0.05 are very hard to achieve with standard building materials so will likely give unrealistic results.

WINDOW SETTINGS


Frame Color

This is the average Visible Light Transmittance (VLT) of the actual glazed area of each aperture, Frame and divider effects are calculated and applied separately. Unobstructed clear glass is typically 0.7 whilst insulating or solar control glass is around 0.5 to 0.6. Heavily tinted glasses can be even lower.


This is the average reflectance of the ground outside each window. This is typically assumed to be 0.2, but may vary from 0.07 for dark green foliage up to 0.5 for white beach sand or whitewashed surfaces.

DAYLIGHT SETTINGS

This is the height of the horizontal daylight grid above the floor of the room. Typical desktop height in the UK and Europe is 0.85m (33" 1/2) and 0.75m (30") in the US. The maximum work plane height is limited to the current room height.


This significantly increases the number of grid cells which may adversely affect interactive update speeds on some devices.

Updating large grids with detailed skies can be slow, making interactive model editing a bit jerky at times. Uncheck this to make things smoother again.


Updating sky distributions in the SVG Sun-path diagram can be slow, but seeing it in real-time when the date/time changes is useful. To speed editing up, either close the SKY DISTRIBUTION MODEL panel or uncheck this option to throttle updates.


When checked, tracing rays are cached and only updated when the geometric model changes. This can be a memory hog for large grids, so you can switch it off on devices where memory is limited.

DATE, TIME AND LOCATION


Time Zone

Set the orientation of the model relative to True North. This does not affect model geometry in any way, only the rotation of the sky relative to it.


INFORMATION

Overview

The aim of this app is to dynamically model the relationship between the spatial distribution of daylight and a room's size, aperture layout, shading devices and external obstructions. To make this process interesting and fun to play with, the calculations are optimised to be as fast and interactive as possible without compromising on accuracy. This means than you can change the room, its apertures or shading devices and the daylighting will update in close to real time, even on a tablet or phone.

To change the size of the room, simply select any of its bounding surfaces and then drag the appropriate arrow in the direction you want. To adjust an aperture or external obstruction, again simply select it by clicking or tapping on any of its surfaces and then drag one of the manipulator arrows that should then appear. The circular manipulator in the center of the object allows you to change its position. Whilst apertures are prevented from overlapping, you can still drag them into any area where they will fit, even within adjacent walls.

You can click or tap on any numeric value displayed within a dimension line to display a simple editor that lets you directly enter numeric data. Clicking or tapping in the INFO panel on the left will also display an editor for numerically adjusting the main parameters of the currently selected object.

Daylight Calculation Method

Daylight calculations use the split-flux method to determine the internally reflected component and raytracing to determine the direct sky and externally reflected components. Rays are used to calculate exactly which parts of the sky are visible from each grid point and which are occluded by external shading and obstructions.

Daylight illuminances are then calculated using detailed sky luminance distributions generated using the CIE Standard General Sky method described in both ISO 15469:2004(E) and CIE S 011/E:2003. You can selected any of the 16 standard sky types or load in a weather data file and have the sky distribution generated dynamically using hourly direct and diffuse solar radiation.

This approach has undergone extensive validation using direct comparison with the results of Radiance and DIVA/DAYSIM using the exact same room models, and the correlations are very close for most common room configurations. For anyone interested, a detailed report on the methodologies and results of this testing is available.

To test this yourself, you can export Radiance and DIVA/DAYSIM model definition files for the current room in order to render it yourself and directly compare results. If you don't have Radiance installed, there is even a remote render service that will allow you to do your own visual comparison.

Points of Interest

At the moment all the daylight calculations are being done in Javascript, which is still blazingly fast. However, I do have a GPU-based version which is even faster. But, given that there is so much else going on when you interact with the model (especially when contours are displayed and multiple apertures are being checked for overlaps), it turns out that the daylighting calculations are only a relatively small component compared to the geometry validation, tesselation, contouring and mesh regeneration process. Thus the speed increase due to using the GPU ends up not actually being that noticeable.


© Dr. Andrew J. Marsh, 2021.

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 app uses the following frameworks and components:


Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-datetimepicker  v4
Copyright © 2015, Jonathan Peterso - http://www.eonasdan.com
https://github.com/Eonasdan/bootstrap-datetimepicker   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (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.4.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)

libtess.js
Copyright © 2012, Brendan Kenny - github.com/brendankenny
https://github.com/brendankenny/libtess.js   (LICENSE)

lightgl.js
Copyright © 2011 by Evan Wallace - github.com/evanw
https://github.com/evanw/lightgl.js/   (LICENSE)

MarchingSquaresJS
Copyright © 2015, Ronny Lorenz. - github.com/RaumZeit
https://github.com/RaumZeit/MarchingSquares.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)