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.

Azi / Alt: /
Rise / Set: /
Daylight: Hrs




Projection (Shortcut keys: 1 to 6)


Show a white background without stars to make screen captures better for printed mediums.


Highlights the latitude and longitude angles of the current site to clearly show how positions on the Earth's surface are specified.

Displays an illustrative beam of light illuminating the Earth directly from the Sun. This can be useful for more clearly indicating the direction of the Sun.

A short animation that shows how the Arctic and Antarctic circles mark the extremes of night and day at each season.

Another short animation that shows the tropics of Cancer and Capricorn as the extremes of solar declination angle at each of the solstices.

An orthographic view where the azimuth and altitude of the camera is locked relative to the current Sun direction and changes dynamically whenever solar position changes. Click again to increment the angle, or select a different view in VIEW SETTINGS to unlock it.

An orthographic side view at right angles to the site longitude, which is useful when explaining the effect of latitude as well as seasonal changes in solar altitude. Click again to swap sides or select a different view in VIEW SETTINGS to unlock it.



Path Lines



Time Zone



The aim of this app is to model the orbital relationship between the Earth and the Sun that results in what we see as relative solar motion. As well as displaying a full 3D Sun-path diagram at the selected site location, you can easily switch between geo-centric and helio-centric views as well as overlaying some information useful for understanding various characteristics of the relationship.

For example, turn on the 'Twilight' and 'Circles' overlays and then select 'Summer Soltice' in the 'Useful Dates' menu (). Click the 'Play' button () to animate the time and then look at the North and South poles to clearly see why the Arctic and Antarctic Circles are located where they are. You can do something similar with the 'Sub-Solar' and 'Tropics' options. There are several more that are worth exploring for yourself, such as looking at the Sun-path as you adjust the site latitude and seeing how Declination angle changes with date. Worth it if you can spend a bit of time playing around and experimenting with the model.


This is another HTML5 version of one of my Java applets in Processing. Having recently done some low-level optimisation of my solar calculations, I needed a better way to actually see the code in action and to interactively put it through its paces. Even the most extensive test suite is never a substitute for a good hands-on visualisation.

Just doing this app I found really useful and even insightful. Working out different ways to show the various characteristics and how best to handle the two planetary projections actually changed how I thought about the calculations and led to some useful improvements. Hopefully some others might find it similarly useful as a way of better understanding solar motion.

Interesting Features

The following are some of the more interesting features of this app that I had quite a bit of fun implementing:

  • The simulated atmosphere in the geocentric view whose glow tracks solar position and fades away when in shadow,
  • Getting the starfield and Sun position to approximate infinite distance when panning and moving the view without compromising on too big a near/far depth buffer,
  • The texture blend between day-lit and shadowed regions of the Earth that show night lights as it rotates,
  • The texture blend between day-lit and shadowed regions of the Earth that show night lights as it rotates,
  • The 'View from Sun Position' camera view option in the 3D VIEW SETTINGS popover that shows an orthographic view of the Earth that synchronises with solar position,
  • The enhanced twilight banding when the 'Twilight' toggle is selected in the bottom-left button list, which required some interesting GLSL code, and
  • Visualising the distinction between geometric and actual sunrise/sunset due to the size of the solar disk and atmospheric refraction.

© Dr. Andrew J. Marsh, 2014.

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 page uses the following frameworks/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.2.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 © 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.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)

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