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.


MIN DF AVERAGE MAX DF Internally Reflected Component


Displays the surface area of the work plane with a daylight factor at or above the target value. The calculated percentage value is displayed within the legend on the left.


Distribution Type


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



Projection (Shortcut keys: 1 to 5)



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

Displayed Units

This affects only the display of dimensions within the interface not their stored value.

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


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

This is the average visible light transmittance of all apertures. Unobstructed clear glass is typically 0.7 whilst insulating or solar control glass is less, typically around 0.5 to 0.6. You should also use this value to factor in aperture frame obstruction which is not considered here for simplicity and clarity.


Frame Color


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.

Distribution Type


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

Displays the surface area of the work plane with a daylight factor at or above the target value. The calculated percentage value is displayed within the legend on the left.



The aim of this app is to dynamically model the relationship between room size, aperture layout and the spatial distribution of internal daylighting. To make it fun to play with, I have tried to ensure that the app and its calculations are as fast and interactive as possible so that changes to the room or its apertures update the daylighting 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, again simply select it by clicking or tapping it and then drag any of the manipulator arrows. The manipulator in the center of the aperture 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 value in a dimension line to display a simple editor that lets you directly enter numeric data. Clicking or tapping in the ROOM INFORMATION panel on the left will also display an editor for numerically adjusting the room size.

Daylight Calculation Method

The daylight calculations here use the split-flux method developed by the Building Research Establishment (BRE) in the UK. This involved converting all the required protractors and nomograms to high-resolution look-up tables. To validate this approach, I have done extensive comparisons of both the absolute daylight factors generated in this model with those of the same model in Radiance from LBNL, as well as the magnitude of relative changes in value when apertures are enlarged/reduced, the room size changed or reflectance values varied. As the room is relatively simple and always convex, and the apertures are rectangular without any complex shading or light reflection systems, there is pretty close correlation with Radiance results.

A future version of this app will allow you to remotely render the current model in Radiance and then import the results for your own visual comparison. I am currently working on all the back-end systems to make this happen.

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 tesselation and mesh regeneration process. Thus the speed increase due to using the GPU is not actually that noticeable.

© Dr. Andrew J. Marsh, 2016.

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.

Drag with the left/right button or a single finger,
or use the arrow keys.
Drag with the middle button or two/three fingers,
or use the A and D keys.
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.


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

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)

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

Copyright © 2015, Ronny Lorenz. - github.com/RaumZeit
https://github.com/RaumZeit/MarchingSquares.js   (LICENSE)

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

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