Skip to content

Commit

Permalink
Globe atmosphere style specification
Browse files Browse the repository at this point in the history
  • Loading branch information
@karimnaaji
karimnaaji committed Mar 22, 2022
1 parent 6f74fc5 commit d61d506
Show file tree
Hide file tree
Showing 22 changed files with 624 additions and 79 deletions.
2 changes: 1 addition & 1 deletion build/generate-struct-arrays.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ createStructArrayType('symbol_line_vertex', lineVertex, true);

import globeAttributes, {atmosphereLayout} from '../src/terrain/globe_attributes.js';
createStructArrayType('globe_vertex', globeAttributes);
createStructArrayType('globe_atmosphere_vertex', atmosphereLayout);
createStructArrayType('atmosphere_vertex', atmosphereLayout);

// feature index array
createStructArrayType('feature_index', createLayout([
Expand Down
229 changes: 229 additions & 0 deletions debug/atmosphere.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='../dist/mapbox-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
.mapboxgl-canvas {
background-image: url("https://img.favpng.com/9/21/21/royalty-free-photography-illustration-png-favpng-d38x16Mw2kxSFqtUSXG8gT5CQ_t.jpg");
}
</style>
</head>

<body>
<div id='map'></div>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js'></script>
<script src='../dist/mapbox-gl-dev.js'></script>
<script src='access_token_generated.js'></script>
<script>

var GUIParams = function() {
this.enable = true;
this.style = 'streets-v11';
this.start = 0.8;
this.end = 8.0;
this.color = [255, 255, 255];
this.skyColor = [0, 0, 0];
this.spaceColor = [0, 0, 0];
this.spaceAlpha = 1.0;
this.colorAlpha = 1.0;
this.skyAlpha = 1.0;
this.horizonBlend = 0.5;
this.starIntensity = 0.15;
this.presets = 'preset1';
};

var guiParams = new GUIParams();

var map = window.map = new mapboxgl.Map({
container: 'map',
zoom: 10,
center: [78.7193, 36.2927],
pitch: 75,
bearing: -10,
style: 'mapbox://styles/mapbox/streets-v11',
hash: true,
projection: 'globe'
});

function updatePreset(value) {
// 'mapbox/streets-v11',
// 'mapbox/satellite-streets-v11',
// 'mapbox/light-v10',
// 'mapbox/dark-v10',
// 'mapbox/outdoors-v11',
// 'mapbox/satellite-v9',
if (value === 'preset1') {
guiParams.enable = true;
guiParams.style = 'satellite-streets-v11';
guiParams.color = [220, 159, 159];
guiParams.skyColor = [36, 92, 223];
guiParams.spaceColor = [0, 0, 0];
guiParams.spaceAlpha = 1.0;
guiParams.colorAlpha = 1.0;
guiParams.skyAlpha = 0.7;
guiParams.horizonBlend = 0.5;
guiParams.starIntensity = 0.15;
} else if (value === 'preset2') {
guiParams.enable = true;
guiParams.style = 'satellite-v9';
guiParams.color = [225, 225, 225];
guiParams.skyColor = [44, 73, 175];
guiParams.spaceColor = [11, 11, 25];
guiParams.spaceAlpha = 1.0;
guiParams.colorAlpha = 1.0;
guiParams.skyAlpha = 1;
guiParams.horizonBlend = 0.025;
guiParams.starIntensity = 0.150;
} else if (value === 'preset3') {
guiParams.enable = true;
guiParams.style = 'light-v10';
guiParams.color = [200, 160, 160];
guiParams.skyColor = [200, 200, 200];
guiParams.spaceColor = [57, 72, 85];
guiParams.spaceAlpha = 1.0;
guiParams.colorAlpha = 0.5;
guiParams.skyAlpha = 1;
guiParams.horizonBlend = 0.05;
guiParams.starIntensity = 0.2;
} else if (value === 'preset4') {
guiParams.enable = true;
guiParams.style = 'streets-v11';
guiParams.color = [255, 255, 255];
guiParams.skyColor = [19, 122, 255];
guiParams.spaceColor = [0, 0, 0];
guiParams.spaceAlpha = 1.0;
guiParams.colorAlpha = 1;
guiParams.skyAlpha = 1;
guiParams.horizonBlend = 1.9;
guiParams.starIntensity = 1.0;
} else if (value === 'preset5') {
guiParams.enable = true;
guiParams.style = 'dark-v10';
guiParams.color = [13, 13, 13];
guiParams.skyColor = [255, 255, 255];
guiParams.spaceColor = [50, 50, 50];
guiParams.spaceAlpha = 1.0;
guiParams.colorAlpha = 1;
guiParams.skyAlpha = 0.5;
guiParams.horizonBlend = 0.025;
guiParams.starIntensity = 0.1;
} else if (value === 'preset6') {
guiParams.enable = true;
guiParams.style = 'outdoors-v11';
guiParams.color = [85, 119, 140];
guiParams.skyColor = [36, 92, 223];
guiParams.spaceColor = [2, 20, 50];
guiParams.spaceAlpha = 1.0;
guiParams.colorAlpha = 0.8;
guiParams.skyAlpha = 1.0;
guiParams.horizonBlend = 1;
guiParams.starIntensity = 0.75;
}
map.setStyle('mapbox://styles/mapbox/' + guiParams.style);
}

updatePreset('preset1');

window.onload = function() {
var gui = new dat.GUI(); // eslint-disable-line

var presets = gui.add(guiParams, 'presets', [
'preset1',
'preset2',
'preset3',
'preset4',
'preset5',
'preset6'
]);

presets.onFinishChange((value) => {
updatePreset(value);
});

var fog = gui.addFolder('Atmosphere');
var enable = fog.add(guiParams, 'enable');
enable.onFinishChange((value) => {
map.setFog(value ? {
"range": [guiParams.start, guiParams.end],
"color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', ' + guiParams.colorAlpha + ')',
"horizon-blend": guiParams.horizonBlend,
"sky-color": 'rgba(' + guiParams.skyColor[0] + ', ' + guiParams.skyColor[1] + ', ' + guiParams.skyColor[2] + ', ' + guiParams.skyAlpha + ')',
"space-color": 'rgba(' + guiParams.spaceColor[0] + ', ' + guiParams.spaceColor[1] + ', ' + guiParams.spaceColor[2] + ', ' + guiParams.spaceAlpha + ')',
"star-intensity": guiParams.starIntensity
} : null);
});

var horizonBlend = fog.add(guiParams, 'horizonBlend', 0.0, 5.0);
horizonBlend.onChange((value) => {
map.setFog({
"horizon-blend": value,
});
});
var starIntensity = fog.add(guiParams, 'starIntensity', 0.0, 1.0);
starIntensity.onChange((value) => {
map.setFog({
"star-intensity": value,
});
});

var colorAlpha = fog.add(guiParams, 'colorAlpha', 0.0, 1.0);
colorAlpha.onChange((value) => {
map.setFog({
"color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', ' + value + ')'
});
});

var color = fog.addColor(guiParams, 'color');
color.onChange((value) => {
map.setFog({
"color": 'rgba(' + value[0] + ', ' + value[1] + ', ' + value[2] + ', ' + guiParams.colorAlpha + ')'
});
});

var skyAlpha = fog.add(guiParams, 'skyAlpha', 0.0, 1.0);
skyAlpha.onChange((value) => {
map.setFog({
"sky-color": 'rgba(' + guiParams.skyColor[0] + ', ' + guiParams.skyColor[1] + ', ' + guiParams.skyColor[2] + ', ' + value + ')'
});
});
var skyColor = fog.addColor(guiParams, 'skyColor');
skyColor.onChange((value) => {
map.setFog({
"sky-color": 'rgba(' + value[0] + ', ' + value[1] + ', ' + value[2] + ', ' + guiParams.skyAlpha + ')'
});
});

var spaceAlpha = fog.add(guiParams, 'spaceAlpha', 0.0, 1.0);
spaceAlpha.onChange((value) => {
map.setFog({
"space-color": 'rgba(' + guiParams.spaceColor[0] + ', ' + guiParams.spaceColor[1] + ', ' + guiParams.spaceColor[2] + ', ' + value + ')'
});
});
var spaceColor = fog.addColor(guiParams, 'spaceColor');
spaceColor.onChange((value) => {
map.setFog({
"space-color": 'rgba(' + value[0] + ', ' + value[1] + ', ' + value[2] + ', ' + guiParams.spaceAlpha + ')'
});
});
};

map.on('style.load', function() {
map.setFog({
"range": [guiParams.start, guiParams.end],
"color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', ' + guiParams.colorAlpha + ')',
"horizon-blend": guiParams.horizonBlend,
"sky-color": 'rgba(' + guiParams.skyColor[0] + ', ' + guiParams.skyColor[1] + ', ' + guiParams.skyColor[2] + ', ' + guiParams.skyAlpha + ')',
"space-color": 'rgba(' + guiParams.spaceColor[0] + ', ' + guiParams.spaceColor[1] + ', ' + guiParams.spaceColor[2] + ', ' + guiParams.spaceAlpha + ')',
"star-intensity": guiParams.starIntensity
});
});

</script>
</body>
</html>
2 changes: 1 addition & 1 deletion debug/fog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,4 +257,4 @@

</script>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion src/data/array_types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1360,7 +1360,7 @@ export {
StructArrayLayout3f12 as CollisionVertexExtArray,
StructArrayLayout3ui6 as QuadTriangleArray,
StructArrayLayout7f28 as GlobeVertexArray,
StructArrayLayout5f20 as GlobeAtmosphereVertexArray,
StructArrayLayout5f20 as AtmosphereVertexArray,
StructArrayLayout3ui6 as TriangleIndexArray,
StructArrayLayout2ui4 as LineIndexArray,
StructArrayLayout1ui2 as LineStripIndexArray,
Expand Down
2 changes: 1 addition & 1 deletion src/geo/projection/globe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default class Globe extends Mercator {
super(options);
this.requiresDraping = true;
this.supportsWorldCopies = false;
this.supportsFog = false;
this.supportsFog = true;
this.zAxisUnit = "pixels";
this.unsupportedLayers = ['debug', 'custom'];
}
Expand Down
4 changes: 2 additions & 2 deletions src/geo/projection/globe_util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {mat4, vec3} from 'gl-matrix';
import SegmentVector from '../../data/segment.js';
import {members as globeLayoutAttributes, atmosphereLayout} from '../../terrain/globe_attributes.js';
import posAttributes from '../../data/pos_attributes.js';
import {TriangleIndexArray, GlobeVertexArray, GlobeAtmosphereVertexArray, LineIndexArray, PosArray} from '../../data/array_types.js';
import {TriangleIndexArray, GlobeVertexArray, AtmosphereVertexArray, LineIndexArray, PosArray} from '../../data/array_types.js';
import {Aabb} from '../../util/primitives.js';
import LngLatBounds from '../lng_lat_bounds.js';

Expand Down Expand Up @@ -515,7 +515,7 @@ export class GlobeSharedBuffers {
}

_createAtmosphere(context: Context) {
const atmosphereVertices = new GlobeAtmosphereVertexArray();
const atmosphereVertices = new AtmosphereVertexArray();
atmosphereVertices.emplaceBack(-1, 1, 1, 0, 0);
atmosphereVertices.emplaceBack(1, 1, 1, 1, 0);
atmosphereVertices.emplaceBack(1, -1, 1, 1, 1);
Expand Down
6 changes: 3 additions & 3 deletions src/geo/transform.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ class Transform {
}

get cameraPixelsPerMeter(): number {
return this.projection.pixelsPerMeter(this.center.lat, this.cameraWorldSize);
return mercatorZfromAltitude(this.center.lat, this.cameraWorldSize);
}

get centerOffset(): Point {
Expand Down Expand Up @@ -935,7 +935,7 @@ class Transform {
}
}

if (this.fogCullDistSq) {
if (this.fogCullDistSq && this.projection.name !== 'globe') {
const fogCullDistSq = this.fogCullDistSq;
const horizonLineFromTop = this.horizonLineFromTop();
result = result.filter(entry => {
Expand Down Expand Up @@ -1795,7 +1795,7 @@ class Transform {

// The worldToFogMatrix can be used for conversion from world coordinates to relative camera position in
// units of fractions of the map height. Later composed with tile position to construct the fog tile matrix.
this.worldToFogMatrix = this._camera.getWorldToCameraPosition(cameraWorldSize, cameraPixelsPerMeter, windowScaleFactor);
this.worldToFogMatrix = this._camera.getWorldToCameraPosition(cameraWorldSize, cameraPixelsPerMeter, windowScaleFactor / this._projectionScaler);
}

_computeCameraPosition(targetPixelsPerMeter: ?number): Vec3 {
Expand Down
54 changes: 48 additions & 6 deletions src/render/draw_globe_atmosphere.js → src/render/draw_atmosphere.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,22 @@ import CullFaceMode from '../gl/cull_face_mode.js';
import {globeToMercatorTransition} from './../geo/projection/globe_util.js';
import {atmosphereUniformValues} from '../terrain/globe_raster_program.js';
import type Painter from './painter.js';
import {degToRad, mapValue} from '../util/util.js';
import {vec3, mat4} from 'gl-matrix';

export default drawGlobeAtmosphere;
export default drawAtmosphere;

function project(point, m) {
return vec3.transformMat4(point, point, m);
}

function drawGlobeAtmosphere(painter: Painter) {
function drawAtmosphere(painter: Painter) {
const fog = painter.style.fog;

if (!fog) {
return;
}

const context = painter.context;
const gl = context.gl;
const transform = painter.transform;
Expand Down Expand Up @@ -46,17 +53,52 @@ function drawGlobeAtmosphere(painter: Painter) {

const fadeOutTransition = 1.0 - globeToMercatorTransition(transform.zoom);

const fogOpacity = fog.getOpacity(transform.pitch);
const fogColor = fog.properties.get('color');
const fogColorUnpremultiplied = [
fogColor.a === 0.0 ? 0 : fogColor.r / fogColor.a,
fogColor.a === 0.0 ? 0 : fogColor.g / fogColor.a,
fogColor.a === 0.0 ? 0 : fogColor.b / fogColor.a,
fogColor.a
];
const skyColor = fog.properties.get('sky-color');
const skyColorUnpremultiplied = [
skyColor.a === 0.0 ? 0 : skyColor.r / skyColor.a,
skyColor.a === 0.0 ? 0 : skyColor.g / skyColor.a,
skyColor.a === 0.0 ? 0 : skyColor.b / skyColor.a,
skyColor.a
];
const spaceColor = fog.properties.get('space-color');
const spaceColorUnpremultiplied = [
spaceColor.a === 0.0 ? 0 : spaceColor.r / spaceColor.a,
spaceColor.a === 0.0 ? 0 : spaceColor.g / spaceColor.a,
spaceColor.a === 0.0 ? 0 : spaceColor.b / spaceColor.a,
spaceColor.a
];

const temporalOffset = (painter.frameCounter / 1000.0) % 1;
const latlon = [
degToRad(transform._center.lat) / (Math.PI * 0.5),
degToRad(transform._center.lng) / Math.PI
];

const starIntensity = mapValue(fog.properties.get('star-intensity'), 0.0, 1.0, 0.0, 0.25);

const uniforms = atmosphereUniformValues(
frustumTl,
frustumTr,
frustumBr,
frustumBl,
globeCenterInViewSpace,
globeRadius,
fadeOutTransition, // opacity
2.0, // fadeout range
[1.0, 1.0, 1.0], // start color
[0.0118, 0.7451, 0.9882]); // end color
fadeOutTransition,
fog.properties.get('horizon-blend'),
fogColorUnpremultiplied,
skyColorUnpremultiplied,
spaceColorUnpremultiplied,
latlon,
starIntensity,
temporalOffset);

painter.prepareDrawProgram(context, program);

Expand Down
Loading

0 comments on commit d61d506

Please sign in to comment.