mapbox-gl 1.13.2

package/src/render/draw_debug.js

@@ -0,0 +1,127 @@
+// @flow
+
+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 '../style-spec/util/color';
+import ColorMode from '../gl/color_mode';
+import browser from '../util/browser';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type {OverscaledTileID} from '../source/tile_id';
+
+export default drawDebug;
+
+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 * browser.devicePixelRatio, y * browser.devicePixelRatio, width * browser.devicePixelRatio, height * browser.devicePixelRatio);
+    context.clear({color});
+    gl.disable(gl.SCISSOR_TEST);
+}
+
+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, 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';
+
+    context.activeTexture.set(gl.TEXTURE0);
+    // Bind the empty texture for drawing outlines
+    painter.emptyTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+    program.draw(context, gl.LINE_STRIP, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+        debugUniformValues(posMatrix, Color.red), id,
+        painter.debugBuffer, painter.tileBorderIndexBuffer, painter.debugSegments);
+
+    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), id,
+        painter.debugBuffer, painter.quadTriangleIndexBuffer, 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);
+}

package/src/render/draw_fill.js

@@ -0,0 +1,124 @@
+// @flow
+
+import Color from '../style-spec/util/color';
+import DepthMode from '../gl/depth_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import {
+    fillUniformValues,
+    fillPatternUniformValues,
+    fillOutlineUniformValues,
+    fillOutlinePatternUniformValues
+} from './program/fill_program';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type FillStyleLayer from '../style/style_layer/fill_style_layer';
+import type FillBucket from '../data/bucket/fill_bucket';
+import type {OverscaledTileID} from '../source/tile_id';
+
+export default drawFill;
+
+function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLayer, coords: Array<OverscaledTileID>) {
+    const color = layer.paint.get('fill-color');
+    const opacity = layer.paint.get('fill-opacity');
+
+    if (opacity.constantOr(1) === 0) {
+        return;
+    }
+
+    const colorMode = painter.colorModeForRenderPass();
+
+    const pattern = layer.paint.get('fill-pattern');
+    const pass = painter.opaquePassEnabledForLayer() &&
+        (!pattern.constantOr((1: any)) &&
+        color.constantOr(Color.transparent).a === 1 &&
+        opacity.constantOr(0) === 1) ? 'opaque' : 'translucent';
+
+    // Draw fill
+    if (painter.renderPass === pass) {
+        const depthMode = painter.depthModeForSublayer(
+            1, painter.renderPass === 'opaque' ? DepthMode.ReadWrite : DepthMode.ReadOnly);
+        drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, false);
+    }
+
+    // Draw stroke
+    if (painter.renderPass === 'translucent' && layer.paint.get('fill-antialias')) {
+
+        // If we defined a different color for the fill outline, we are
+        // going to ignore the bits in 0x07 and just care about the global
+        // clipping mask.
+        // Otherwise, we only want to drawFill the antialiased parts that are
+        // *outside* the current shape. This is important in case the fill
+        // or stroke color is translucent. If we wouldn't clip to outside
+        // the current shape, some pixels from the outline stroke overlapped
+        // the (non-antialiased) fill.
+        const depthMode = painter.depthModeForSublayer(
+            layer.getPaintProperty('fill-outline-color') ? 2 : 0, DepthMode.ReadOnly);
+        drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, true);
+    }
+}
+
+function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, isOutline) {
+    const gl = painter.context.gl;
+
+    const patternProperty = layer.paint.get('fill-pattern');
+    const image = patternProperty && patternProperty.constantOr((1: any));
+    const crossfade = layer.getCrossfadeParameters();
+    let drawMode, programName, uniformValues, indexBuffer, segments;
+
+    if (!isOutline) {
+        programName = image ? 'fillPattern' : 'fill';
+        drawMode = gl.TRIANGLES;
+    } else {
+        programName = image && !layer.getPaintProperty('fill-outline-color') ? 'fillOutlinePattern' : 'fillOutline';
+        drawMode = gl.LINES;
+    }
+
+    for (const coord of coords) {
+        const tile = sourceCache.getTile(coord);
+        if (image && !tile.patternsLoaded()) continue;
+
+        const bucket: ?FillBucket = (tile.getBucket(layer): any);
+        if (!bucket) continue;
+
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram(programName, programConfiguration);
+
+        if (image) {
+            painter.context.activeTexture.set(gl.TEXTURE0);
+            tile.imageAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            programConfiguration.updatePaintBuffers(crossfade);
+        }
+
+        const constantPattern = patternProperty.constantOr(null);
+        if (constantPattern && tile.imageAtlas) {
+            const atlas = tile.imageAtlas;
+            const posTo = atlas.patternPositions[constantPattern.to.toString()];
+            const posFrom = atlas.patternPositions[constantPattern.from.toString()];
+            if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
+        }
+
+        const tileMatrix = painter.translatePosMatrix(coord.posMatrix, tile,
+            layer.paint.get('fill-translate'), layer.paint.get('fill-translate-anchor'));
+
+        if (!isOutline) {
+            indexBuffer = bucket.indexBuffer;
+            segments = bucket.segments;
+            uniformValues = image ?
+                fillPatternUniformValues(tileMatrix, painter, crossfade, tile) :
+                fillUniformValues(tileMatrix);
+        } else {
+            indexBuffer = bucket.indexBuffer2;
+            segments = bucket.segments2;
+            const drawingBufferSize = [gl.drawingBufferWidth, gl.drawingBufferHeight];
+            uniformValues = (programName === 'fillOutlinePattern' && image) ?
+                fillOutlinePatternUniformValues(tileMatrix, painter, crossfade, tile, drawingBufferSize) :
+                fillOutlineUniformValues(tileMatrix, drawingBufferSize);
+        }
+
+        program.draw(painter.context, drawMode, depthMode,
+            painter.stencilModeForClipping(coord), colorMode, CullFaceMode.disabled, uniformValues,
+            layer.id, bucket.layoutVertexBuffer, indexBuffer, segments,
+            layer.paint, painter.transform.zoom, programConfiguration);
+    }
+}

package/src/render/draw_fill_extrusion.js

@@ -0,0 +1,95 @@
+// @flow
+
+import DepthMode from '../gl/depth_mode';
+import StencilMode from '../gl/stencil_mode';
+import ColorMode from '../gl/color_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import {
+    fillExtrusionUniformValues,
+    fillExtrusionPatternUniformValues,
+} from './program/fill_extrusion_program';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type FillExtrusionStyleLayer from '../style/style_layer/fill_extrusion_style_layer';
+import type FillExtrusionBucket from '../data/bucket/fill_extrusion_bucket';
+import type {OverscaledTileID} from '../source/tile_id';
+
+export default draw;
+
+function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLayer, coords: Array<OverscaledTileID>) {
+    const opacity = layer.paint.get('fill-extrusion-opacity');
+    if (opacity === 0) {
+        return;
+    }
+
+    if (painter.renderPass === 'translucent') {
+        const depthMode = new DepthMode(painter.context.gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D);
+
+        if (opacity === 1 && !layer.paint.get('fill-extrusion-pattern').constantOr((1: any))) {
+            const colorMode = painter.colorModeForRenderPass();
+            drawExtrusionTiles(painter, source, layer, coords, depthMode, StencilMode.disabled, colorMode);
+
+        } else {
+            // Draw transparent buildings in two passes so that only the closest surface is drawn.
+            // First draw all the extrusions into only the depth buffer. No colors are drawn.
+            drawExtrusionTiles(painter, source, layer, coords, depthMode,
+                StencilMode.disabled,
+                ColorMode.disabled);
+
+            // Then draw all the extrusions a second type, only coloring fragments if they have the
+            // same depth value as the closest fragment in the previous pass. Use the stencil buffer
+            // to prevent the second draw in cases where we have coincident polygons.
+            drawExtrusionTiles(painter, source, layer, coords, depthMode,
+                painter.stencilModeFor3D(),
+                painter.colorModeForRenderPass());
+        }
+    }
+}
+
+function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMode, colorMode) {
+    const context = painter.context;
+    const gl = context.gl;
+    const patternProperty = layer.paint.get('fill-extrusion-pattern');
+    const image = patternProperty.constantOr((1: any));
+    const crossfade = layer.getCrossfadeParameters();
+    const opacity = layer.paint.get('fill-extrusion-opacity');
+
+    for (const coord of coords) {
+        const tile = source.getTile(coord);
+        const bucket: ?FillExtrusionBucket = (tile.getBucket(layer): any);
+        if (!bucket) continue;
+
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram(image ? 'fillExtrusionPattern' : 'fillExtrusion', programConfiguration);
+
+        if (image) {
+            painter.context.activeTexture.set(gl.TEXTURE0);
+            tile.imageAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            programConfiguration.updatePaintBuffers(crossfade);
+        }
+        const constantPattern = patternProperty.constantOr(null);
+        if (constantPattern && tile.imageAtlas) {
+            const atlas = tile.imageAtlas;
+            const posTo = atlas.patternPositions[constantPattern.to.toString()];
+            const posFrom = atlas.patternPositions[constantPattern.from.toString()];
+            if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
+        }
+
+        const matrix = painter.translatePosMatrix(
+            coord.posMatrix,
+            tile,
+            layer.paint.get('fill-extrusion-translate'),
+            layer.paint.get('fill-extrusion-translate-anchor'));
+
+        const shouldUseVerticalGradient = layer.paint.get('fill-extrusion-vertical-gradient');
+        const uniformValues = image ?
+            fillExtrusionPatternUniformValues(matrix, painter, shouldUseVerticalGradient, opacity, coord, crossfade, tile) :
+            fillExtrusionUniformValues(matrix, painter, shouldUseVerticalGradient, opacity);
+
+        program.draw(context, context.gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.backCCW,
+            uniformValues, layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
+            bucket.segments, layer.paint, painter.transform.zoom,
+            programConfiguration);
+    }
+}

package/src/render/draw_heatmap.js

@@ -0,0 +1,133 @@
+// @flow
+
+import Texture from './texture';
+import Color from '../style-spec/util/color';
+import DepthMode from '../gl/depth_mode';
+import StencilMode from '../gl/stencil_mode';
+import ColorMode from '../gl/color_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import {
+    heatmapUniformValues,
+    heatmapTextureUniformValues
+} from './program/heatmap_program';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type HeatmapStyleLayer from '../style/style_layer/heatmap_style_layer';
+import type HeatmapBucket from '../data/bucket/heatmap_bucket';
+import type {OverscaledTileID} from '../source/tile_id';
+
+export default drawHeatmap;
+
+function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapStyleLayer, coords: Array<OverscaledTileID>) {
+    if (layer.paint.get('heatmap-opacity') === 0) {
+        return;
+    }
+
+    if (painter.renderPass === 'offscreen') {
+        const context = painter.context;
+        const gl = context.gl;
+
+        // Allow kernels to be drawn across boundaries, so that
+        // large kernels are not clipped to tiles
+        const stencilMode = StencilMode.disabled;
+        // Turn on additive blending for kernels, which is a key aspect of kernel density estimation formula
+        const colorMode = new ColorMode([gl.ONE, gl.ONE], Color.transparent, [true, true, true, true]);
+
+        bindFramebuffer(context, painter, layer);
+
+        context.clear({color: Color.transparent});
+
+        for (let i = 0; i < coords.length; i++) {
+            const coord = coords[i];
+
+            // Skip tiles that have uncovered parents to avoid flickering; we don't need
+            // to use complex tile masking here because the change between zoom levels is subtle,
+            // so it's fine to simply render the parent until all its 4 children are loaded
+            if (sourceCache.hasRenderableParent(coord)) continue;
+
+            const tile = sourceCache.getTile(coord);
+            const bucket: ?HeatmapBucket = (tile.getBucket(layer): any);
+            if (!bucket) continue;
+
+            const programConfiguration = bucket.programConfigurations.get(layer.id);
+            const program = painter.useProgram('heatmap', programConfiguration);
+            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')),
+                layer.id, bucket.layoutVertexBuffer, bucket.indexBuffer,
+                bucket.segments, layer.paint, painter.transform.zoom,
+                programConfiguration);
+        }
+
+        context.viewport.set([0, 0, painter.width, painter.height]);
+
+    } else if (painter.renderPass === 'translucent') {
+        painter.context.setColorMode(painter.colorModeForRenderPass());
+        renderTextureToMap(painter, layer);
+    }
+}
+
+function bindFramebuffer(context, painter, layer) {
+    const gl = context.gl;
+    context.activeTexture.set(gl.TEXTURE1);
+
+    // Use a 4x downscaled screen texture for better performance
+    context.viewport.set([0, 0, painter.width / 4, painter.height / 4]);
+
+    let fbo = layer.heatmapFbo;
+
+    if (!fbo) {
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+        fbo = layer.heatmapFbo = context.createFramebuffer(painter.width / 4, painter.height / 4, false);
+
+        bindTextureToFramebuffer(context, painter, texture, fbo);
+
+    } else {
+        gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+        context.bindFramebuffer.set(fbo.framebuffer);
+    }
+}
+
+function bindTextureToFramebuffer(context, painter, texture, fbo) {
+    const gl = context.gl;
+    // Use the higher precision half-float texture where available (producing much smoother looking heatmaps);
+    // Otherwise, fall back to a low precision texture
+    const internalFormat = context.extRenderToTextureHalfFloat ? context.extTextureHalfFloat.HALF_FLOAT_OES : gl.UNSIGNED_BYTE;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, painter.width / 4, painter.height / 4, 0, gl.RGBA, internalFormat, null);
+    fbo.colorAttachment.set(texture);
+}
+
+function renderTextureToMap(painter, layer) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    // Here we bind two different textures from which we'll sample in drawing
+    // heatmaps: the kernel texture, prepared in the offscreen pass, and a
+    // color ramp texture.
+    const fbo = layer.heatmapFbo;
+    if (!fbo) return;
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+    context.activeTexture.set(gl.TEXTURE1);
+    let colorRampTexture = layer.colorRampTexture;
+    if (!colorRampTexture) {
+        colorRampTexture = layer.colorRampTexture = new Texture(context, layer.colorRamp, gl.RGBA);
+    }
+    colorRampTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+    painter.useProgram('heatmapTexture').draw(context, gl.TRIANGLES,
+        DepthMode.disabled, StencilMode.disabled, painter.colorModeForRenderPass(), CullFaceMode.disabled,
+        heatmapTextureUniformValues(painter, layer, 0, 1),
+        layer.id, painter.viewportBuffer, painter.quadTriangleIndexBuffer,
+        painter.viewportSegments, layer.paint, painter.transform.zoom);
+}

package/src/render/draw_hillshade.js

@@ -0,0 +1,107 @@
+// @flow
+
+import Texture from './texture';
+import StencilMode from '../gl/stencil_mode';
+import DepthMode from '../gl/depth_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import {
+    hillshadeUniformValues,
+    hillshadeUniformPrepareValues
+} from './program/hillshade_program';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type HillshadeStyleLayer from '../style/style_layer/hillshade_style_layer';
+import type {OverscaledTileID} from '../source/tile_id';
+
+export default drawHillshade;
+
+function drawHillshade(painter: Painter, sourceCache: SourceCache, layer: HillshadeStyleLayer, tileIDs: Array<OverscaledTileID>) {
+    if (painter.renderPass !== 'offscreen' && painter.renderPass !== 'translucent') return;
+
+    const context = painter.context;
+
+    const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+    const colorMode = painter.colorModeForRenderPass();
+
+    const [stencilModes, coords] = painter.renderPass === 'translucent' ?
+        painter.stencilConfigForOverlap(tileIDs) : [{}, tileIDs];
+
+    for (const coord of coords) {
+        const tile = sourceCache.getTile(coord);
+        if (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);
+        }
+    }
+
+    context.viewport.set([0, 0, painter.width, painter.height]);
+}
+
+function renderHillshade(painter, 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');
+
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+    const uniformValues = hillshadeUniformValues(painter, tile, layer);
+
+    program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+        uniformValues, 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
+// directions for each pixel, and saves those values to a framebuffer texture in the r and g channels.
+function prepareHillshade(painter, tile, layer, depthMode, stencilMode, colorMode) {
+    const context = painter.context;
+    const gl = context.gl;
+    const dem = tile.dem;
+    if (dem && dem.data) {
+        const tileSize = dem.dim;
+        const textureStride = dem.stride;
+
+        const pixelData = dem.getPixels();
+        context.activeTexture.set(gl.TEXTURE1);
+
+        context.pixelStoreUnpackPremultiplyAlpha.set(false);
+        tile.demTexture = tile.demTexture || painter.getTileTexture(textureStride);
+        if (tile.demTexture) {
+            const demTexture = tile.demTexture;
+            demTexture.update(pixelData, {premultiply: false});
+            demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
+        } else {
+            tile.demTexture = new Texture(context, pixelData, gl.RGBA, {premultiply: false});
+            tile.demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
+        }
+
+        context.activeTexture.set(gl.TEXTURE0);
+
+        let fbo = tile.fbo;
+
+        if (!fbo) {
+            const renderTexture = new Texture(context, {width: tileSize, height: tileSize, data: null}, gl.RGBA);
+            renderTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+            fbo = tile.fbo = context.createFramebuffer(tileSize, tileSize, true);
+            fbo.colorAttachment.set(renderTexture.texture);
+        }
+
+        context.bindFramebuffer.set(fbo.framebuffer);
+        context.viewport.set([0, 0, tileSize, tileSize]);
+
+        painter.useProgram('hillshadePrepare').draw(context, gl.TRIANGLES,
+            depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+            hillshadeUniformPrepareValues(tile.tileID, dem),
+            layer.id, painter.rasterBoundsBuffer,
+            painter.quadTriangleIndexBuffer, painter.rasterBoundsSegments);
+
+        tile.needsHillshadePrepare = false;
+    }
+}