Minos Park

writing | projects | photos | drawings | code | lists | cs184 | ocf

Writeup: Spectral Ray Tracing Sunset Simulator

August 2020

Live demo: https://minospark.com/s/sunset
Presentation slides: here

Sunset Sim Demo Sunset Sim Demo Sunset Sim Demo

It is also possible to interact with the scene (the sun is bigger).

Sunset Sim Demo
Camera height is adjusted


I wanted to understand and learn the mechanics of the sunset and write a graphics program that demonstrates it. In this project I’ve built spectral raytracing into a path tracer on WebGL to better simulate the atmospheric refraction. The sunset produced by the simulation, shows diffuse sky radiation with rayleigh scattering, and atmospheric refraction which makes the sunset a bit more realistic. WebGL was chosen, so that the live simulator can be accessed easily on a web browser.

Technical approach

To obtain the results, we first need to implement few things in the WebGL path tracer.

Spectral Ray Tracer System

The system samples the primary colors (RGB) and assigns it to a ray. The ray bounces in the scene and the wavelength dependent radiance calculator for the sky returns a radiance value. To render a fully colored scene, the wavelengths needs to be sampled for each rays, thus it increases the amount of ray tracing that needs to be done.


Despite the increased computation, spectral ray tracer is desired for the simulation to be more physics accurate. The reason why the sky is blue is due to the diffuse sky radiation. It is a type of solar radiation reaching the Earth’s surface mainly caused by the radiative scattering process called Rayleigh scattering.

“Rayleigh scattering is the predominantly elastic scattering of light […] by particles much smaller than the wavelength of the radiation”. It is the reason for the blue color of the daytime sky as mentioned, as well as red and orange hue of the setting sun.

Ralyeigh scattering has strong dependence on the wavelength thus the reason why the spectral ray tracing for sunset simulator is desired.

A graph showing different wavelength absorbtion

A graph showing different wavelength absorbtion

Relayieh equation

Rayleigh scattering cross-section equation. One can see the lambda, the wavelength, to the power of 4 dependence.

Wavelength dependent atmospheric refraction

Green flash

Sunset Sim Demo
Image from Science Blogs (link)

From wikipedia, “Green flashes occur because the earth’s atmosphere can cause the light from the Sun to separate, or refract, into different colors. Green flashes are a group of similar phenomena that stem from slightly different causes, and therefore, some types of green flashes are more common than others.”

Sunset Sim Demo

To see this in the simulation would be one measure of performance.


Sunset Sim Demo

Rayleigh scatter can be seen. Pretty!

Sunset Sim Demo

A bit exagerrated example of wavelength dependant refraction based on the spectral ray tracing. Ray tracing was disabled on the sky.

The green light effect in principle can be seen above the sun. To have it be very similar to the real green light phenomena, a more complex atmosphere condition needs to be replicated in the simulator.

Sunset Sim Demo

There is a tinge of green on the top of the sun at the boundary. Can you see it?

Sunset Sim Demo

Scene when the sun is up high.

Sunset Sim Demo Sunset sequence 1 Sunset Sim Demo Sunset sequence 2 Sunset Sim Demo Sunset sequence 3


Tags: cs184 cal