Loading components - please wait...

This page requires a reasonably modern HTML5 browser with
both Javascript and WebGL enabled.

If this message is not quickly 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


Animation Speed


Zoom Factor




Time Zone



This 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 enhanced twilight banding when the Solar Horizon option is overlayed, 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)

Google Maps API  v3
Copyright © 2015 Google Inc. - http://google.com,
https://developers.google.com/maps/   (Terms of Service)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (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)

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