@mapwhit/tilerenderer 0.52.0 → 1.0.0

package/src/render/draw_fill.js

@@ -11,8 +11,8 @@ const {
 module.exports = drawFill;
 
 function drawFill(painter, sourceCache, layer, coords) {
-  const color = layer.paint.get('fill-color');
-  const opacity = layer.paint.get('fill-opacity');
+  const color = layer._paint.get('fill-color');
+  const opacity = layer._paint.get('fill-opacity');
 
   if (opacity.constantOr(1) === 0) {
     return;
@@ -20,7 +20,7 @@ function drawFill(painter, sourceCache, layer, coords) {
 
   const colorMode = painter.colorModeForRenderPass();
 
-  const pattern = layer.paint.get('fill-pattern');
+  const pattern = layer._paint.get('fill-pattern');
   const pass =
     painter.opaquePassEnabledForLayer() &&
     !pattern.constantOr(1) &&
@@ -39,7 +39,7 @@ function drawFill(painter, sourceCache, layer, coords) {
   }
 
   // Draw stroke
-  if (painter.renderPass === 'translucent' && layer.paint.get('fill-antialias')) {
+  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.
@@ -59,7 +59,7 @@ function drawFill(painter, sourceCache, layer, coords) {
 function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, isOutline) {
   const gl = painter.context.gl;
 
-  const patternProperty = layer.paint.get('fill-pattern');
+  const patternProperty = layer._paint.get('fill-pattern');
   const image = patternProperty?.constantOr(1);
   const crossfade = layer.getCrossfadeParameters();
 
@@ -103,8 +103,8 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
     const tileMatrix = painter.translatePosMatrix(
       coord.posMatrix,
       tile,
-      layer.paint.get('fill-translate'),
-      layer.paint.get('fill-translate-anchor')
+      layer._paint.get('fill-translate'),
+      layer._paint.get('fill-translate-anchor')
     );
 
     if (!isOutline) {
@@ -135,7 +135,7 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
       bucket.layoutVertexBuffer,
       indexBuffer,
       segments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom,
       programConfiguration
     );

package/src/render/draw_fill_extrusion.js

@@ -7,7 +7,7 @@ const { fillExtrusionUniformValues, fillExtrusionPatternUniformValues } = requir
 module.exports = draw;
 
 function draw(painter, source, layer, coords) {
-  const opacity = layer.paint.get('fill-extrusion-opacity');
+  const opacity = layer._paint.get('fill-extrusion-opacity');
   if (opacity === 0) {
     return;
   }
@@ -15,7 +15,7 @@ function draw(painter, source, layer, coords) {
   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)) {
+    if (opacity === 1 && !layer._paint.get('fill-extrusion-pattern').constantOr(1)) {
       const colorMode = painter.colorModeForRenderPass();
       drawExtrusionTiles(painter, source, layer, coords, depthMode, StencilMode.disabled, colorMode);
     } else {
@@ -43,10 +43,10 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
   const context = painter.context;
   const gl = context.gl;
 
-  const patternProperty = layer.paint.get('fill-extrusion-pattern');
+  const patternProperty = layer._paint.get('fill-extrusion-pattern');
   const image = patternProperty.constantOr(1);
   const crossfade = layer.getCrossfadeParameters();
-  const opacity = layer.paint.get('fill-extrusion-opacity');
+  const opacity = layer._paint.get('fill-extrusion-opacity');
 
   for (const coord of coords) {
     const tile = source.getTile(coord);
@@ -72,11 +72,11 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
     const matrix = painter.translatePosMatrix(
       coord.posMatrix,
       tile,
-      layer.paint.get('fill-extrusion-translate'),
-      layer.paint.get('fill-extrusion-translate-anchor')
+      layer._paint.get('fill-extrusion-translate'),
+      layer._paint.get('fill-extrusion-translate-anchor')
     );
 
-    const shouldUseVerticalGradient = layer.paint.get('fill-extrusion-vertical-gradient');
+    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);
@@ -93,7 +93,7 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
       bucket.layoutVertexBuffer,
       bucket.indexBuffer,
       bucket.segments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom,
       programConfiguration
     );

package/src/render/draw_heatmap.js

@@ -9,7 +9,7 @@ const { heatmapUniformValues, heatmapTextureUniformValues } = require('./program
 module.exports = drawHeatmap;
 
 function drawHeatmap(painter, sourceCache, layer, coords) {
-  if (layer.paint.get('heatmap-opacity') === 0) {
+  if (layer._paint.get('heatmap-opacity') === 0) {
     return;
   }
 
@@ -51,12 +51,12 @@ function drawHeatmap(painter, sourceCache, layer, coords) {
         stencilMode,
         colorMode,
         CullFaceMode.disabled,
-        heatmapUniformValues(coord.posMatrix, tile, zoom, layer.paint.get('heatmap-intensity')),
+        heatmapUniformValues(coord.posMatrix, tile, zoom, layer._paint.get('heatmap-intensity')),
         layer.id,
         bucket.layoutVertexBuffer,
         bucket.indexBuffer,
         bucket.segments,
-        layer.paint,
+        layer._paint,
         painter.transform.zoom,
         programConfiguration
       );
@@ -153,7 +153,7 @@ function renderTextureToMap(painter, layer) {
       painter.viewportBuffer,
       painter.quadTriangleIndexBuffer,
       painter.viewportSegments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom
     );
 }

package/src/render/draw_line.js

@@ -11,17 +11,17 @@ const {
 module.exports = function drawLine(painter, sourceCache, layer, coords) {
   if (painter.renderPass !== 'translucent') return;
 
-  const opacity = layer.paint.get('line-opacity');
-  const width = layer.paint.get('line-width');
+  const opacity = layer._paint.get('line-opacity');
+  const width = layer._paint.get('line-width');
   if (opacity.constantOr(1) === 0 || width.constantOr(1) === 0) return;
 
   const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
   const colorMode = painter.colorModeForRenderPass();
 
-  const dasharray = layer.paint.get('line-dasharray');
-  const patternProperty = layer.paint.get('line-pattern');
+  const dasharray = layer._paint.get('line-dasharray');
+  const patternProperty = layer._paint.get('line-pattern');
   const image = patternProperty.constantOr(1);
-  const gradient = layer.paint.get('line-gradient');
+  const gradient = layer._paint.get('line-gradient');
   const crossfade = layer.getCrossfadeParameters();
 
   const programId = dasharray ? 'lineSDF' : image ? 'linePattern' : gradient ? 'lineGradient' : 'line';
@@ -88,7 +88,7 @@ module.exports = function drawLine(painter, sourceCache, layer, coords) {
       bucket.layoutVertexBuffer,
       bucket.indexBuffer,
       bucket.segments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom,
       programConfiguration
     );

package/src/render/draw_raster.js

@@ -11,7 +11,7 @@ module.exports = drawRaster;
 
 function drawRaster(painter, sourceCache, layer, coords) {
   if (painter.renderPass !== 'translucent') return;
-  if (layer.paint.get('raster-opacity') === 0) return;
+  if (layer._paint.get('raster-opacity') === 0) return;
 
   const context = painter.context;
   const gl = context.gl;
@@ -27,14 +27,14 @@ function drawRaster(painter, sourceCache, layer, coords) {
     // Use gl.LESS to prevent double drawing in areas where tiles overlap.
     const depthMode = painter.depthModeForSublayer(
       coord.overscaledZ - minTileZ,
-      layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly,
+      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'));
+    tile.registerFadeDuration(layer._paint.get('raster-fade-duration'));
 
     const parentTile = sourceCache.findLoadedParent(coord, 0);
     const fade = getFadeValues(tile, parentTile, sourceCache, layer, painter.transform);
@@ -42,7 +42,7 @@ function drawRaster(painter, sourceCache, layer, coords) {
     let parentScaleBy;
     let parentTL;
 
-    const textureFilter = layer.paint.get('raster-resampling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
+    const textureFilter = layer._paint.get('raster-resampling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
 
     context.activeTexture.set(gl.TEXTURE0);
     tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
@@ -86,7 +86,7 @@ function drawRaster(painter, sourceCache, layer, coords) {
         tile.maskedBoundsBuffer,
         tile.maskedIndexBuffer,
         tile.segments,
-        layer.paint,
+        layer._paint,
         painter.transform.zoom
       );
     } else {
@@ -108,7 +108,7 @@ function drawRaster(painter, sourceCache, layer, coords) {
 }
 
 function getFadeValues(tile, parentTile, sourceCache, layer, transform) {
-  const fadeDuration = layer.paint.get('raster-fade-duration');
+  const fadeDuration = layer._paint.get('raster-fade-duration');
 
   if (fadeDuration > 0) {
     const now = browser.now();

package/src/render/draw_symbol.js

@@ -21,35 +21,35 @@ function drawSymbols(painter, sourceCache, layer, coords) {
   const stencilMode = StencilMode.disabled;
   const colorMode = painter.colorModeForRenderPass();
 
-  if (layer.paint.get('icon-opacity').constantOr(1) !== 0) {
+  if (layer._paint.get('icon-opacity').constantOr(1) !== 0) {
     drawLayerSymbols(
       painter,
       sourceCache,
       layer,
       coords,
       false,
-      layer.paint.get('icon-translate'),
-      layer.paint.get('icon-translate-anchor'),
-      layer.layout.get('icon-rotation-alignment'),
-      layer.layout.get('icon-pitch-alignment'),
-      layer.layout.get('icon-keep-upright'),
+      layer._paint.get('icon-translate'),
+      layer._paint.get('icon-translate-anchor'),
+      layer._layout.get('icon-rotation-alignment'),
+      layer._layout.get('icon-pitch-alignment'),
+      layer._layout.get('icon-keep-upright'),
       stencilMode,
       colorMode
     );
   }
 
-  if (layer.paint.get('text-opacity').constantOr(1) !== 0) {
+  if (layer._paint.get('text-opacity').constantOr(1) !== 0) {
     drawLayerSymbols(
       painter,
       sourceCache,
       layer,
       coords,
       true,
-      layer.paint.get('text-translate'),
-      layer.paint.get('text-translate-anchor'),
-      layer.layout.get('text-rotation-alignment'),
-      layer.layout.get('text-pitch-alignment'),
-      layer.layout.get('text-keep-upright'),
+      layer._paint.get('text-translate'),
+      layer._paint.get('text-translate-anchor'),
+      layer._layout.get('text-rotation-alignment'),
+      layer._layout.get('text-pitch-alignment'),
+      layer._layout.get('text-keep-upright'),
       stencilMode,
       colorMode
     );
@@ -80,7 +80,7 @@ function drawLayerSymbols(
 
   const rotateWithMap = rotationAlignment === 'map';
   const pitchWithMap = pitchAlignment === 'map';
-  const alongLine = rotateWithMap && layer.layout.get('symbol-placement') !== 'point';
+  const alongLine = rotateWithMap && layer._layout.get('symbol-placement') !== 'point';
   // Line label rotation happens in `updateLineLabels`
   // Pitched point labels are automatically rotated by the labelPlaneMatrix projection
   // Unpitched point labels need to have their rotation applied after projection
@@ -119,7 +119,7 @@ function drawLayerSymbols(
       tile.glyphAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
       texSize = tile.glyphAtlasTexture.size;
     } else {
-      const iconScaled = layer.layout.get('icon-size').constantOr(0) !== 1 || bucket.iconsNeedLinear;
+      const iconScaled = layer._layout.get('icon-size').constantOr(0) !== 1 || bucket.iconsNeedLinear;
       const iconTransformed = pitchWithMap || tr.pitch !== 0;
 
       tile.imageAtlasTexture.bind(
@@ -167,7 +167,7 @@ function drawLayerSymbols(
 
     let uniformValues;
     if (isSDF) {
-      const hasHalo = layer.paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
+      const hasHalo = layer._paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
 
       uniformValues = symbolSDFUniformValues(
         sizeData.functionType,
@@ -222,7 +222,7 @@ function drawSymbolElements(buffers, layer, painter, program, depthMode, stencil
     buffers.layoutVertexBuffer,
     buffers.indexBuffer,
     buffers.segments,
-    layer.paint,
+    layer._paint,
     painter.transform.zoom,
     buffers.programConfigurations.get(layer.id),
     buffers.dynamicLayoutVertexBuffer,

package/src/render/glyph_atlas.js

@@ -1,5 +1,4 @@
 const { AlphaImage } = require('../util/image');
-const { register } = require('../util/transfer_registry');
 const { default: potpack } = require('potpack');
 
 const padding = 1;
@@ -47,6 +46,4 @@ class GlyphAtlas {
   }
 }
 
-register('GlyphAtlas', GlyphAtlas);
-
 module.exports = GlyphAtlas;

package/src/render/glyph_manager.js

@@ -8,8 +8,7 @@ class GlyphManager {
   async loadGlyphRange(stack, range) {
     this.#cache[stack] ??= {};
     const promise = (this.#cache[stack][range] ??= this.loader(stack, range));
-    const response = await promise;
-    return response.slice();
+    return await promise;
   }
 }
 

package/src/render/image_atlas.js

@@ -1,5 +1,4 @@
 const { RGBAImage } = require('../util/image');
-const { register } = require('../util/transfer_registry');
 const { default: potpack } = require('potpack');
 
 const padding = 1;
@@ -89,6 +88,3 @@ class ImageAtlas {
 
 ImageAtlas.ImagePosition = ImagePosition;
 module.exports = ImageAtlas;
-
-register('ImagePosition', ImagePosition);
-register('ImageAtlas', ImageAtlas);

package/src/render/image_manager.js

@@ -23,10 +23,11 @@ const padding = 1;
 */
 class ImageManager {
   #loadedState = Promise.withResolvers();
+  #imageQueue = new Map();
   constructor() {
-    this.images = {};
+    this.images = new Map();
 
-    this.patterns = {};
+    this.patterns = new Map();
     this.atlasImage = new RGBAImage({ width: 1, height: 1 });
     this.dirty = true;
   }
@@ -44,22 +45,31 @@ class ImageManager {
   }
 
   getImage(id) {
-    return this.images[id];
+    return this.images.get(id);
   }
 
   addImage(id, image) {
-    assert(!this.images[id]);
-    this.images[id] = image;
+    assert(!(this.images.has(id) || this.#imageQueue.has(id)));
+    if (image.promise) {
+      this.#imageQueue.set(id, image.promise);
+      image.promise.then(image => {
+        this.#imageQueue.delete(id);
+        this.images.set(id, image);
+      });
+      return;
+    }
+    this.images.set(id, image);
   }
 
   removeImage(id) {
-    assert(this.images[id]);
-    delete this.images[id];
-    delete this.patterns[id];
+    assert(this.images.has(id) || this.#imageQueue.has(id));
+    this.images.delete(id);
+    this.#imageQueue.delete(id);
+    this.patterns.delete(id);
   }
 
   listImages() {
-    return Object.keys(this.images);
+    return Array.from(this.images.keys());
   }
 
   async getImages(ids) {
@@ -67,11 +77,16 @@ class ImageManager {
 
     const response = {};
     for (const id of ids) {
-      const image = this.images[id];
+      let image = this.images.get(id);
+      if (!image) {
+        if (!this.#imageQueue.has(id)) {
+          continue;
+        }
+        image = await this.#imageQueue.get(id);
+      }
       if (image) {
-        // Clone the image so that our own copy of its ArrayBuffer doesn't get transferred.
         response[id] = {
-          data: image.data.clone(),
+          data: image.data,
           pixelRatio: image.pixelRatio,
           sdf: image.sdf
         };
@@ -88,7 +103,7 @@ class ImageManager {
   }
 
   getPattern(id) {
-    const pattern = this.patterns[id];
+    const pattern = this.patterns.get(id);
     if (pattern) {
       return pattern.position;
     }
@@ -102,7 +117,7 @@ class ImageManager {
     const h = image.data.height + padding * 2;
     const bin = { w, h, x: 0, y: 0 };
     const position = new ImagePosition(bin, image);
-    this.patterns[id] = { bin, position };
+    this.patterns.set(id, { bin, position });
     this._updatePatternAtlas();
 
     return position;
@@ -122,8 +137,8 @@ class ImageManager {
 
   _updatePatternAtlas() {
     const bins = [];
-    for (const id in this.patterns) {
-      bins.push(this.patterns[id].bin);
+    for (const { bin } of this.patterns.values()) {
+      bins.push(bin);
     }
 
     const { w, h } = potpack(bins);
@@ -131,11 +146,10 @@ class ImageManager {
     const dst = this.atlasImage;
     dst.resize({ width: w ?? 1, height: h ?? 1 });
 
-    for (const id in this.patterns) {
-      const { bin } = this.patterns[id];
+    for (const [id, { bin }] of this.patterns) {
       const x = bin.x + padding;
       const y = bin.y + padding;
-      const src = this.images[id].data;
+      const src = this.images.get(id).data;
       const w = src.width;
       const h = src.height;
 

package/src/render/painter.js

@@ -83,8 +83,8 @@ class Painter {
     this.context.viewport.set([0, 0, this.width, this.height]);
 
     if (this.style) {
-      for (const layerId of this.style._order) {
-        this.style._layers[layerId].resize();
+      for (const layer of this.style._layers.values()) {
+        layer.resize();
       }
     }
 
@@ -284,8 +284,7 @@ class Painter {
 
     this.symbolFadeChange = style.placement.symbolFadeChange(browser.now());
 
-    const layerIds = this.style._order;
-    const sourceCaches = this.style.sourceCaches;
+    const sourceCaches = style._sources;
 
     for (const id in sourceCaches) {
       const sourceCache = sourceCaches[id];
@@ -314,10 +313,11 @@ class Painter {
       updateTileMasks(visibleTiles, this.context);
     }
 
+    const layers = Array.from(style._layers.values());
+
     this.opaquePassCutoff = Number.POSITIVE_INFINITY;
-    for (let i = 0; i < layerIds.length; i++) {
-      const layerId = layerIds[i];
-      if (this.style._layers[layerId].is3D()) {
+    for (let i = 0; i < layers.length; i++) {
+      if (layers[i].is3D()) {
         this.opaquePassCutoff = i;
         break;
       }
@@ -330,8 +330,7 @@ class Painter {
     this.renderPass = 'offscreen';
     this.depthRboNeedsClear = true;
 
-    for (const layerId of layerIds) {
-      const layer = this.style._layers[layerId];
+    for (const layer of layers) {
       if (!layer.hasOffscreenPass() || layer.isHidden(this.transform.zoom)) continue;
 
       const coords = coordsDescending[layer.source];
@@ -349,14 +348,14 @@ class Painter {
     this.clearStencil();
 
     this._showOverdrawInspector = options.showOverdrawInspector;
-    this.depthRangeFor3D = [0, 1 - (style._order.length + 2) * this.numSublayers * this.depthEpsilon];
+    this.depthRangeFor3D = [0, 1 - (style._layers.size + 2) * this.numSublayers * this.depthEpsilon];
 
     // Opaque pass ===============================================
     // Draw opaque layers top-to-bottom first.
     this.renderPass = 'opaque';
 
-    for (this.currentLayer = layerIds.length - 1; this.currentLayer >= 0; this.currentLayer--) {
-      const layer = this.style._layers[layerIds[this.currentLayer]];
+    for (this.currentLayer = layers.length - 1; this.currentLayer >= 0; this.currentLayer--) {
+      const layer = layers[this.currentLayer];
       const sourceCache = sourceCaches[layer.source];
       const coords = coordsAscending[layer.source];
 
@@ -368,8 +367,8 @@ class Painter {
     // Draw all other layers bottom-to-top.
     this.renderPass = 'translucent';
 
-    for (this.currentLayer = 0; this.currentLayer < layerIds.length; this.currentLayer++) {
-      const layer = this.style._layers[layerIds[this.currentLayer]];
+    for (this.currentLayer = 0; this.currentLayer < layers.length; this.currentLayer++) {
+      const layer = layers[this.currentLayer];
       const sourceCache = sourceCaches[layer.source];
 
       // For symbol layers in the translucent pass, we add extra tiles to the renderable set

package/src/render/program/circle_program.js

@@ -14,7 +14,7 @@ const circleUniformValues = (painter, coord, tile, layer) => {
 
   let pitchWithMap;
   let extrudeScale;
-  if (layer.paint.get('circle-pitch-alignment') === 'map') {
+  if (layer._paint.get('circle-pitch-alignment') === 'map') {
     const pixelRatio = pixelsToTileUnits(tile, 1, transform.zoom);
     pitchWithMap = true;
     extrudeScale = [pixelRatio, pixelRatio];
@@ -25,12 +25,12 @@ const circleUniformValues = (painter, coord, tile, layer) => {
 
   return {
     u_camera_to_center_distance: transform.cameraToCenterDistance,
-    u_scale_with_map: +(layer.paint.get('circle-pitch-scale') === 'map'),
+    u_scale_with_map: +(layer._paint.get('circle-pitch-scale') === 'map'),
     u_matrix: painter.translatePosMatrix(
       coord.posMatrix,
       tile,
-      layer.paint.get('circle-translate'),
-      layer.paint.get('circle-translate-anchor')
+      layer._paint.get('circle-translate'),
+      layer._paint.get('circle-translate-anchor')
     ),
     u_pitch_with_map: +pitchWithMap,
     u_extrude_scale: extrudeScale

package/src/render/program/fill_extrusion_program.js

@@ -29,7 +29,7 @@ const fillExtrusionPatternUniforms = (context, locations) => ({
 });
 
 const fillExtrusionUniformValues = (matrix, painter, shouldUseVerticalGradient, opacity) => {
-  const light = painter.style.light;
+  const light = painter.style._light;
   const _lp = light.properties.get('position');
   const lightPos = [_lp.x, _lp.y, _lp.z];
   const lightMat = mat3.create();

package/src/render/program/heatmap_program.js

@@ -34,7 +34,7 @@ const heatmapTextureUniformValues = (painter, layer, textureUnit, colorRampUnit)
     u_world: [gl.drawingBufferWidth, gl.drawingBufferHeight],
     u_image: textureUnit,
     u_color_ramp: colorRampUnit,
-    u_opacity: layer.paint.get('heatmap-opacity')
+    u_opacity: layer._paint.get('heatmap-opacity')
   };
 };
 

package/src/render/program/hillshade_program.js

@@ -24,13 +24,13 @@ const hillshadePrepareUniforms = (context, locations) => ({
 });
 
 const hillshadeUniformValues = (painter, tile, layer) => {
-  const shadow = layer.paint.get('hillshade-shadow-color');
-  const highlight = layer.paint.get('hillshade-highlight-color');
-  const accent = layer.paint.get('hillshade-accent-color');
+  const shadow = layer._paint.get('hillshade-shadow-color');
+  const highlight = layer._paint.get('hillshade-highlight-color');
+  const accent = layer._paint.get('hillshade-accent-color');
 
-  let azimuthal = layer.paint.get('hillshade-illumination-direction') * (Math.PI / 180);
+  let azimuthal = layer._paint.get('hillshade-illumination-direction') * (Math.PI / 180);
   // modify azimuthal angle by map rotation if light is anchored at the viewport
-  if (layer.paint.get('hillshade-illumination-anchor') === 'viewport') {
+  if (layer._paint.get('hillshade-illumination-anchor') === 'viewport') {
     azimuthal -= painter.transform.angle;
   }
   const align = !painter.options.moving;
@@ -38,7 +38,7 @@ const hillshadeUniformValues = (painter, tile, layer) => {
     u_matrix: painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped(), align),
     u_image: 0,
     u_latrange: getTileLatRange(painter, tile.tileID),
-    u_light: [layer.paint.get('hillshade-exaggeration'), azimuthal],
+    u_light: [layer._paint.get('hillshade-exaggeration'), azimuthal],
     u_shadow: shadow,
     u_highlight: highlight,
     u_accent: accent

package/src/render/program/line_program.js

@@ -75,7 +75,7 @@ const lineSDFUniformValues = (painter, tile, layer, dasharray, crossfade) => {
   const lineAtlas = painter.lineAtlas;
   const tileRatio = calculateTileRatio(tile, transform);
 
-  const round = layer.layout.get('line-cap') === 'round';
+  const round = layer._layout.get('line-cap') === 'round';
 
   const posA = lineAtlas.getDash(dasharray.from, round);
   const posB = lineAtlas.getDash(dasharray.to, round);
@@ -102,8 +102,8 @@ function calculateMatrix(painter, tile, layer) {
   return painter.translatePosMatrix(
     tile.tileID.posMatrix,
     tile,
-    layer.paint.get('line-translate'),
-    layer.paint.get('line-translate-anchor')
+    layer._paint.get('line-translate'),
+    layer._paint.get('line-translate-anchor')
   );
 }
 

package/src/render/program/raster_program.js

@@ -22,14 +22,14 @@ const rasterUniformValues = (matrix, parentTL, parentScaleBy, fade, layer) => ({
   u_scale_parent: parentScaleBy,
   u_buffer_scale: 1,
   u_fade_t: fade.mix,
-  u_opacity: fade.opacity * layer.paint.get('raster-opacity'),
+  u_opacity: fade.opacity * layer._paint.get('raster-opacity'),
   u_image0: 0,
   u_image1: 1,
-  u_brightness_low: layer.paint.get('raster-brightness-min'),
-  u_brightness_high: layer.paint.get('raster-brightness-max'),
-  u_saturation_factor: saturationFactor(layer.paint.get('raster-saturation')),
-  u_contrast_factor: contrastFactor(layer.paint.get('raster-contrast')),
-  u_spin_weights: spinWeights(layer.paint.get('raster-hue-rotate'))
+  u_brightness_low: layer._paint.get('raster-brightness-min'),
+  u_brightness_high: layer._paint.get('raster-brightness-max'),
+  u_saturation_factor: saturationFactor(layer._paint.get('raster-saturation')),
+  u_contrast_factor: contrastFactor(layer._paint.get('raster-contrast')),
+  u_spin_weights: spinWeights(layer._paint.get('raster-hue-rotate'))
 });
 
 function spinWeights(angle) {