BarthPaleologue / volumetric-atmospheric-scattering

A simple implementation of volumetric atmospheric scattering using babylonjs.

Volumetric Atmospheric Scattering

A simple WebGPU and WebGL implementation of volumetric atmospheric scattering using BabylonJS. All you need are two files and two lines of code!

Pictures

Online demo

You can find a demo at https://barthpaleologue.github.io/volumetric-atmospheric-scattering/dist/

You can know the current backend by looking at the bottom left corner of the screen, the logo will either be that of WebGL or WebGPU.

How to use

You need to include the ./src/ts/atmosphericScattering.ts in your project using ES6 imports.

import { AtmosphericScatteringPostProcess } from "./atmosphericScattering";

Then you can use it in your BabylonJS simply by writing:

const atmosphere = new AtmosphericScatteringPostProcess("atmospherePostProcess", planet: Mesh, planetRadius: number, atmosphereRadius: number, sun: Light | Mesh, camera: Camera, depthRenderer: DepthRenderer, scene: Scene);

Note that you can easily set up a depth renderer in your scene in BabylonJS with this syntax:

const depthRenderer = scene.enableDepthRenderer(camera, false, true);

The third parameter is set to true to increase the precision of the depth buffer, it is useful when working at planetary scales.

The atmosphere can be tweaked using various settings grouped in the interface AtmosphericScatteringPostProcess.settings:

interface AtmosphereSettings {
    planetRadius: number, // changes the value used as the minimum height of the atmosphere
    atmosphereRadius: number, // changes the value used as the maximum height of the atmosphere
    falloffFactor: number, // changes the pace at whitch the density of the atmosphere decreases
    intensity: number, // changes the intensity of the colors scattered
    scatteringStrength: number, // changes the dispersion of the three wavelengths
    densityModifier: number, // changes the overall density of the atmosphere
    redWaveLength: number, // changes the value used as the red wavelength in nanometers
    greenWaveLength: number, // same but green
    blueWaveLength: number, // same but blue
}

You can take a look at the simplest implementation in ./src/ts/starter.ts