maplibre-gl/src/webgl/draw/draw_sky.ts

BSD licensed community fork of mapbox-gl, a WebGL interactive maps library

import posAttributes from '../../data/pos_attributes.ts';
import {StencilMode} from '../stencil_mode.ts';
import {DepthMode} from '../depth_mode.ts';
import {CullFaceMode} from '../cull_face_mode.ts';
import {PosArray, TriangleIndexArray} from '../../data/array_types.g.ts';
import {SegmentVector} from '../../data/segment.ts';
import {skyUniformValues} from '../program/sky_program.ts';
import {atmosphereUniformValues} from '../program/atmosphere_program.ts';
import {getGlobeRadiusPixels} from '../../geo/projection/globe_utils.ts';
import {Mesh} from '../../render/mesh.ts';
import {mat4, vec3, vec4} from 'gl-matrix';
import {ColorMode} from '../color_mode.ts';

import type {Sky} from '../../style/sky.ts';
import type {Light} from '../../style/light.ts';
import type {IReadonlyTransform} from '../../geo/transform_interface.ts';
import type {Painter} from '../../render/painter.ts';
import type {Context} from '../context.ts';

function getMesh(context: Context, sky: Sky): Mesh {
    // Create the Sky mesh the first time we need it
    if (!sky.mesh) {
        const vertexArray = new PosArray();
        vertexArray.emplaceBack(-1, -1);
        vertexArray.emplaceBack(1, -1);
        vertexArray.emplaceBack(1, 1);
        vertexArray.emplaceBack(-1, 1);

        const indexArray = new TriangleIndexArray();
        indexArray.emplaceBack(0, 1, 2);
        indexArray.emplaceBack(0, 2, 3);

        sky.mesh = new Mesh(
            context.createVertexBuffer(vertexArray, posAttributes.members),
            context.createIndexBuffer(indexArray),
            SegmentVector.simpleSegment(0, 0, vertexArray.length, indexArray.length)
        );
    }

    return sky.mesh;
}

export function drawSky(painter: Painter, sky: Sky): void {
    const context = painter.context;
    const gl = context.gl;

    const skyUniforms = skyUniformValues(sky, painter.transform, painter.pixelRatio);

    const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadWrite, [0, 1]);
    const stencilMode = StencilMode.disabled;
    const colorMode = painter.colorModeForRenderPass();
    const program = painter.useProgram('sky');

    const mesh = getMesh(context, sky);

    program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode,
        CullFaceMode.disabled, skyUniforms, null, undefined, 'sky', mesh.vertexBuffer,
        mesh.indexBuffer, mesh.segments);
}

function getSunPos(light: Light, transform: IReadonlyTransform): vec3 {
    const lightPos = light.getCartesianPosition();
    vec3.negate(lightPos, lightPos);

    const lightMat = mat4.identity(new Float64Array(16));

    if (light.properties.get('anchor') === 'map') {
        mat4.rotateZ(lightMat, lightMat, transform.rollInRadians);
        mat4.rotateX(lightMat, lightMat, -transform.pitchInRadians);
        mat4.rotateZ(lightMat, lightMat, transform.bearingInRadians);
        mat4.rotateX(lightMat, lightMat, transform.center.lat * Math.PI / 180.0);
        mat4.rotateY(lightMat, lightMat, -transform.center.lng * Math.PI / 180.0);
    }

    vec3.transformMat4(lightPos, lightPos, lightMat);

    return lightPos;
}

export function drawAtmosphere(painter: Painter, sky: Sky, light: Light): void {
    const context = painter.context;
    const gl = context.gl;
    const program = painter.useProgram('atmosphere');
    const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadOnly, [0, 1]);
    const transform = painter.transform;

    const sunPos = getSunPos(light, painter.transform);

    const projectionData = transform.getProjectionData({overscaledTileID: null, applyGlobeMatrix: true, applyTerrainMatrix: true});
    const atmosphereBlend = sky.properties.get('atmosphere-blend') * projectionData.projectionTransition;

    if (atmosphereBlend === 0) {
        // Don't draw anything if atmosphere is fully transparent
        return;
    }

    const globeRadius = getGlobeRadiusPixels(transform.worldSize, transform.center.lat);
    const invProjMatrix = transform.inverseProjectionMatrix;
    const vec = new Float64Array(4) as any as vec4;
    vec[3] = 1;
    vec4.transformMat4(vec, vec, transform.modelViewProjectionMatrix);
    vec[0] /= vec[3];
    vec[1] /= vec[3];
    vec[2] /= vec[3];
    vec[3] = 1;
    vec4.transformMat4(vec, vec, invProjMatrix);
    vec[0] /= vec[3];
    vec[1] /= vec[3];
    vec[2] /= vec[3];
    vec[3] = 1;
    const globePosition = [vec[0], vec[1], vec[2]] as vec3;

    const uniformValues = atmosphereUniformValues(sunPos, atmosphereBlend, globePosition, globeRadius, invProjMatrix);

    const mesh = getMesh(context, sky);

    program.draw(context, gl.TRIANGLES, depthMode, StencilMode.disabled, ColorMode.alphaBlended, CullFaceMode.disabled, uniformValues, null, null, 'atmosphere', mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
}