glsl-atmosphere
Renders sky colors with Rayleigh and Mie scattering.
Install
npm install glsl-atmosphere
Example
Javascript
var quad = Geometry(gl)
.attr('aPosition', [
-1, -1, -1,
1, -1, -1,
1, 1, -1,
-1, -1, -1,
1, 1, -1,
-1, 1, -1
]);
program.bind();
quad.bind(program);
program.uniforms.uSunPos = [0, 0.1, -1];
quad.draw();
Vertex Shader
attribute vec3 aPosition;
varying vec3 vPosition;
void main() {
gl_Position = vec4(aPosition, 1.0);
vPosition = aPosition;
}
Fragment Shader
varying vec3 vPosition;
uniform vec3 uSunPos;
#pragma glslify: atmosphere = require(glsl-atmosphere)
void main() {
vec3 color = atmosphere(
normalize(vPosition), // normalized ray direction
vec3(0,6372e3,0), // ray origin
uSunPos, // position of the sun
22.0, // intensity of the sun
6371e3, // radius of the planet in meters
6471e3, // radius of the atmosphere in meters
vec3(5.5e-6, 13.0e-6, 22.4e-6), // Rayleigh scattering coefficient
21e-6, // Mie scattering coefficient
8e3, // Rayleigh scale height
1.2e3, // Mie scale height
0.758 // Mie preferred scattering direction
);
// Apply exposure.
color = 1.0 - exp(-1.0 * color);
gl_FragColor = vec4(color, 1);
}
API
#pragma glslify: atmosphere = require(glsl-atmosphere)
vec3 atmosphere(vec3 r, vec3 r0, vec3 pSun, float iSun, float rPlanet, float rAtmos, vec3 kRlh, float kMie, float shRlh, float shMie, float g)
Returns a vec3 representing the color of the sky along a view direction.
Takes:
vec3 rnormalized ray direction, typically a ray cast from the observers eye through a pixelvec3 r0ray origin in meters, typically the position of the viewer's eyevec3 pSunthe position of the sunfloat iSunintensity of the sunfloat rPlanetradius of the planet in metersfloat rAtomsradius of the atmosphere in metersvec3 kRlhRayleigh scattering coefficientvec3 kMieMie scattering coefficientfloat shRlhRayleigh scale height in metersfloat shMieMie scale height in metersfloat gMie preferred scattering direction
For an Earth-like atmosphere, see the settings in the example above.
71 Oct 14, 2021
1.4k Jan 3, 2023
5 Aug 20, 2022
112 Dec 14, 2022
40 Dec 27, 2022
30 Dec 17, 2022
305 Dec 29, 2022
297 Dec 30, 2022
3 Feb 13, 2022
12 Sep 3, 2022
10 Nov 2, 2022
4 Feb 19, 2022
1 Dec 23, 2021
6 Nov 7, 2022
313 Dec 31, 2022
906 Dec 29, 2022
90 Nov 21, 2022
274 Jan 8, 2023
42 Oct 28, 2022