Overview

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.

Why a Simple Block Model

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.

Dynamic Updating

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.

Interesting Features

The following are some of this app's interesting features:

• Using simple axially-aligned blocks to optimise ray-tracing for close to real-time shading calculations,
• Performing some simple real-time constructive solid geometry (CSG) to union multiple intersecting axially-aligned blocks into a single solid,
• Dynamically updating both a WebGL shading mask within the 3D context of the model and a 2D SVG shading mask to show real-time shading and sky effects,
• Updating more than a thousand or so individual SVG path elements to show a dynamic 2D sky distributions can be quite slow, so this version actually renders the shading and dynamic sky distribution to a WebGL canvas beneath the 2D SVG Sun-path diagram, which is significantly faster,
• Overlaying sky luminance distributions of the CIE Standard General Sky types that update dynamically whenever the date, time or location changes,
• Being able to select different sky subdivision methods and subdivision angles to directly compare how accurate the sky segmentation really needs to be, and
• The ability to display both shading and sprayed rays in a colour that reflects the obstructing object.

© Dr. Andrew J. Marsh, 2017.