SITE DESIGNER

This web app extends my dynamic daylighting tool to bring shading, solar radiation and view analysis to the level of an entire site rather than just a single room. It uses the same framework and infrastructure as the daylight tool, but with some more interesting snapping, editing and model generation functions. This means that it uses the same block-optimised ray-tracing routines, so the geometry is still limited to axially-aligned rectilinear blocks. However, I have added an experimental constructive solid geometry (CSG) model to automatically merge intersecting blocks into more complex shapes so that the intersecting edges are not shown. Another distinguishing feature is the ability to add multiple analysis grids, both flat and volumetric, and to automatically fit them to selected surfaces or volumes.

Screenshot of Site-Designer app
Figure 1: A screenshot of the Site-Designer app running inside a web browser.
Launch app in new tab...

The aim of this app is to extend my shading, solar analysis and view calculations out to site level whilst still offering an intuitive and interactive modelling environment for site geometry. It’s key feature is the ability to interactively drag the position of a shading mask around the site and instantly see changes in shading and overshadowing effects. Similarly, you can also interactively edit the site geometry and instantly see the resulting changes in shading and overshadowing. A shading mask is simply a 2D or 3D map of which parts of the sky dome are visible from a particular point and which are obstructed by opaque objects in and around the site.

Screenshot of app with shading mask in different position
Figure 2: Different effects of shading in another area of the model with different obstructions.

As this app is intended as an educational as well as an analytical tool, you can choose to display the rays generated to compute the shading mask in order to clearly see the relationships between obstruction and shading. This works even better if you select the ‘Show obstruction colors’ option as it will also color the rays and shading areas based on which obstruction they are due to.

Screenshot of app with shading rays
Figure 3: Displaying sprayed rays to associate shading with the obstructions that caused it.

This app uses the same infrastructure as the Dynamic Daylighting app I released a couple of months ago, so you can see the write-up of that app for detailed information on selecting and editing model geometry.

Analysis Aims

In addition to shading, this app aims to calculate and visualise incident solar radiation, either falling on surfaces or as solar flux passing through spatial regions. This can be done for any instance in time or over any period of the year. This data can then be used to quantify solar radiation, sun exposure, shading, overshadowing, rights-to-light or even the visibility of points in the model. You can also do volumetric analysis and use that data to optimise forms or generate site-specific solar envelopes.

Another aim was to see if I could implement dynamic sky radiance/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 radiance that is occluded. When used with a cumulative sky (summed over a longer period), this allows you to clearly view seasonal variations.

Why a Simple Block Model

The use of a really simple block model is actually quite important here. This app is all about being able to quickly and easily set up a site condition and get some immediate analytical feedback. Moreover, it’s about design and using highly dynamic calculations to gain some insight into the way results change when the model changes. This means being able to readily create detailed scenarios entirely from scratch and then experiment intuitively with different design options and analysis conditions. When used creatively, multiple merged blocks can pretty closely approximate the majority of built forms.

I will obviously support arbitrary CAD/BIM geometry with more complex shapes and forms in the future. However, with this app, I really wanted the focus to be on the dynamic relationship between the model and the results, without needing a site file to import or having to first learn a quirky new 3D drawing system before being able to actually do or see anything.

Site Analysis Metrics

I have tried to be very explanatory in the dialog boxes that are displayed when you select an analysis grid calculation.

There are basically two types of calculation. The first is based on an instantaneous snapshot of the sky distribution, and the following images show the dialog boxes for the various instantaneous metrics.

Screenshot of dialog box showing visible sky settings
Figure 4: Beginning a visible sky computation.
Screenshot of dialog box showing sky component settings
Figure 5: Beginning a visible sky computation.
Screenshot of dialog box showing solar radiation settings
Figure 6: Beginning an incident solar radiation computation.

The second calculation type is based on an aggregate conditions, or one that is summed or averaged over time. In these calculations you can set the start and end dates for the period as well as the start and end times for each day within it. Thus it is possible to compare summer afternoons with winter mornings, for example. The following images show the dialog boxes for the various aggregate sky metrics.

Screenshot of dialog box showing visible sky settings
Figure 7: Beginning a visible sky computation.
Screenshot of dialog box showing sky component settings
Figure 8: Beginning a visible sky computation.
Screenshot of dialog box showing solar radiation settings
Figure 9: Beginning an incident solar radiation computation.

Interesting Features

The following is a brief summary of some of this app’s core features and the things that I most wanted to experiment with:

  • Using simple axially-aligned blocks to make editing simpler and more intuitive, so that anyone can just jump right in and start modelling, as well as being able 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 and synchronising 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,

  • Overlaying the radiant distribution of the various CIE Standard General Sky types, simultaneously in both 2D and 3D, that update dynamically whenever the date, time or location changes,

  • 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 layered beneath the 2D SVG Sun-path diagram, which is significantly faster,

  • Being able to select different sky subdivision methods and subdivision angles to directly compare how accurate the sky segmentation really needs to be,

  • The ability to display both shading and sprayed rays in a colour that reflects the obstructing object, and

  • Being able to create 3D volumetric grids that you can cross-section in any axis (including arbitrary ones) and update the sections in real time as they animate across the volume.


Change Log

0.0.1 2019-12-17

  • Initial release.