maplibre-gl 2.1.8 → 2.2.0-pre.2

package/src/render/draw_fill_extrusion.ts

@@ -58,6 +58,7 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
         const bucket: FillExtrusionBucket = (tile.getBucket(layer) as any);
         if (!bucket) continue;
 
+        const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
         const programConfiguration = bucket.programConfigurations.get(layer.id);
         const program = painter.useProgram(image ? 'fillExtrusionPattern' : 'fillExtrusion', programConfiguration);
 
@@ -86,8 +87,8 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
             fillExtrusionUniformValues(matrix, painter, shouldUseVerticalGradient, opacity);
 
         program.draw(context, context.gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.backCCW,
-            uniformValues, layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
+            uniformValues, terrainData, layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
             bucket.segments, layer.paint, painter.transform.zoom,
-            programConfiguration);
+            programConfiguration, painter.style.terrain && bucket.centroidVertexBuffer);
     }
 }

package/src/render/draw_heatmap.ts

@@ -53,8 +53,7 @@ function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapS
             const {zoom} = painter.transform;
 
             program.draw(context, gl.TRIANGLES, DepthMode.disabled, stencilMode, colorMode, CullFaceMode.disabled,
-                heatmapUniformValues(coord.posMatrix,
-                    tile, zoom, layer.paint.get('heatmap-intensity')),
+                heatmapUniformValues(coord.posMatrix, tile, zoom, layer.paint.get('heatmap-intensity')), null,
                 layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
                 bucket.segments, layer.paint, painter.transform.zoom,
                 programConfiguration);
@@ -125,7 +124,7 @@ function renderTextureToMap(painter, layer) {
 
     painter.useProgram('heatmapTexture').draw(context, gl.TRIANGLES,
         DepthMode.disabled, StencilMode.disabled, painter.colorModeForRenderPass(), CullFaceMode.disabled,
-        heatmapTextureUniformValues(painter, layer, 0, 1),
+        heatmapTextureUniformValues(painter, layer, 0, 1), null,
         layer.id, painter.viewportBuffer, painter.quadTriangleIndexBuffer,
         painter.viewportSegments, layer.paint, painter.transform.zoom);
 }

package/src/render/draw_hillshade.ts

@@ -27,32 +27,33 @@ function drawHillshade(painter: Painter, sourceCache: SourceCache, layer: Hillsh
 
     for (const coord of coords) {
         const tile = sourceCache.getTile(coord);
-        if (tile.needsHillshadePrepare && painter.renderPass === 'offscreen') {
+        if (typeof tile.needsHillshadePrepare !== 'undefined' && tile.needsHillshadePrepare && painter.renderPass === 'offscreen') {
             prepareHillshade(painter, tile, layer, depthMode, StencilMode.disabled, colorMode);
         } else if (painter.renderPass === 'translucent') {
-            renderHillshade(painter, tile, layer, depthMode, stencilModes[coord.overscaledZ], colorMode);
+            renderHillshade(painter, coord, tile, layer, depthMode, stencilModes[coord.overscaledZ], colorMode);
         }
     }
 
     context.viewport.set([0, 0, painter.width, painter.height]);
 }
 
-function renderHillshade(painter, tile, layer, depthMode, stencilMode, colorMode) {
+function renderHillshade(painter, coord, tile, layer, depthMode, stencilMode, colorMode) {
     const context = painter.context;
     const gl = context.gl;
     const fbo = tile.fbo;
     if (!fbo) return;
 
     const program = painter.useProgram('hillshade');
+    const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
 
     context.activeTexture.set(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
 
-    const uniformValues = hillshadeUniformValues(painter, tile, layer);
-
+    const terrainCoord = terrainData ? coord : null;
     program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
-        uniformValues, layer.id, painter.rasterBoundsBuffer,
+        hillshadeUniformValues(painter, tile, layer, terrainCoord), terrainData, layer.id, painter.rasterBoundsBuffer,
         painter.quadTriangleIndexBuffer, painter.rasterBoundsSegments);
+
 }
 
 // hillshade rendering is done in two steps. the prepare step first calculates the slope of the terrain in the x and y
@@ -97,7 +98,7 @@ function prepareHillshade(painter, tile, layer, depthMode, stencilMode, colorMod
         painter.useProgram('hillshadePrepare').draw(context, gl.TRIANGLES,
             depthMode, stencilMode, colorMode, CullFaceMode.disabled,
             hillshadeUniformPrepareValues(tile.tileID, dem),
-            layer.id, painter.rasterBoundsBuffer,
+            null, layer.id, painter.rasterBoundsBuffer,
             painter.quadTriangleIndexBuffer, painter.rasterBoundsSegments);
 
         tile.needsHillshadePrepare = false;

package/src/render/draw_line.ts

@@ -56,6 +56,7 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
         const prevProgram = painter.context.program.get();
         const program = painter.useProgram(programId, programConfiguration);
         const programChanged = firstTile || program.program !== prevProgram;
+        const terrainData = painter.style.terrain &&  painter.style.terrain.getTerrainData(coord);
 
         const constantPattern = patternProperty.constantOr(null);
         if (constantPattern && tile.imageAtlas) {
@@ -65,10 +66,11 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
             if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
         }
 
-        const uniformValues = image ? linePatternUniformValues(painter, tile, layer, crossfade) :
-            dasharray ? lineSDFUniformValues(painter, tile, layer, dasharray, crossfade) :
-                gradient ? lineGradientUniformValues(painter, tile, layer, bucket.lineClipsArray.length) :
-                    lineUniformValues(painter, tile, layer);
+        const terrainCoord = terrainData ? coord : null;
+        const uniformValues = image ? linePatternUniformValues(painter, tile, layer, crossfade, terrainCoord) :
+            dasharray ? lineSDFUniformValues(painter, tile, layer, dasharray, crossfade, terrainCoord) :
+                gradient ? lineGradientUniformValues(painter, tile, layer, bucket.lineClipsArray.length, terrainCoord) :
+                    lineUniformValues(painter, tile, layer, terrainCoord);
 
         if (image) {
             context.activeTexture.set(gl.TEXTURE0);
@@ -113,7 +115,7 @@ export default function drawLine(painter: Painter, sourceCache: SourceCache, lay
         }
 
         program.draw(context, gl.TRIANGLES, depthMode,
-            painter.stencilModeForClipping(coord), colorMode, CullFaceMode.disabled, uniformValues,
+            painter.stencilModeForClipping(coord), colorMode, CullFaceMode.disabled, uniformValues, terrainData,
             layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer, bucket.segments,
             layer.paint, painter.transform.zoom, programConfiguration, bucket.layoutVertexBuffer2);
 

package/src/render/draw_raster.ts

@@ -39,12 +39,11 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
             layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly, gl.LESS);
 
         const tile = sourceCache.getTile(coord);
-        const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped(), align);
 
         tile.registerFadeDuration(layer.paint.get('raster-fade-duration'));
 
         const parentTile = sourceCache.findLoadedParent(coord, 0),
-            fade = getFadeValues(tile, parentTile, sourceCache, layer, painter.transform);
+            fade = getFadeValues(tile, parentTile, sourceCache, layer, painter.transform, painter.style.terrain);
 
         let parentScaleBy, parentTL;
 
@@ -64,24 +63,27 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
             tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
         }
 
+        const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
+        const terrainCoord = terrainData ? coord : null;
+        const posMatrix = terrainCoord ? terrainCoord.posMatrix : painter.transform.calculatePosMatrix(coord.toUnwrapped(), align);
         const uniformValues = rasterUniformValues(posMatrix, parentTL || [0, 0], parentScaleBy || 1, fade, layer);
 
         if (source instanceof ImageSource) {
             program.draw(context, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.disabled,
-                uniformValues, layer.id, source.boundsBuffer,
+                uniformValues, terrainData, layer.id, source.boundsBuffer,
                 painter.quadTriangleIndexBuffer, source.boundsSegments);
         } else {
             program.draw(context, gl.TRIANGLES, depthMode, stencilModes[coord.overscaledZ], colorMode, CullFaceMode.disabled,
-                uniformValues, layer.id, painter.rasterBoundsBuffer,
+                uniformValues, terrainData, layer.id, painter.rasterBoundsBuffer,
                 painter.quadTriangleIndexBuffer, painter.rasterBoundsSegments);
         }
     }
 }
 
-function getFadeValues(tile, parentTile, sourceCache, layer, transform) {
+function getFadeValues(tile, parentTile, sourceCache, layer, transform, terrain) {
     const fadeDuration = layer.paint.get('raster-fade-duration');
 
-    if (fadeDuration > 0) {
+    if (!terrain && fadeDuration > 0) {
         const now = browser.now();
         const sinceTile = (now - tile.timeAdded) / fadeDuration;
         const sinceParent = parentTile ? (now - parentTile.timeAdded) / fadeDuration : -1;

package/src/render/draw_symbol.test.ts

@@ -10,9 +10,13 @@ import drawSymbol from './draw_symbol';
 import * as symbolProjection from '../symbol/projection';
 import type ZoomHistory from '../style/zoom_history';
 import type Map from '../ui/map';
-import type Transform from '../geo/transform';
+import Transform from '../geo/transform';
 import type EvaluationParameters from '../style/evaluation_parameters';
 import type {SymbolLayerSpecification} from '../style-spec/types.g';
+import Style from '../style/style';
+import TerrainSourceCache from '../source/terrain_source_cache';
+import {Evented} from '../util/evented';
+import {RequestManager} from '../util/request_manager';
 
 jest.mock('./painter');
 jest.mock('./program');
@@ -21,6 +25,22 @@ jest.mock('../source/tile');
 jest.mock('../data/bucket/symbol_bucket');
 jest.mock('../symbol/projection');
 
+class StubMap extends Evented {
+    transform: Transform;
+    painter: Painter;
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this.transform = new Transform();
+        this._requestManager = {
+            transformRequest: (url) => {
+                return {url};
+            }
+        } as any as RequestManager;
+    }
+}
+
 describe('drawSymbol', () => {
     test('should not do anything', () => {
         const mockPainter = new Painter(null, null);
@@ -37,12 +57,13 @@ describe('drawSymbol', () => {
         painterMock.context = {
             gl: {},
             activeTexture: {
-                set: () => {}
+                set: () => { }
             }
         } as any;
         painterMock.renderPass = 'translucent';
         painterMock.transform = {pitch: 0, labelPlaneMatrix: mat4.create()} as any as Transform;
         painterMock.options = {} as any;
+        painterMock.style = {terrainSourceCache: {getTerrain: () => null}} as any as Style;
 
         const layerSpec = {
             id: 'mock-layer',
@@ -58,12 +79,12 @@ describe('drawSymbol', () => {
 
         const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
         tileId.posMatrix = mat4.create();
-        const programMock = new Program(null, null, null, null, null, null);
+        const programMock = new Program(null, null, null, null, null, null, null);
         (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
         const bucketMock = new SymbolBucket(null);
         bucketMock.icon = {
             programConfigurations: {
-                get: () => {}
+                get: () => { }
             },
             segments: {
                 get: () => [1]
@@ -76,7 +97,7 @@ describe('drawSymbol', () => {
         const tile = new Tile(tileId, 256);
         tile.tileID = tileId;
         tile.imageAtlasTexture = {
-            bind: () => {}
+            bind: () => { }
         } as any;
         (tile.getBucket as jest.Mock).mockReturnValue(bucketMock);
         const sourceCacheMock = new SourceCache(null, null, null);
@@ -94,7 +115,7 @@ describe('drawSymbol', () => {
         painterMock.context = {
             gl: {},
             activeTexture: {
-                set: () => {}
+                set: () => { }
             }
         } as any;
         painterMock.renderPass = 'translucent';
@@ -119,12 +140,12 @@ describe('drawSymbol', () => {
 
         const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
         tileId.posMatrix = mat4.create();
-        const programMock = new Program(null, null, null, null, null, null);
+        const programMock = new Program(null, null, null, null, null, null, null);
         (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
         const bucketMock = new SymbolBucket(null);
         bucketMock.icon = {
             programConfigurations: {
-                get: () => {}
+                get: () => { }
             },
             segments: {
                 get: () => [1]
@@ -137,16 +158,19 @@ describe('drawSymbol', () => {
         const tile = new Tile(tileId, 256);
         tile.tileID = tileId;
         tile.imageAtlasTexture = {
-            bind: () => {}
+            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;
+        painterMock.style = {
+            terrainSourceCache: new TerrainSourceCache(new Style(new StubMap() as any as Map))
+        } as any as Style;
 
         const spy = jest.spyOn(symbolProjection, 'updateLineLabels');
         drawSymbol(painterMock, sourceCacheMock, layer, [tileId], null);
 
-        expect(spy.mock.calls[0][8]).toBeFalsy(); // rotateToLine === false
+        expect(spy.mock.calls[0][9]).toBeFalsy(); // rotateToLine === false
     });
 });

package/src/render/draw_symbol.ts

@@ -9,7 +9,7 @@ import {mat4} from 'gl-matrix';
 import StencilMode from '../gl/stencil_mode';
 import DepthMode from '../gl/depth_mode';
 import CullFaceMode from '../gl/cull_face_mode';
-import SymbolBucket, {addDynamicAttributes, SymbolBuffers} from '../data/bucket/symbol_bucket';
+import {addDynamicAttributes} from '../data/bucket/symbol_bucket';
 
 import {getAnchorAlignment, WritingMode} from '../symbol/shaping';
 import ONE_EM from '../symbol/one_em';
@@ -31,6 +31,9 @@ import type {OverscaledTileID} from '../source/tile_id';
 import type {UniformValues} from './uniform_binding';
 import type {SymbolSDFUniformsType} from '../render/program/symbol_program';
 import type {CrossTileID, VariableOffset} from '../symbol/placement';
+import type SymbolBucket from '../data/bucket/symbol_bucket';
+import type {SymbolBuffers} from '../data/bucket/symbol_bucket';
+import type {TerrainData} from '../render/terrain';
 import type {SymbolLayerSpecification} from '../style-spec/types.g';
 import type Transform from '../geo/transform';
 import type ColorMode from '../gl/color_mode';
@@ -39,6 +42,7 @@ import type Program from './program';
 type SymbolTileRenderState = {
     segments: SegmentVector;
     sortKey: number;
+    terrainData: TerrainData;
     state: {
         program: Program<any>;
         buffers: SymbolBuffers;
@@ -145,8 +149,9 @@ function updateVariableAnchors(coords: Array<OverscaledTileID>,
 
         if (size) {
             const tileScale = Math.pow(2, tr.zoom - tile.tileID.overscaledZ);
+            const getElevation = painter.style.terrain ? (x: number, y: number) => painter.style.terrain.getElevation(coord, x, y) : null;
             updateVariableAnchorsForBucket(bucket, rotateWithMap, pitchWithMap, variableOffsets,
-                tr, labelPlaneMatrix, coord.posMatrix, tileScale, size, updateTextFitIcon);
+                tr, labelPlaneMatrix, coord.posMatrix, tileScale, size, updateTextFitIcon, getElevation);
         }
     }
 }
@@ -161,7 +166,8 @@ function updateVariableAnchorsForBucket(
     posMatrix: mat4,
     tileScale: number,
     size: EvaluatedZoomSize,
-    updateTextFitIcon: boolean) {
+    updateTextFitIcon: boolean,
+    getElevation: (x: number, y: number) => number) {
     const placedSymbols = bucket.text.placedSymbolArray;
     const dynamicTextLayoutVertexArray = bucket.text.dynamicLayoutVertexArray;
     const dynamicIconLayoutVertexArray = bucket.icon.dynamicLayoutVertexArray;
@@ -179,7 +185,7 @@ function updateVariableAnchorsForBucket(
             symbolProjection.hideGlyphs(symbol.numGlyphs, dynamicTextLayoutVertexArray);
         } else  {
             const tileAnchor = new Point(symbol.anchorX, symbol.anchorY);
-            const projectedAnchor = symbolProjection.project(tileAnchor, pitchWithMap ? posMatrix : labelPlaneMatrix);
+            const projectedAnchor = symbolProjection.project(tileAnchor, pitchWithMap ? posMatrix : labelPlaneMatrix, getElevation);
             const perspectiveRatio = symbolProjection.getPerspectiveRatio(transform.cameraToCenterDistance, projectedAnchor.signedDistanceFromCamera);
             let renderTextSize = evaluateSizeForFeature(bucket.textSizeData, size, symbol) * perspectiveRatio / ONE_EM;
             if (pitchWithMap) {
@@ -196,7 +202,7 @@ function updateVariableAnchorsForBucket(
             // calculated above. In the (somewhat weird) case of pitch-aligned text, we add an equivalent
             // tile-unit based shift to the anchor before projecting to the label plane.
             const shiftedAnchor = pitchWithMap ?
-                symbolProjection.project(tileAnchor.add(shift), labelPlaneMatrix).point :
+                symbolProjection.project(tileAnchor.add(shift), labelPlaneMatrix, getElevation).point :
                 projectedAnchor.point.add(rotateWithMap ?
                     shift.rotate(-transform.angle) :
                     shift);
@@ -295,6 +301,7 @@ function drawLayerSymbols(
 
         const program = painter.useProgram(getSymbolProgramName(isSDF, isText, bucket), programConfiguration);
         const size = evaluateSizeForZoom(sizeData, tr.zoom);
+        const terrainData = painter.style.terrain && painter.style.terrain.getTerrainData(coord);
 
         let texSize: [number, number];
         let texSizeIcon: [number, number] = [0, 0];
@@ -331,8 +338,9 @@ function drawLayerSymbols(
             bucket.hasIconData();
 
         if (alongLine) {
+            const getElevation = painter.style.terrain ? (x: number, y: number) => painter.style.terrain.getElevation(coord, x, y) : null;
             const rotateToLine = layer.layout.get('text-rotation-alignment') === 'map';
-            symbolProjection.updateLineLabels(bucket, coord.posMatrix, painter, isText, labelPlaneMatrix, glCoordMatrix, pitchWithMap, keepUpright, rotateToLine);
+            symbolProjection.updateLineLabels(bucket, coord.posMatrix, painter, isText, labelPlaneMatrix, glCoordMatrix, pitchWithMap, keepUpright, rotateToLine, getElevation);
         }
 
         const matrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor),
@@ -377,14 +385,16 @@ function drawLayerSymbols(
                 tileRenderState.push({
                     segments: new SegmentVector([segment]),
                     sortKey: segment.sortKey,
-                    state
+                    state,
+                    terrainData
                 });
             }
         } else {
             tileRenderState.push({
                 segments: buffers.segments,
                 sortKey: 0,
-                state
+                state,
+                terrainData
             });
         }
     }
@@ -409,11 +419,11 @@ function drawLayerSymbols(
             const uniformValues = state.uniformValues;
             if (state.hasHalo) {
                 uniformValues['u_is_halo'] = 1;
-                drawSymbolElements(state.buffers, segmentState.segments, layer, painter, state.program, depthMode, stencilMode, colorMode, uniformValues);
+                drawSymbolElements(state.buffers, segmentState.segments, layer, painter, state.program, depthMode, stencilMode, colorMode, uniformValues, segmentState.terrainData);
             }
             uniformValues['u_is_halo'] = 0;
         }
-        drawSymbolElements(state.buffers, segmentState.segments, layer, painter, state.program, depthMode, stencilMode, colorMode, state.uniformValues);
+        drawSymbolElements(state.buffers, segmentState.segments, layer, painter, state.program, depthMode, stencilMode, colorMode, state.uniformValues, segmentState.terrainData);
     }
 }
 
@@ -426,11 +436,12 @@ function drawSymbolElements(
     depthMode: Readonly<DepthMode>,
     stencilMode: StencilMode,
     colorMode: Readonly<ColorMode>,
-    uniformValues: UniformValues<SymbolSDFUniformsType | SymbolIconUniformsType>) {
+    uniformValues: UniformValues<SymbolSDFUniformsType | SymbolIconUniformsType>,
+    terrainData: TerrainData) {
     const context = painter.context;
     const gl = context.gl;
     program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
-        uniformValues, layer.id, buffers.layoutVertexBuffer,
+        uniformValues, terrainData, layer.id, buffers.layoutVertexBuffer,
         buffers.indexBuffer, segments, layer.paint,
         painter.transform.zoom, buffers.programConfigurations.get(layer.id),
         buffers.dynamicLayoutVertexBuffer, buffers.opacityVertexBuffer);

package/src/render/draw_terrain.ts

@@ -0,0 +1,123 @@
+import StencilMode from '../gl/stencil_mode';
+import DepthMode from '../gl/depth_mode';
+import {terrainUniformValues, terrainDepthUniformValues, terrainCoordsUniformValues} from './program/terrain_program';
+import type Painter from './painter';
+import type Tile from '../source/tile';
+import CullFaceMode from '../gl/cull_face_mode';
+import Texture from './texture';
+import Color from '../style-spec/util/color';
+import ColorMode from '../gl/color_mode';
+import Terrain from './terrain';
+
+/**
+ * Redraw the Depth Framebuffer
+ * @param {Painter} painter - the painter
+ * @param {Terrain} terrain - the terrain
+ */
+function drawDepth(painter: Painter, terrain: Terrain) {
+    const context = painter.context;
+    const gl = context.gl;
+    const colorMode = ColorMode.unblended;
+    const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadWrite, [0, 1]);
+    const mesh = terrain.getTerrainMesh();
+    const tiles = terrain.sourceCache.getRenderableTiles();
+    const program = painter.useProgram('terrainDepth');
+    context.bindFramebuffer.set(terrain.getFramebuffer('depth').framebuffer);
+    context.viewport.set([0, 0, painter.width  / devicePixelRatio, painter.height / devicePixelRatio]);
+    context.clear({color: Color.transparent, depth: 1});
+    for (const tile of tiles) {
+        const terrainData = terrain.getTerrainData(tile.tileID);
+        const posMatrix = painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped());
+        const uniformValues = terrainDepthUniformValues(posMatrix);
+        program.draw(context, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.backCCW, uniformValues, terrainData, 'terrain', mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
+    }
+    context.bindFramebuffer.set(null);
+    context.viewport.set([0, 0, painter.width, painter.height]);
+}
+
+/**
+ * Redraw the Coords Framebuffers
+ * @param {Painter} painter - the painter
+ * @param {Terrain} terrain - the terrain
+ */
+function drawCoords(painter: Painter, terrain: Terrain) {
+    const context = painter.context;
+    const gl = context.gl;
+    const colorMode = ColorMode.unblended;
+    const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadWrite, [0, 1]);
+    const mesh = terrain.getTerrainMesh();
+    const coords = terrain.getCoordsTexture();
+    const tiles = terrain.sourceCache.getRenderableTiles();
+
+    // draw tile-coords into framebuffer
+    const program = painter.useProgram('terrainCoords');
+    context.bindFramebuffer.set(terrain.getFramebuffer('coords').framebuffer);
+    context.viewport.set([0, 0, painter.width  / devicePixelRatio, painter.height / devicePixelRatio]);
+    context.clear({color: Color.transparent, depth: 1});
+    terrain.coordsIndex = [];
+    for (const tile of tiles) {
+        const terrainData = terrain.getTerrainData(tile.tileID);
+        context.activeTexture.set(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, coords.texture);
+        const posMatrix = painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped());
+        const uniformValues = terrainCoordsUniformValues(posMatrix, 255 - terrain.coordsIndex.length);
+        program.draw(context, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.backCCW, uniformValues, terrainData, 'terrain', mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
+        terrain.coordsIndex.push(tile.tileID.key);
+    }
+
+    context.bindFramebuffer.set(null);
+    context.viewport.set([0, 0, painter.width, painter.height]);
+}
+
+/**
+ * Render, e.g. drape, a render-to-texture tile onto the 3d mesh on screen.
+ * @param {Painter} painter - the painter
+ * @param {Terrain} terrain - the source cache
+ * @param {Tile} tile - the tile
+ */
+function drawTerrain(painter: Painter, terrain: Terrain, tile: Tile) {
+    const context = painter.context;
+    const gl = context.gl;
+    const colorMode = painter.colorModeForRenderPass();
+    const depthMode = new DepthMode(gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D);
+    const program = painter.useProgram('terrain');
+    const mesh = terrain.getTerrainMesh();
+    const terrainData = terrain.getTerrainData(tile.tileID);
+
+    context.bindFramebuffer.set(null);
+    context.viewport.set([0, 0, painter.width, painter.height]);
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, terrain.getRTTFramebuffer().colorAttachment.get());
+    const posMatrix = painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped());
+    const uniformValues = terrainUniformValues(posMatrix);
+    program.draw(context, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.backCCW, uniformValues, terrainData, 'terrain', mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
+}
+
+/**
+ * prepare the render-to-texture tile.
+ * E.g. creates the necessary textures and attach them to the render-to-texture-framebuffer.
+ * @param {Painter} painter - the painter
+ * @param {Terrain} terrain - the terrain
+ * @param {Tile} tile - the tile
+ * @param {number} stack number of a layer-groop. see painter.ts
+ */
+function prepareTerrain(painter: Painter, terrain: Terrain, tile: Tile, stack: number) {
+    const context = painter.context;
+    const size = tile.tileSize * terrain.qualityFactor;
+    if (!tile.textures[stack]) {
+        tile.textures[stack] = painter.getTileTexture(size) || new Texture(context, {width: size, height: size, data: null}, context.gl.RGBA);
+        tile.textures[stack].bind(context.gl.LINEAR, context.gl.CLAMP_TO_EDGE);
+        if (stack === 0) terrain.sourceCache.renderHistory.push(tile.tileID.key);
+    }
+    const fb = terrain.getRTTFramebuffer();
+    fb.colorAttachment.set(tile.textures[stack].texture);
+    context.bindFramebuffer.set(fb.framebuffer);
+    context.viewport.set([0, 0, size, size]);
+}
+
+export {
+    prepareTerrain,
+    drawTerrain,
+    drawDepth,
+    drawCoords
+};