Screenshot of 3D Sun-Path Diagram app

Figure 1: A screenshot of the 3D Sun-Path Diagram app running inside a web browser.

Launch app in new tab...

This app connects an interactive Google World Map to a 3D Sun-path diagram, shadow map generator and a 2D SVG chart displaying a range of solar information. The SVG chart defaults to showing the annual variation in day-length, but you can also select an analemma chart or several different types of 2D Sun-path diagram.

The aim was to clearly illustrate the relationship between geographic location and the annual Sun-path. It should be fast enough to update in pretty close to real-time as you drag the locator within the map or the date/time in the day-length chart. You can also use both the popover buttons and information panels located in the top-right to set the date, time and location. You can set the location using the map by either dragging the locator icon around or clicking in the position you want.


This started out as an experiment to see just how responsive I could make the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL. I’m actually quite stunned as, even before any optimisation whatsoever, I found that I could build and rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7 processor, but it meant that the core technologies were not going to be the kind of bottleneck that I thought they’d be.

As it turned out, there was scope for some pretty fundamental optimisations, so now it’s even quick enough on an iPad as well as most of my old Android tablets.

SVG and WebGL

The marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be a pretty happy one. The core ideas when working in both are actually pretty similar - building up a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and SVG elements respectively). Any complex calculations in Javascript need only be done once to build up each visual component, or to rebuild if it physically changes. The actual rendering of that cached element is then done by a much faster lower-level process (OpenGL/GPU and the SVG engine respectively).

Optimsation Potential

Thus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usuallyrequires a full redraw of all chart components, each being re-described and/or re-generated in your own Javascript code. If any components require complex calculation or involve detailed curves, you have to devise your own caching system as this all has to be redone for every redraw.

With SVG charts, you only need to re-describe and/or re-generate those components that actually change on each redraw. All other previously defined components are automatically re-rendered by the SVG engine, which is a core part of the browser itself (running as native code) so is significantly faster than working in Javascript.

Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment.

Change Log

0.0.2 2015-04-16

  • Converted ‘Sun-Path Components’ menu to a popover with checkboxes so that it stays visible whilst the user makes several selections.

  • Added ‘Settings Data’ () menu with options to import, view and edit application settings.

  • Added ability to store and reset current settings as the default startup configuration.

0.0.1 2015-02-12

  • Initial release.


Ghaidaa 31 October, 2016 - 17:58

As an architectural student this is really brilliant and helpful.

Our only problem was being unable to change the 3D that’s posted to get the accurate animation/pictures to fit our work.

If somehow we can be able to upload 3D files into the web which changes the one done already would be great.

Dr. Andrew Marsh 01 November, 2016 - 18:12

Hi Ghaidaa,

I do have a development version of that web app that lets you load your own .obj model files. You can find it at:

You can load a model using the ‘Shadow Model’ menu or by simply dragging and dropping your files into the browser window when that app is displayed. Because a web page within a browser cannot search your local file system, if your .obj file has associated .mtl files as well, make sure you select them all and drag/drop them as a group so it can use the right colors and materials.

As the format of models from different tools can vary, there are a number of options for fixing import issued inside the ‘Shadow Model’ menu. These allow you to rationalise surface normals and swap the Y and Z axis depending on how your model looks when it’s imported. This is a work-in-progress so I would be interested to hear about any issues you have or get your feedback.

Hope that helps…

Steph 17 July, 2017 - 02:20

Whenever I load a model, the materials come in crazy colors. I was wondering if there was a way to fix this, or if I’m doing something wrong. I tried changing materials in Sketchup and nothing worked. Also, is there any way to export a picture of the model, or can I only take a screenshot of it? Thank you!

Dr. Andrew Marsh 24 July, 2017 - 10:47

Hi Steph,

Thanks for getting in touch and sorry that you are having problems with the colours…

One thing that the documentation isn’t very clear on (I will update it), is that you have to drag and drop both the .obj and the .mtl files together onto the web page at the same time. Unfortunately the tool will only process the material file as it is loading and creating the model data.

Having thought about it, this is a new feature that I should really add to the tool. You should be able to drag/drop a .mtl anytime after you have loaded the .obj file. The model should simply store the name of each material used and then update them when/if a new material file is dropped.

Also, unfortunately the isn’t a way to export a model or image other than via a screenshot. My web backend allows you to download models and data in a few different formats, but it’s a long way from complete at the moment and not something that I can easily link up to this tool.

I’ll let you know when I have updated the tool to support separately loading materials.

Hope that helps…

Rodrigo Maisterrena 02 September, 2017 - 23:58

Thank you Sir for such good apps. I’ve just imported a model from Revit into the app and it worked great. My students are going to love it. We miss all the tools from Ecotect (Weather tools, butterfly shadows, shadow tools etc) It´s a pity the Big Company didn´t follow up on its development, and has not implemented (or missed the target) this easy to use, high quality graphic aids on its platforms.

Thank you again on sharing your work, a lot of students will benefit from understanding how their projects are affected by the Sun, and how they affect their surroundings.


Click here to comment on this page.