@scoova/mgl 1.0.0

package/src/render/draw_collision_debug.ts

@@ -0,0 +1,168 @@
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {StyleLayer} from '../style/style_layer';
+import type {OverscaledTileID} from '../source/tile_id';
+import type {SymbolBucket} from '../data/bucket/symbol_bucket';
+import {DepthMode} from '../gl/depth_mode';
+import {StencilMode} from '../gl/stencil_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {collisionUniformValues, collisionCircleUniformValues} from './program/collision_program';
+import {QuadTriangleArray, CollisionCircleLayoutArray} from '../data/array_types.g';
+import {collisionCircleLayout} from '../data/bucket/symbol_attributes';
+import {SegmentVector} from '../data/segment';
+import {mat4} from 'gl-matrix';
+import {VertexBuffer} from '../gl/vertex_buffer';
+import {IndexBuffer} from '../gl/index_buffer';
+
+type TileBatch = {
+    circleArray: Array<number>;
+    circleOffset: number;
+    transform: mat4;
+    invTransform: mat4;
+    coord: OverscaledTileID;
+};
+
+let quadTriangles: QuadTriangleArray;
+
+export function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>, isText: boolean) {
+    const context = painter.context;
+    const gl = context.gl;
+    const program = painter.useProgram('collisionBox');
+    const tileBatches: Array<TileBatch> = [];
+    let circleCount = 0;
+    let circleOffset = 0;
+
+    for (let i = 0; i < coords.length; i++) {
+        const coord = coords[i];
+        const tile = sourceCache.getTile(coord);
+        const bucket: SymbolBucket = (tile.getBucket(layer) as any);
+        if (!bucket) continue;
+        const buffers = isText ? bucket.textCollisionBox : bucket.iconCollisionBox;
+        // Get collision circle data of this bucket
+        const circleArray: Array<number> = bucket.collisionCircleArray;
+        if (circleArray.length > 0) {
+            // We need to know the projection matrix that was used for projecting collision circles to the screen.
+            // This might vary between buckets as the symbol placement is a continuous process. This matrix is
+            // required for transforming points from previous screen space to the current one
+            const invTransform = mat4.create();
+
+            mat4.mul(invTransform, bucket.placementInvProjMatrix, painter.transform.glCoordMatrix);
+            mat4.mul(invTransform, invTransform, bucket.placementViewportMatrix);
+
+            tileBatches.push({
+                circleArray,
+                circleOffset,
+                transform: coord.posMatrix, // Ignore translation
+                invTransform,
+                coord
+            });
+
+            circleCount += circleArray.length / 4;  // 4 values per circle
+            circleOffset = circleCount;
+        }
+
+        // Draw collision boxes
+        if (!buffers) {
+            continue;
+        }
+
+        program.draw(context, gl.LINES,
+            DepthMode.disabled, StencilMode.disabled,
+            painter.colorModeForRenderPass(),
+            CullFaceMode.disabled,
+            collisionUniformValues(painter.transform, coord.posMatrix),
+            painter.style.map.terrain && painter.style.map.terrain.getTerrainData(coord),
+            layer.id, buffers.layoutVertexBuffer, buffers.indexBuffer,
+            buffers.segments, null, painter.transform.zoom, null, null,
+            buffers.collisionVertexBuffer);
+    }
+
+    if (!isText || !tileBatches.length) {
+        return;
+    }
+
+    // Render collision circles
+    const circleProgram = painter.useProgram('collisionCircle');
+
+    // Construct vertex data
+    const vertexData = new CollisionCircleLayoutArray();
+    vertexData.resize(circleCount * 4);
+    vertexData._trim();
+
+    let vertexOffset = 0;
+
+    for (const batch of tileBatches) {
+        for (let i = 0; i < batch.circleArray.length / 4; i++) {
+            const circleIdx = i * 4;
+            const x = batch.circleArray[circleIdx + 0];
+            const y = batch.circleArray[circleIdx + 1];
+            const radius = batch.circleArray[circleIdx + 2];
+            const collision = batch.circleArray[circleIdx + 3];
+
+            // 4 floats per vertex, 4 vertices per quad
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 0);
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 1);
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 2);
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 3);
+        }
+    }
+    if (!quadTriangles || quadTriangles.length < circleCount * 2) {
+        quadTriangles = createQuadTriangles(circleCount);
+    }
+
+    const indexBuffer: IndexBuffer = context.createIndexBuffer(quadTriangles, true);
+    const vertexBuffer: VertexBuffer = context.createVertexBuffer(vertexData, collisionCircleLayout.members, true);
+
+    // Render batches
+    for (const batch of tileBatches) {
+        const uniforms = collisionCircleUniformValues(
+            batch.transform,
+            batch.invTransform,
+            painter.transform
+        );
+
+        circleProgram.draw(
+            context,
+            gl.TRIANGLES,
+            DepthMode.disabled,
+            StencilMode.disabled,
+            painter.colorModeForRenderPass(),
+            CullFaceMode.disabled,
+            uniforms,
+            painter.style.map.terrain && painter.style.map.terrain.getTerrainData(batch.coord),
+            layer.id,
+            vertexBuffer,
+            indexBuffer,
+            SegmentVector.simpleSegment(0, batch.circleOffset * 2, batch.circleArray.length, batch.circleArray.length / 2),
+            null,
+            painter.transform.zoom,
+            null,
+            null,
+            null);
+    }
+
+    vertexBuffer.destroy();
+    indexBuffer.destroy();
+}
+
+function createQuadTriangles(quadCount: number): QuadTriangleArray {
+    const triCount = quadCount * 2;
+    const array = new QuadTriangleArray();
+
+    array.resize(triCount);
+    array._trim();
+
+    // Two triangles and 4 vertices per quad.
+    for (let i = 0; i < triCount; i++) {
+        const idx = i * 6;
+
+        array.uint16[idx + 0] = i * 4 + 0;
+        array.uint16[idx + 1] = i * 4 + 1;
+        array.uint16[idx + 2] = i * 4 + 2;
+        array.uint16[idx + 3] = i * 4 + 2;
+        array.uint16[idx + 4] = i * 4 + 3;
+        array.uint16[idx + 5] = i * 4 + 0;
+    }
+
+    return array;
+}

package/src/render/draw_custom.test.ts

@@ -0,0 +1,73 @@
+import {mat4} from 'gl-matrix';
+import {OverscaledTileID} from '../source/tile_id';
+import {SourceCache} from '../source/source_cache';
+import {Tile} from '../source/tile';
+import {Painter} from './painter';
+import type {Map} from '../ui/map';
+import {Transform} from '../geo/transform';
+import {drawCustom} from './draw_custom';
+import {CustomStyleLayer} from '../style/style_layer/custom_style_layer';
+
+jest.mock('./painter');
+jest.mock('./program');
+jest.mock('../source/source_cache');
+jest.mock('../source/tile');
+jest.mock('../data/bucket/symbol_bucket');
+jest.mock('../symbol/projection');
+
+describe('drawCustom', () => {
+    test('should return custom render method inputs', () => {
+        // same transform setup as in transform.test.ts 'creates a transform', so matrices of transform should be the same
+        const transform = new Transform(0, 22, 0, 60, true);
+        transform.resize(500, 500);
+        transform.minPitch = 10;
+        transform.maxPitch = 10;
+        const mockPainter = new Painter(null, null);
+        mockPainter.renderPass = 'translucent';
+        mockPainter.transform = transform;
+        mockPainter.context = {
+            gl: {},
+            setColorMode: () => {},
+            setStencilMode: () => {},
+            setDepthMode: () => {},
+            setDirty: () => {},
+            bindFramebuffer: {
+                set: () => {}
+            }
+        } as any;
+
+        const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
+        tileId.posMatrix = mat4.create();
+        const tile = new Tile(tileId, 256);
+        tile.tileID = tileId;
+        tile.imageAtlasTexture = {
+            bind: () => { }
+        } as any;
+        // (tile.getBucket as jest.Mock).mockReturnValue(bucketMock);
+        const sourceCacheMock = new SourceCache(null, null, null);
+        (sourceCacheMock.getTile as jest.Mock).mockReturnValue(tile);
+        sourceCacheMock.map = {showCollisionBoxes: false} as any as Map;
+
+        let result;
+        const mockLayer = new CustomStyleLayer({
+            id: 'custom-layer',
+            type: 'custom',
+            render(gl, matrix, args) {
+                result = {
+                    gl,
+                    matrix,
+                    args
+                };
+            },
+        });
+        drawCustom(mockPainter, sourceCacheMock, mockLayer);
+        expect(result.gl).toBeDefined();
+        expect(result.matrix).toEqual([...mockPainter.transform.mercatorMatrix.values()]);
+        expect(result.args.farZ).toBe(804.8028169246645);
+        expect(result.args.farZ).toBe(mockPainter.transform.farZ);
+        expect(result.args.nearZ).toBe(mockPainter.transform.nearZ);
+        expect(result.args.fov).toBe(mockPainter.transform._fov);
+        expect(result.args.modelViewProjectionMatrix).toEqual(mockPainter.transform.modelViewProjectionMatrix);
+        expect(result.args.projectionMatrix).toEqual(mockPainter.transform.projectionMatrix);
+    });
+});

package/src/render/draw_custom.ts

@@ -0,0 +1,45 @@
+import {DepthMode} from '../gl/depth_mode';
+import {StencilMode} from '../gl/stencil_mode';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {CustomStyleLayer} from '../style/style_layer/custom_style_layer';
+
+export function drawCustom(painter: Painter, sourceCache: SourceCache, layer: CustomStyleLayer) {
+
+    const context = painter.context;
+    const implementation = layer.implementation;
+
+    if (painter.renderPass === 'offscreen') {
+
+        const prerender = implementation.prerender;
+        if (prerender) {
+            painter.setCustomLayerDefaults();
+            context.setColorMode(painter.colorModeForRenderPass());
+
+            prerender.call(implementation, context.gl, painter.transform.customLayerMatrix());
+
+            context.setDirty();
+            painter.setBaseState();
+        }
+
+    } else if (painter.renderPass === 'translucent') {
+
+        painter.setCustomLayerDefaults();
+
+        context.setColorMode(painter.colorModeForRenderPass());
+        context.setStencilMode(StencilMode.disabled);
+
+        const depthMode = implementation.renderingMode === '3d' ?
+            new DepthMode(painter.context.gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D) :
+            painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+
+        context.setDepthMode(depthMode);
+
+        implementation.render(context.gl, painter.transform.customLayerMatrix(), {farZ: painter.transform.farZ, nearZ: painter.transform.nearZ, fov: painter.transform._fov, modelViewProjectionMatrix: painter.transform.modelViewProjectionMatrix, projectionMatrix: painter.transform.projectionMatrix});
+
+        context.setDirty();
+        painter.setBaseState();
+        context.bindFramebuffer.set(null);
+    }
+}

package/src/render/draw_debug.test.ts

@@ -0,0 +1,122 @@
+import {SourceCache} from '../source/source_cache';
+import {RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {Style} from '../style/style';
+import {FillStyleLayer} from '../style/style_layer/fill_style_layer';
+import {RasterStyleLayer} from '../style/style_layer/raster_style_layer';
+import {selectDebugSource} from './draw_debug';
+
+jest.mock('../style/style');
+
+const zoom = 14;
+
+const defaultSources: { [_: string]: SourceSpecification } = {
+    'raster_tiles': {
+        type: 'raster',
+        maxzoom: 19,
+    },
+    'vector_tiles': {
+        type: 'vector',
+        maxzoom: 14,
+    }
+};
+
+const buildMockStyle = (layers, sources = defaultSources) => {
+    const style = new Style(null);
+    style.sourceCaches = Object.fromEntries(
+        Object.entries(sources).map(
+            ([id, spec]) => [id, {id, getSource: () => spec} as SourceCache]));
+    style._layers = layers;
+    return style;
+};
+
+describe('selectDebugSource', () => {
+    test('Decides on vector source if it exists', () => {
+        const layers = {
+            '1': new RasterStyleLayer(
+                {id: '1', type: 'raster', source: 'raster_tiles'}),
+            '2': new FillStyleLayer(
+                {id: '2', type: 'fill', source: 'vector_tiles'}),
+        };
+        const mockStyle = buildMockStyle(layers);
+        const source = selectDebugSource(mockStyle, zoom);
+        expect(source).toHaveProperty('id', 'vector_tiles');
+    });
+
+    test('Decides raster if vector source not shown at this zoom', () => {
+        const layers = {
+            '1': new RasterStyleLayer(
+                {id: '1', type: 'raster', source: 'raster_tiles'}),
+            '2': new FillStyleLayer(
+                {id: '2', type: 'fill', source: 'vector_tiles', maxzoom: 13}),
+        };
+        const mockStyle = buildMockStyle(layers);
+        const source = selectDebugSource(mockStyle, zoom);
+        expect(source).toHaveProperty('id', 'raster_tiles');
+    });
+
+    test('Decides raster if vector layer has visibility none', () => {
+        const layers = {
+            '1': new RasterStyleLayer(
+                {id: '1', type: 'raster', source: 'raster_tiles'}),
+            '2': new FillStyleLayer(
+                {id: '2', type: 'fill', source: 'vector_tiles', layout: {visibility: 'none'}}),
+        };
+        const style = buildMockStyle(layers);
+        const source = selectDebugSource(style, zoom);
+        expect(source).toHaveProperty('id', 'raster_tiles');
+    });
+
+    test('Decides raster if no vector source exists', () => {
+        const layers = {
+            '1': new RasterStyleLayer(
+                {id: '1', type: 'raster', source: 'raster_tiles'}),
+        };
+        const mockStyle = buildMockStyle(layers);
+        const source = selectDebugSource(mockStyle, zoom);
+        expect(source).toHaveProperty('id', 'raster_tiles');
+    });
+
+    test('Decides on vector source with highest zoom level', () => {
+        const sources: { [_: string]: VectorSourceSpecification } = {
+            'vector_11': {
+                type: 'vector',
+                maxzoom: 11,
+            },
+            'vector_14': {
+                type: 'vector',
+                maxzoom: 14,
+            }
+        };
+        const layers = {
+            'fill_11': new FillStyleLayer(
+                {id: 'fill_11', type: 'fill', source: 'vector_11'}),
+            'fill_14': new FillStyleLayer(
+                {id: 'fill_14', type: 'fill', source: 'vector_14'}),
+        };
+        const mockStyle = buildMockStyle(layers, sources);
+        const source = selectDebugSource(mockStyle, zoom);
+        expect(source).toHaveProperty('id', 'vector_14');
+    });
+
+    test('Decides on raster source with highest zoom level', () => {
+        const sources: { [_: string]: RasterSourceSpecification } = {
+            'raster_11': {
+                type: 'raster',
+                maxzoom: 11,
+            },
+            'raster_14': {
+                type: 'raster',
+                maxzoom: 14,
+            }
+        };
+        const layers = {
+            'raster_11': new RasterStyleLayer(
+                {id: 'raster_11', type: 'raster', source: 'raster_11'}),
+            'raster_14': new RasterStyleLayer(
+                {id: 'raster_14', type: 'raster', source: 'raster_14'}),
+        };
+        const mockStyle = buildMockStyle(layers, sources);
+        const source = selectDebugSource(mockStyle, zoom);
+        expect(source).toHaveProperty('id', 'raster_14');
+    });
+});

package/src/render/draw_debug.ts

@@ -0,0 +1,148 @@
+import {DepthMode} from '../gl/depth_mode';
+import {StencilMode} from '../gl/stencil_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {debugUniformValues} from './program/debug_program';
+import {Color} from '@maplibre/maplibre-gl-style-spec';
+import {ColorMode} from '../gl/color_mode';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {OverscaledTileID} from '../source/tile_id';
+import {Style} from '../style/style';
+
+const topColor = new Color(1, 0, 0, 1);
+const btmColor = new Color(0, 1, 0, 1);
+const leftColor = new Color(0, 0, 1, 1);
+const rightColor = new Color(1, 0, 1, 1);
+const centerColor = new Color(0, 1, 1, 1);
+
+export function drawDebugPadding(painter: Painter) {
+    const padding = painter.transform.padding;
+    const lineWidth = 3;
+    // Top
+    drawHorizontalLine(painter, painter.transform.height - (padding.top || 0), lineWidth, topColor);
+    // Bottom
+    drawHorizontalLine(painter, padding.bottom || 0, lineWidth, btmColor);
+    // Left
+    drawVerticalLine(painter, padding.left || 0, lineWidth, leftColor);
+    // Right
+    drawVerticalLine(painter, painter.transform.width - (padding.right || 0), lineWidth, rightColor);
+    // Center
+    const center = painter.transform.centerPoint;
+    drawCrosshair(painter, center.x, painter.transform.height - center.y, centerColor);
+}
+
+function drawCrosshair(painter: Painter, x: number, y: number, color: Color) {
+    const size = 20;
+    const lineWidth = 2;
+    //Vertical line
+    drawDebugSSRect(painter, x - lineWidth / 2, y - size / 2, lineWidth, size, color);
+    //Horizontal line
+    drawDebugSSRect(painter, x - size / 2, y - lineWidth / 2, size, lineWidth, color);
+}
+
+function drawHorizontalLine(painter: Painter, y: number, lineWidth: number, color: Color) {
+    drawDebugSSRect(painter, 0, y  + lineWidth / 2, painter.transform.width,  lineWidth, color);
+}
+
+function drawVerticalLine(painter: Painter, x: number, lineWidth: number, color: Color) {
+    drawDebugSSRect(painter, x - lineWidth / 2, 0, lineWidth,  painter.transform.height, color);
+}
+
+function drawDebugSSRect(painter: Painter, x: number, y: number, width: number, height: number, color: Color) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(x * painter.pixelRatio, y * painter.pixelRatio, width * painter.pixelRatio, height * painter.pixelRatio);
+    context.clear({color});
+    gl.disable(gl.SCISSOR_TEST);
+}
+
+export function drawDebug(painter: Painter, sourceCache: SourceCache, coords: Array<OverscaledTileID>) {
+    for (let i = 0; i < coords.length; i++) {
+        drawDebugTile(painter, sourceCache, coords[i]);
+    }
+}
+
+function drawDebugTile(painter: Painter, sourceCache: SourceCache, coord: OverscaledTileID) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    const posMatrix = coord.posMatrix;
+    const program = painter.useProgram('debug');
+
+    const depthMode = DepthMode.disabled;
+    const stencilMode = StencilMode.disabled;
+    const colorMode = painter.colorModeForRenderPass();
+    const id = '$debug';
+    const terrainData = painter.style.map.terrain && painter.style.map.terrain.getTerrainData(coord);
+
+    context.activeTexture.set(gl.TEXTURE0);
+
+    const tileRawData = sourceCache.getTileByID(coord.key).latestRawTileData;
+    const tileByteLength = (tileRawData && tileRawData.byteLength) || 0;
+    const tileSizeKb = Math.floor(tileByteLength / 1024);
+    const tileSize = sourceCache.getTile(coord).tileSize;
+    const scaleRatio = (512 / Math.min(tileSize, 512) * (coord.overscaledZ / painter.transform.zoom)) * 0.5;
+    let tileIdText = coord.canonical.toString();
+    if (coord.overscaledZ !== coord.canonical.z) {
+        tileIdText += ` => ${coord.overscaledZ}`;
+    }
+    const tileLabel = `${tileIdText} ${tileSizeKb}kB`;
+    drawTextToOverlay(painter, tileLabel);
+
+    program.draw(context, gl.TRIANGLES, depthMode, stencilMode, ColorMode.alphaBlended, CullFaceMode.disabled,
+        debugUniformValues(posMatrix, Color.transparent, scaleRatio), null, id,
+        painter.debugBuffer, painter.quadTriangleIndexBuffer, painter.debugSegments);
+    program.draw(context, gl.LINE_STRIP, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+        debugUniformValues(posMatrix, Color.red), terrainData, id,
+        painter.debugBuffer, painter.tileBorderIndexBuffer, painter.debugSegments);
+}
+
+function drawTextToOverlay(painter: Painter, text: string) {
+    painter.initDebugOverlayCanvas();
+    const canvas = painter.debugOverlayCanvas;
+    const gl = painter.context.gl;
+    const ctx2d = painter.debugOverlayCanvas.getContext('2d');
+    ctx2d.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx2d.shadowColor = 'white';
+    ctx2d.shadowBlur = 2;
+    ctx2d.lineWidth = 1.5;
+    ctx2d.strokeStyle = 'white';
+    ctx2d.textBaseline = 'top';
+    ctx2d.font = `bold ${36}px Open Sans, sans-serif`;
+    ctx2d.fillText(text, 5, 5);
+    ctx2d.strokeText(text, 5, 5);
+
+    painter.debugOverlayTexture.update(canvas);
+    painter.debugOverlayTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+}
+
+export function selectDebugSource(style: Style, zoom: number): SourceCache | null {
+    // Use vector source with highest maxzoom
+    // Else use source with highest maxzoom of any type
+    let selectedSource: SourceCache = null;
+    const layers = Object.values(style._layers);
+    const sources = layers.flatMap((layer) => {
+        if (layer.source && !layer.isHidden(zoom)) {
+            const sourceCache = style.sourceCaches[layer.source];
+            return [sourceCache];
+        } else {
+            return [];
+        }
+    });
+    const vectorSources = sources.filter((source) => source.getSource().type === 'vector');
+    const otherSources = sources.filter((source) => source.getSource().type !== 'vector');
+    const considerSource = (source: SourceCache) => {
+        if (!selectedSource || (selectedSource.getSource().maxzoom < source.getSource().maxzoom)) {
+            selectedSource = source;
+        }
+    };
+    vectorSources.forEach((source) => considerSource(source));
+    if (!selectedSource) {
+        otherSources.forEach((source) => considerSource(source));
+    }
+    return selectedSource;
+}