@scoova/mgl 1.0.0

package/src/render/program/symbol_program.ts

@@ -0,0 +1,266 @@
+import {Uniform1i, Uniform1f, Uniform2f, UniformMatrix4f} from '../uniform_binding';
+import {extend} from '../../util/util';
+
+import type {Context} from '../../gl/context';
+import type {Painter} from '../painter';
+import type {UniformValues, UniformLocations} from '../uniform_binding';
+import {mat4} from 'gl-matrix';
+
+export type SymbolIconUniformsType = {
+    'u_is_size_zoom_constant': Uniform1i;
+    'u_is_size_feature_constant': Uniform1i;
+    'u_size_t': Uniform1f;
+    'u_size': Uniform1f;
+    'u_camera_to_center_distance': Uniform1f;
+    'u_pitch': Uniform1f;
+    'u_rotate_symbol': Uniform1i;
+    'u_aspect_ratio': Uniform1f;
+    'u_fade_change': Uniform1f;
+    'u_matrix': UniformMatrix4f;
+    'u_label_plane_matrix': UniformMatrix4f;
+    'u_coord_matrix': UniformMatrix4f;
+    'u_is_text': Uniform1i;
+    'u_pitch_with_map': Uniform1i;
+    'u_is_along_line': Uniform1i;
+    'u_is_variable_anchor': Uniform1i;
+    'u_texsize': Uniform2f;
+    'u_texture': Uniform1i;
+    'u_translation': Uniform2f;
+    'u_pitched_scale': Uniform1f;
+};
+
+export type SymbolSDFUniformsType = {
+    'u_is_size_zoom_constant': Uniform1i;
+    'u_is_size_feature_constant': Uniform1i;
+    'u_size_t': Uniform1f;
+    'u_size': Uniform1f;
+    'u_camera_to_center_distance': Uniform1f;
+    'u_pitch': Uniform1f;
+    'u_rotate_symbol': Uniform1i;
+    'u_aspect_ratio': Uniform1f;
+    'u_fade_change': Uniform1f;
+    'u_matrix': UniformMatrix4f;
+    'u_label_plane_matrix': UniformMatrix4f;
+    'u_coord_matrix': UniformMatrix4f;
+    'u_is_text': Uniform1i;
+    'u_pitch_with_map': Uniform1i;
+    'u_is_along_line': Uniform1i;
+    'u_is_variable_anchor': Uniform1i;
+    'u_texsize': Uniform2f;
+    'u_texture': Uniform1i;
+    'u_gamma_scale': Uniform1f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_is_halo': Uniform1i;
+    'u_translation': Uniform2f;
+    'u_pitched_scale': Uniform1f;
+};
+
+export type symbolTextAndIconUniformsType = {
+    'u_is_size_zoom_constant': Uniform1i;
+    'u_is_size_feature_constant': Uniform1i;
+    'u_size_t': Uniform1f;
+    'u_size': Uniform1f;
+    'u_camera_to_center_distance': Uniform1f;
+    'u_pitch': Uniform1f;
+    'u_rotate_symbol': Uniform1i;
+    'u_aspect_ratio': Uniform1f;
+    'u_fade_change': Uniform1f;
+    'u_matrix': UniformMatrix4f;
+    'u_label_plane_matrix': UniformMatrix4f;
+    'u_coord_matrix': UniformMatrix4f;
+    'u_is_text': Uniform1i;
+    'u_pitch_with_map': Uniform1i;
+    'u_is_along_line': Uniform1i;
+    'u_is_variable_anchor': Uniform1i;
+    'u_texsize': Uniform2f;
+    'u_texsize_icon': Uniform2f;
+    'u_texture': Uniform1i;
+    'u_texture_icon': Uniform1i;
+    'u_gamma_scale': Uniform1f;
+    'u_device_pixel_ratio': Uniform1f;
+    'u_is_halo': Uniform1i;
+    'u_translation': Uniform2f;
+    'u_pitched_scale': Uniform1f;
+};
+
+const symbolIconUniforms = (context: Context, locations: UniformLocations): SymbolIconUniformsType => ({
+    'u_is_size_zoom_constant': new Uniform1i(context, locations.u_is_size_zoom_constant),
+    'u_is_size_feature_constant': new Uniform1i(context, locations.u_is_size_feature_constant),
+    'u_size_t': new Uniform1f(context, locations.u_size_t),
+    'u_size': new Uniform1f(context, locations.u_size),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
+    'u_pitch': new Uniform1f(context, locations.u_pitch),
+    'u_rotate_symbol': new Uniform1i(context, locations.u_rotate_symbol),
+    'u_aspect_ratio': new Uniform1f(context, locations.u_aspect_ratio),
+    'u_fade_change': new Uniform1f(context, locations.u_fade_change),
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_label_plane_matrix': new UniformMatrix4f(context, locations.u_label_plane_matrix),
+    'u_coord_matrix': new UniformMatrix4f(context, locations.u_coord_matrix),
+    'u_is_text': new Uniform1i(context, locations.u_is_text),
+    'u_pitch_with_map': new Uniform1i(context, locations.u_pitch_with_map),
+    'u_is_along_line': new Uniform1i(context, locations.u_is_along_line),
+    'u_is_variable_anchor': new Uniform1i(context, locations.u_is_variable_anchor),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_translation': new Uniform2f(context, locations.u_translation),
+    'u_pitched_scale': new Uniform1f(context, locations.u_pitched_scale),
+});
+
+const symbolSDFUniforms = (context: Context, locations: UniformLocations): SymbolSDFUniformsType => ({
+    'u_is_size_zoom_constant': new Uniform1i(context, locations.u_is_size_zoom_constant),
+    'u_is_size_feature_constant': new Uniform1i(context, locations.u_is_size_feature_constant),
+    'u_size_t': new Uniform1f(context, locations.u_size_t),
+    'u_size': new Uniform1f(context, locations.u_size),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
+    'u_pitch': new Uniform1f(context, locations.u_pitch),
+    'u_rotate_symbol': new Uniform1i(context, locations.u_rotate_symbol),
+    'u_aspect_ratio': new Uniform1f(context, locations.u_aspect_ratio),
+    'u_fade_change': new Uniform1f(context, locations.u_fade_change),
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_label_plane_matrix': new UniformMatrix4f(context, locations.u_label_plane_matrix),
+    'u_coord_matrix': new UniformMatrix4f(context, locations.u_coord_matrix),
+    'u_is_text': new Uniform1i(context, locations.u_is_text),
+    'u_pitch_with_map': new Uniform1i(context, locations.u_pitch_with_map),
+    'u_is_along_line': new Uniform1i(context, locations.u_is_along_line),
+    'u_is_variable_anchor': new Uniform1i(context, locations.u_is_variable_anchor),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_gamma_scale': new Uniform1f(context, locations.u_gamma_scale),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_is_halo': new Uniform1i(context, locations.u_is_halo),
+    'u_translation': new Uniform2f(context, locations.u_translation),
+    'u_pitched_scale': new Uniform1f(context, locations.u_pitched_scale),
+});
+
+const symbolTextAndIconUniforms = (context: Context, locations: UniformLocations): symbolTextAndIconUniformsType => ({
+    'u_is_size_zoom_constant': new Uniform1i(context, locations.u_is_size_zoom_constant),
+    'u_is_size_feature_constant': new Uniform1i(context, locations.u_is_size_feature_constant),
+    'u_size_t': new Uniform1f(context, locations.u_size_t),
+    'u_size': new Uniform1f(context, locations.u_size),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
+    'u_pitch': new Uniform1f(context, locations.u_pitch),
+    'u_rotate_symbol': new Uniform1i(context, locations.u_rotate_symbol),
+    'u_aspect_ratio': new Uniform1f(context, locations.u_aspect_ratio),
+    'u_fade_change': new Uniform1f(context, locations.u_fade_change),
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_label_plane_matrix': new UniformMatrix4f(context, locations.u_label_plane_matrix),
+    'u_coord_matrix': new UniformMatrix4f(context, locations.u_coord_matrix),
+    'u_is_text': new Uniform1i(context, locations.u_is_text),
+    'u_pitch_with_map': new Uniform1i(context, locations.u_pitch_with_map),
+    'u_is_along_line': new Uniform1i(context, locations.u_is_along_line),
+    'u_is_variable_anchor': new Uniform1i(context, locations.u_is_variable_anchor),
+    'u_texsize': new Uniform2f(context, locations.u_texsize),
+    'u_texsize_icon': new Uniform2f(context, locations.u_texsize_icon),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_texture_icon': new Uniform1i(context, locations.u_texture_icon),
+    'u_gamma_scale': new Uniform1f(context, locations.u_gamma_scale),
+    'u_device_pixel_ratio': new Uniform1f(context, locations.u_device_pixel_ratio),
+    'u_is_halo': new Uniform1i(context, locations.u_is_halo),
+    'u_translation': new Uniform2f(context, locations.u_translation),
+    'u_pitched_scale': new Uniform1f(context, locations.u_pitched_scale),
+});
+
+const symbolIconUniformValues = (
+    functionType: string,
+    size: {
+        uSizeT: number;
+        uSize: number;
+    },
+    rotateInShader: boolean,
+    pitchWithMap: boolean,
+    isAlongLine: boolean,
+    isVariableAnchor: boolean,
+    painter: Painter,
+    matrix: mat4,
+    labelPlaneMatrix: mat4,
+    glCoordMatrix: mat4,
+    translation: [number, number],
+    isText: boolean,
+    texSize: [number, number],
+    pitchedScale: number
+): UniformValues<SymbolIconUniformsType> => {
+    const transform = painter.transform;
+
+    return {
+        'u_is_size_zoom_constant': +(functionType === 'constant' || functionType === 'source'),
+        'u_is_size_feature_constant': +(functionType === 'constant' || functionType === 'camera'),
+        'u_size_t': size ? size.uSizeT : 0,
+        'u_size': size ? size.uSize : 0,
+        'u_camera_to_center_distance': transform.cameraToCenterDistance,
+        'u_pitch': transform.pitch / 360 * 2 * Math.PI,
+        'u_rotate_symbol': +rotateInShader,
+        'u_aspect_ratio': transform.width / transform.height,
+        'u_fade_change': painter.options.fadeDuration ? painter.symbolFadeChange : 1,
+        'u_matrix': matrix,
+        'u_label_plane_matrix': labelPlaneMatrix,
+        'u_coord_matrix': glCoordMatrix,
+        'u_is_text': +isText,
+        'u_pitch_with_map': +pitchWithMap,
+        'u_is_along_line': isAlongLine,
+        'u_is_variable_anchor': isVariableAnchor,
+        'u_texsize': texSize,
+        'u_texture': 0,
+        'u_translation': translation,
+        'u_pitched_scale': pitchedScale
+    };
+};
+
+const symbolSDFUniformValues = (
+    functionType: string,
+    size: {
+        uSizeT: number;
+        uSize: number;
+    },
+    rotateInShader: boolean,
+    pitchWithMap: boolean,
+    isAlongLine: boolean,
+    isVariableAnchor: boolean,
+    painter: Painter,
+    matrix: mat4,
+    labelPlaneMatrix: mat4,
+    glCoordMatrix: mat4,
+    translation: [number, number],
+    isText: boolean,
+    texSize: [number, number],
+    isHalo: boolean,
+    pitchedScale: number
+): UniformValues<SymbolSDFUniformsType> => {
+    const transform = painter.transform;
+
+    return extend(symbolIconUniformValues(functionType, size,
+        rotateInShader, pitchWithMap, isAlongLine, isVariableAnchor, painter, matrix, labelPlaneMatrix,
+        glCoordMatrix, translation, isText, texSize, pitchedScale), {
+        'u_gamma_scale': (pitchWithMap ? Math.cos(transform._pitch) * transform.cameraToCenterDistance : 1),
+        'u_device_pixel_ratio': painter.pixelRatio,
+        'u_is_halo': +isHalo
+    });
+};
+
+const symbolTextAndIconUniformValues = (
+    functionType: string,
+    size: {
+        uSizeT: number;
+        uSize: number;
+    },
+    rotateInShader: boolean,
+    pitchWithMap: boolean,
+    isAlongLine: boolean,
+    isVariableAnchor: boolean,
+    painter: Painter,
+    matrix: mat4,
+    labelPlaneMatrix: mat4,
+    glCoordMatrix: mat4,
+    translation: [number, number],
+    texSizeSDF: [number, number],
+    texSizeIcon: [number, number],
+    pitchedScale: number
+): UniformValues<SymbolIconUniformsType> => {
+    return extend(symbolSDFUniformValues(functionType, size,
+        rotateInShader, pitchWithMap, isAlongLine, isVariableAnchor, painter, matrix, labelPlaneMatrix,
+        glCoordMatrix, translation, true, texSizeSDF, true, pitchedScale), {
+        'u_texsize_icon': texSizeIcon,
+        'u_texture_icon': 1
+    });
+};
+
+export {symbolIconUniforms, symbolSDFUniforms, symbolIconUniformValues, symbolSDFUniformValues, symbolTextAndIconUniformValues, symbolTextAndIconUniforms};

package/src/render/program/terrain_program.ts

@@ -0,0 +1,116 @@
+import {
+    Uniform1i,
+    Uniform1f,
+    Uniform4f,
+    UniformMatrix4f,
+    UniformColor
+} from '../uniform_binding';
+import type {Context} from '../../gl/context';
+import type {UniformValues, UniformLocations} from '../../render/uniform_binding';
+import {mat4} from 'gl-matrix';
+import {Sky} from '../../style/sky';
+import {Color} from '@maplibre/maplibre-gl-style-spec';
+
+export type TerrainPreludeUniformsType = {
+    'u_depth': Uniform1i;
+    'u_terrain': Uniform1i;
+    'u_terrain_dim': Uniform1f;
+    'u_terrain_matrix': UniformMatrix4f;
+    'u_terrain_unpack': Uniform4f;
+    'u_terrain_exaggeration': Uniform1f;
+};
+
+export type TerrainUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_texture': Uniform1i;
+    'u_ele_delta': Uniform1f;
+    'u_fog_matrix': UniformMatrix4f;
+    'u_fog_color': UniformColor;
+    'u_fog_ground_blend': Uniform1f;
+    'u_fog_ground_blend_opacity': Uniform1f;
+    'u_horizon_color': UniformColor;
+    'u_horizon_fog_blend': Uniform1f;
+};
+
+export type TerrainDepthUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_ele_delta': Uniform1f;
+};
+
+export type TerrainCoordsUniformsType = {
+    'u_matrix': UniformMatrix4f;
+    'u_texture': Uniform1i;
+    'u_terrain_coords_id': Uniform1f;
+    'u_ele_delta': Uniform1f;
+};
+
+const terrainPreludeUniforms = (context: Context, locations: UniformLocations): TerrainPreludeUniformsType => ({
+    'u_depth': new Uniform1i(context, locations.u_depth),
+    'u_terrain': new Uniform1i(context, locations.u_terrain),
+    'u_terrain_dim': new Uniform1f(context, locations.u_terrain_dim),
+    'u_terrain_matrix': new UniformMatrix4f(context, locations.u_terrain_matrix),
+    'u_terrain_unpack': new Uniform4f(context, locations.u_terrain_unpack),
+    'u_terrain_exaggeration': new Uniform1f(context, locations.u_terrain_exaggeration)
+});
+
+const terrainUniforms = (context: Context, locations: UniformLocations): TerrainUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_ele_delta': new Uniform1f(context, locations.u_ele_delta),
+    'u_fog_matrix': new UniformMatrix4f(context, locations.u_fog_matrix),
+    'u_fog_color': new UniformColor(context, locations.u_fog_color),
+    'u_fog_ground_blend': new Uniform1f(context, locations.u_fog_ground_blend),
+    'u_fog_ground_blend_opacity': new Uniform1f(context, locations.u_fog_ground_blend_opacity),
+    'u_horizon_color': new UniformColor(context, locations.u_horizon_color),
+    'u_horizon_fog_blend': new Uniform1f(context, locations.u_horizon_fog_blend)
+});
+
+const terrainDepthUniforms = (context: Context, locations: UniformLocations): TerrainDepthUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_ele_delta': new Uniform1f(context, locations.u_ele_delta)
+});
+
+const terrainCoordsUniforms = (context: Context, locations: UniformLocations): TerrainCoordsUniformsType => ({
+    'u_matrix': new UniformMatrix4f(context, locations.u_matrix),
+    'u_texture': new Uniform1i(context, locations.u_texture),
+    'u_terrain_coords_id': new Uniform1f(context, locations.u_terrain_coords_id),
+    'u_ele_delta': new Uniform1f(context, locations.u_ele_delta)
+});
+
+const terrainUniformValues = (
+    matrix: mat4,
+    eleDelta: number,
+    fogMatrix: mat4,
+    sky: Sky,
+    pitch: number): UniformValues<TerrainUniformsType> => ({
+    'u_matrix': matrix,
+    'u_texture': 0,
+    'u_ele_delta': eleDelta,
+    'u_fog_matrix': fogMatrix,
+    'u_fog_color': sky ? sky.properties.get('fog-color') : Color.white,
+    'u_fog_ground_blend': sky ? sky.properties.get('fog-ground-blend') : 1,
+    'u_fog_ground_blend_opacity': sky ? sky.calculateFogBlendOpacity(pitch) : 0,
+    'u_horizon_color': sky ? sky.properties.get('horizon-color') : Color.white,
+    'u_horizon_fog_blend': sky ? sky.properties.get('horizon-fog-blend') : 1
+});
+
+const terrainDepthUniformValues = (
+    matrix: mat4,
+    eleDelta: number
+): UniformValues<TerrainDepthUniformsType> => ({
+    'u_matrix': matrix,
+    'u_ele_delta': eleDelta
+});
+
+const terrainCoordsUniformValues = (
+    matrix: mat4,
+    coordsId: number,
+    eleDelta: number
+): UniformValues<TerrainCoordsUniformsType> => ({
+    'u_matrix': matrix,
+    'u_terrain_coords_id': coordsId / 255,
+    'u_texture': 0,
+    'u_ele_delta': eleDelta
+});
+
+export {terrainUniforms, terrainDepthUniforms, terrainCoordsUniforms, terrainPreludeUniforms, terrainUniformValues, terrainDepthUniformValues, terrainCoordsUniformValues};

package/src/render/program.ts

@@ -0,0 +1,233 @@
+import {shaders} from '../shaders/shaders';
+import {ProgramConfiguration} from '../data/program_configuration';
+import {VertexArrayObject} from './vertex_array_object';
+import {Context} from '../gl/context';
+
+import type {SegmentVector} from '../data/segment';
+import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {IndexBuffer} from '../gl/index_buffer';
+import type {DepthMode} from '../gl/depth_mode';
+import type {StencilMode} from '../gl/stencil_mode';
+import type {ColorMode} from '../gl/color_mode';
+import type {CullFaceMode} from '../gl/cull_face_mode';
+import type {UniformBindings, UniformValues, UniformLocations} from './uniform_binding';
+import type {BinderUniform} from '../data/program_configuration';
+import {terrainPreludeUniforms, TerrainPreludeUniformsType} from './program/terrain_program';
+import type {TerrainData} from '../render/terrain';
+import {Terrain} from '../render/terrain';
+
+export type DrawMode = WebGLRenderingContextBase['LINES'] | WebGLRenderingContextBase['TRIANGLES'] | WebGL2RenderingContext['LINE_STRIP'];
+
+function getTokenizedAttributesAndUniforms(array: Array<string>): Array<string> {
+    const result = [];
+
+    for (let i = 0; i < array.length; i++) {
+        if (array[i] === null) continue;
+        const token = array[i].split(' ');
+        result.push(token.pop());
+    }
+    return result;
+}
+
+/**
+ * @internal
+ * A webgl program to execute in the GPU space
+ */
+export class Program<Us extends UniformBindings> {
+    program: WebGLProgram;
+    attributes: {[_: string]: number};
+    numAttributes: number;
+    fixedUniforms: Us;
+    terrainUniforms: TerrainPreludeUniformsType;
+    binderUniforms: Array<BinderUniform>;
+    failedToCreate: boolean;
+
+    constructor(context: Context,
+        source: {
+            fragmentSource: string;
+            vertexSource: string;
+            staticAttributes: Array<string>;
+            staticUniforms: Array<string>;
+        },
+        configuration: ProgramConfiguration,
+        fixedUniforms: (b: Context, a: UniformLocations) => Us,
+        showOverdrawInspector: boolean,
+        terrain: Terrain) {
+
+        const gl = context.gl;
+        this.program = gl.createProgram();
+
+        const staticAttrInfo = getTokenizedAttributesAndUniforms(source.staticAttributes);
+        const dynamicAttrInfo = configuration ? configuration.getBinderAttributes() : [];
+        const allAttrInfo = staticAttrInfo.concat(dynamicAttrInfo);
+
+        const preludeUniformsInfo = shaders.prelude.staticUniforms ? getTokenizedAttributesAndUniforms(shaders.prelude.staticUniforms) : [];
+        const staticUniformsInfo = source.staticUniforms ? getTokenizedAttributesAndUniforms(source.staticUniforms) : [];
+        const dynamicUniformsInfo = configuration ? configuration.getBinderUniforms() : [];
+        // remove duplicate uniforms
+        const uniformList = preludeUniformsInfo.concat(staticUniformsInfo).concat(dynamicUniformsInfo);
+        const allUniformsInfo = [];
+        for (const uniform of uniformList) {
+            if (allUniformsInfo.indexOf(uniform) < 0) allUniformsInfo.push(uniform);
+        }
+
+        const defines = configuration ? configuration.defines() : [];
+        if (showOverdrawInspector) {
+            defines.push('#define OVERDRAW_INSPECTOR;');
+        }
+        if (terrain) {
+            defines.push('#define TERRAIN3D;');
+        }
+
+        const fragmentSource = defines.concat(shaders.prelude.fragmentSource, source.fragmentSource).join('\n');
+        const vertexSource = defines.concat(shaders.prelude.vertexSource, source.vertexSource).join('\n');
+
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        if (gl.isContextLost()) {
+            this.failedToCreate = true;
+            return;
+        }
+        gl.shaderSource(fragmentShader, fragmentSource);
+        gl.compileShader(fragmentShader);
+
+        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            throw new Error(`Could not compile fragment shader: ${gl.getShaderInfoLog(fragmentShader)}`);
+        }
+
+        gl.attachShader(this.program, fragmentShader);
+
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        if (gl.isContextLost()) {
+            this.failedToCreate = true;
+            return;
+        }
+        gl.shaderSource(vertexShader, vertexSource);
+        gl.compileShader(vertexShader);
+
+        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            throw new Error(`Could not compile vertex shader: ${gl.getShaderInfoLog(vertexShader)}`);
+        }
+
+        gl.attachShader(this.program, vertexShader);
+
+        this.attributes = {};
+        const uniformLocations = {};
+
+        this.numAttributes = allAttrInfo.length;
+
+        for (let i = 0; i < this.numAttributes; i++) {
+            if (allAttrInfo[i]) {
+                gl.bindAttribLocation(this.program, i, allAttrInfo[i]);
+                this.attributes[allAttrInfo[i]] = i;
+            }
+        }
+
+        gl.linkProgram(this.program);
+
+        if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+            throw new Error(`Program failed to link: ${gl.getProgramInfoLog(this.program)}`);
+        }
+
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+
+        for (let it = 0; it < allUniformsInfo.length; it++) {
+            const uniform = allUniformsInfo[it];
+            if (uniform && !uniformLocations[uniform]) {
+                const uniformLocation = gl.getUniformLocation(this.program, uniform);
+                if (uniformLocation) {
+                    uniformLocations[uniform] = uniformLocation;
+                }
+            }
+        }
+
+        this.fixedUniforms = fixedUniforms(context, uniformLocations);
+        this.terrainUniforms = terrainPreludeUniforms(context, uniformLocations);
+        this.binderUniforms = configuration ? configuration.getUniforms(context, uniformLocations) : [];
+    }
+
+    draw(context: Context,
+        drawMode: DrawMode,
+        depthMode: Readonly<DepthMode>,
+        stencilMode: Readonly<StencilMode>,
+        colorMode: Readonly<ColorMode>,
+        cullFaceMode: Readonly<CullFaceMode>,
+        uniformValues: UniformValues<Us>,
+        terrain: TerrainData,
+        layerID: string,
+        layoutVertexBuffer: VertexBuffer,
+        indexBuffer: IndexBuffer,
+        segments: SegmentVector,
+        currentProperties?: any,
+        zoom?: number | null,
+        configuration?: ProgramConfiguration | null,
+        dynamicLayoutBuffer?: VertexBuffer | null,
+        dynamicLayoutBuffer2?: VertexBuffer | null,
+        dynamicLayoutBuffer3?: VertexBuffer | null) {
+
+        const gl = context.gl;
+
+        if (this.failedToCreate) return;
+
+        context.program.set(this.program);
+        context.setDepthMode(depthMode);
+        context.setStencilMode(stencilMode);
+        context.setColorMode(colorMode);
+        context.setCullFace(cullFaceMode);
+
+        // set variables used by the 3d functions defined in _prelude.vertex.glsl
+        if (terrain) {
+            context.activeTexture.set(gl.TEXTURE2);
+            gl.bindTexture(gl.TEXTURE_2D, terrain.depthTexture);
+            context.activeTexture.set(gl.TEXTURE3);
+            gl.bindTexture(gl.TEXTURE_2D, terrain.texture);
+            for (const name in this.terrainUniforms) {
+                this.terrainUniforms[name].set(terrain[name]);
+            }
+        }
+
+        for (const name in this.fixedUniforms) {
+            this.fixedUniforms[name].set(uniformValues[name]);
+        }
+
+        if (configuration) {
+            configuration.setUniforms(context, this.binderUniforms, currentProperties, {zoom: (zoom as any)});
+        }
+
+        let primitiveSize = 0;
+        switch (drawMode) {
+            case gl.LINES:
+                primitiveSize = 2;
+                break;
+            case gl.TRIANGLES:
+                primitiveSize = 3;
+                break;
+            case gl.LINE_STRIP:
+                primitiveSize = 1;
+                break;
+        }
+
+        for (const segment of segments.get()) {
+            const vaos = segment.vaos || (segment.vaos = {});
+            const vao: VertexArrayObject = vaos[layerID] || (vaos[layerID] = new VertexArrayObject());
+
+            vao.bind(
+                context,
+                this,
+                layoutVertexBuffer,
+                configuration ? configuration.getPaintVertexBuffers() : [],
+                indexBuffer,
+                segment.vertexOffset,
+                dynamicLayoutBuffer,
+                dynamicLayoutBuffer2,
+                dynamicLayoutBuffer3
+            );
+
+            gl.drawElements(
+                drawMode,
+                segment.primitiveLength * primitiveSize,
+                gl.UNSIGNED_SHORT,
+                segment.primitiveOffset * primitiveSize * 2);
+        }
+    }
+}