@deck.gl/carto 9.0.34 → 9.1.0-beta.1

package/src/layers/heatmap-tile-layer.ts

@@ -1,15 +1,48 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {ShaderModule} from '@luma.gl/shadertools';
 import {getResolution} from 'quadbin';
 
-import {Accessor, CompositeLayer, CompositeLayerProps, DefaultProps, Layer} from '@deck.gl/core';
+import {
+  Accessor,
+  Color,
+  CompositeLayer,
+  CompositeLayerProps,
+  DefaultProps,
+  Layer,
+  UpdateParameters
+} from '@deck.gl/core';
 import {SolidPolygonLayer} from '@deck.gl/layers';
 
 import {HeatmapProps, heatmap} from './heatmap';
 import {RTTModifier, PostProcessModifier} from './post-process-utils';
 import QuadbinTileLayer, {QuadbinTileLayerProps} from './quadbin-tile-layer';
 import {TilejsonPropType} from './utils';
-import {TilejsonResult} from '../sources';
+import {TilejsonResult} from '@carto/api-client';
 import {_Tile2DHeader as Tile2DHeader} from '@deck.gl/geo-layers';
+import {Texture, TextureProps} from '@luma.gl/core';
+
+const defaultColorRange: Color[] = [
+  [255, 255, 178],
+  [254, 217, 118],
+  [254, 178, 76],
+  [253, 141, 60],
+  [240, 59, 32],
+  [189, 0, 38]
+];
 
+const TEXTURE_PROPS: TextureProps = {
+  format: 'rgba8unorm',
+  mipmaps: false,
+  sampler: {
+    minFilter: 'linear',
+    magFilter: 'linear',
+    addressModeU: 'clamp-to-edge',
+    addressModeV: 'clamp-to-edge'
+  }
+};
 /**
  * Computes the unit density (inverse of cell area)
  */
@@ -18,6 +51,39 @@ function unitDensityForCell(cell: bigint) {
   return Math.pow(4.0, cellResolution);
 }
 
+/**
+ * Converts a colorRange array to a flat array with 4 components per color
+ */
+function colorRangeToFlatArray(colorRange: Color[]): Uint8Array {
+  const flatArray = new Uint8Array(colorRange.length * 4);
+  let index = 0;
+
+  for (let i = 0; i < colorRange.length; i++) {
+    const color = colorRange[i];
+    flatArray[index++] = color[0];
+    flatArray[index++] = color[1];
+    flatArray[index++] = color[2];
+    flatArray[index++] = Number.isFinite(color[3]) ? (color[3] as number) : 255;
+  }
+
+  return flatArray;
+}
+
+const uniformBlock = `\
+uniform densityUniforms {
+  float factor;
+} density;
+`;
+
+type DensityProps = {factor: number};
+const densityUniforms = {
+  name: 'density',
+  vs: uniformBlock,
+  uniformTypes: {
+    factor: 'f32'
+  }
+} as const satisfies ShaderModule<DensityProps>;
+
 // Modified polygon layer to draw offscreen and output value expected by heatmap
 class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
   static layerName = 'RTTSolidPolygonLayer';
@@ -25,16 +91,13 @@ class RTTSolidPolygonLayer extends RTTModifier(SolidPolygonLayer) {
   getShaders(type) {
     const shaders = super.getShaders(type);
     shaders.inject = {
-      'vs:#decl': `
-uniform float densityFactor;
-`,
       'vs:#main-end': `
       // Value from getWeight accessor
   float weight = elevations;
 
   // Keep "power" delivered to screen constant when tiles update
-  // by outputting normalized density 
-  weight *= densityFactor;
+  // by outputting normalized density
+  weight *= density.factor;
 
   // Pack float into 3 channels to pass to heatmap shader
   // SCALE value important, as we don't want to saturate
@@ -47,15 +110,18 @@ uniform float densityFactor;
   vColor = vec4(mod(vec3(weight, floor(weight / SHIFT.yz)), 256.0), 255.0) / 255.0;
 `
     };
+    shaders.modules = [...shaders.modules, densityUniforms];
     return shaders;
   }
 
   draw(this, opts: any) {
     const cell = this.props!.data[0];
     const maxDensity = this.props.elevationScale;
-    const densityFactor = unitDensityForCell(cell.id) / maxDensity;
+    const densityProps: DensityProps = {
+      factor: unitDensityForCell(cell.id) / maxDensity
+    };
     for (const model of this.state.models) {
-      model.setUniforms({densityFactor});
+      model.shaderInputs.setProps({density: densityProps});
     }
 
     super.draw(opts);
@@ -70,6 +136,7 @@ const defaultProps: DefaultProps<HeatmapTileLayerProps> = {
   getWeight: {type: 'accessor', value: 1},
   onMaxDensityChange: {type: 'function', optional: true, value: null},
   colorDomain: {type: 'array', value: [0, 1]},
+  colorRange: defaultColorRange,
   intensity: {type: 'number', value: 1},
   radiusPixels: {type: 'number', min: 0, max: 100, value: 20}
 };
@@ -83,6 +150,13 @@ export type HeatmapTileLayerProps<DataT = unknown> = _HeatmapTileLayerProps<Data
 /** Properties added by HeatmapTileLayer. */
 type _HeatmapTileLayerProps<DataT> = QuadbinTileLayerProps<DataT> &
   HeatmapProps & {
+    /**
+     * Specified as an array of colors [color1, color2, ...].
+     *
+     * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
+     */
+    colorRange: Color[];
+
     /**
      * The weight of each object.
      *
@@ -101,6 +175,7 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
   static defaultProps = defaultProps;
 
   state!: {
+    colorTexture?: Texture;
     isLoaded: boolean;
     tiles: Set<Tile2DHeader>;
     viewportChanged?: boolean;
@@ -119,12 +194,19 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
     return changeFlags.somethingChanged;
   }
 
+  updateState(opts: UpdateParameters<this>) {
+    const {props, oldProps} = opts;
+    super.updateState(opts);
+    if (props.colorRange !== oldProps.colorRange) {
+      this._updateColorTexture(opts);
+    }
+  }
+
   renderLayers(): Layer {
     const {
       data,
       getWeight,
       colorDomain,
-      colorRange,
       intensity,
       radiusPixels,
       _subLayerProps,
@@ -183,12 +265,13 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
 
         colorDomain,
 
-        colorRange,
         radiusPixels,
         intensity,
         _subLayerProps: subLayerProps,
         refinementStrategy: 'no-overlap',
 
+        colorTexture: this.state.colorTexture,
+
         // Disable line rendering
         extruded: false,
         stroked: false,
@@ -231,6 +314,27 @@ class HeatmapTileLayer<DataT = any, ExtraProps extends {} = {}> extends Composit
       })
     );
   }
+
+  _updateColorTexture(opts) {
+    const {colorRange} = opts.props;
+    let {colorTexture} = this.state;
+    const colors = colorRangeToFlatArray(colorRange);
+
+    if (colorTexture && colorTexture?.width === colorRange.length) {
+      // TODO(v9): Unclear whether `setSubImageData` is a public API, or what to use if not.
+      (colorTexture as any).setSubImageData({data: colors});
+    } else {
+      colorTexture?.destroy();
+      // @ts-ignore TODO v9.1
+      colorTexture = this.context.device.createTexture({
+        ...TEXTURE_PROPS,
+        data: colors,
+        width: colorRange.length,
+        height: 1
+      });
+    }
+    this.setState({colorTexture});
+  }
 }
 
 export default HeatmapTileLayer;

package/src/layers/heatmap.ts

@@ -1,54 +1,32 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {ShaderPass} from '@luma.gl/shadertools';
-import {Color} from '@deck.gl/core';
-const glsl = (s: TemplateStringsArray) => `${s}`;
+import {Texture} from '@luma.gl/core';
 
 /**
  * @filter       Heatmap
  * @param radiusPixels Blur radius in pixels, controls smoothness of heatmap
  * @param colorDomain Domain to apply to values prior to applying color scale
- * @param color1-6 Colors to use in color scale
+ * @param colorTexture 1D RGB lookup texture for color scale
+ * @param intensity Multiplier to apply to value
+ * @param opacity Output opacity
  */
 
-const fs = glsl`\
+const fs = /* glsl */ `\
 uniform heatmapUniforms {
-  vec2 delta;
-  float radiusPixels;
   vec2 colorDomain;
-  vec3 color1;
-  vec3 color2;
-  vec3 color3;
-  vec3 color4;
-  vec3 color5;
-  vec3 color6;
+  vec2 delta;
   float intensity;
   float opacity;
+  float radiusPixels;
 } heatmap;
 
-const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);
+uniform sampler2D colorTexture;
 
 vec3 colorGradient(float value) {
-  vec3 c1;
-  vec3 c2;
-  vec2 range;
-  if (value < STOPS.x) {
-    range = vec2(0.0, STOPS.x);
-    c1 = heatmap.color1; c2 = heatmap.color2;
-  } else if (value < STOPS.y) {
-    range = STOPS.xy;
-    c1 = heatmap.color2; c2 = heatmap.color3;
-  } else if (value < STOPS.z) {
-    range = STOPS.yz;
-    c1 = heatmap.color3; c2 = heatmap.color4;
-  } else if (value < STOPS.w) {
-    range = STOPS.zw;
-    c1 = heatmap.color4; c2 = heatmap.color5;
-  } else {
-    range = vec2(STOPS.w, 1.0);
-    c1 = heatmap.color5; c2 = heatmap.color6;
-  }
-
-  float f = (clamp(value, 0.0, 1.0) - range.x) / (range.y - range.x);
-  return mix(c1, c2, f) / 255.0;
+  return texture(colorTexture, vec2(value, 0.5)).rgb;
 }
 
 const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
@@ -115,15 +93,6 @@ vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
 }
 `;
 
-const defaultColorRange: Color[] = [
-  [255, 255, 178],
-  [254, 217, 118],
-  [254, 178, 76],
-  [253, 141, 60],
-  [240, 59, 32],
-  [189, 0, 38]
-];
-
 export type HeatmapProps = {
   /**
    * Radius of the heatmap blur in pixels, to which the weight of a cell is distributed.
@@ -132,94 +101,67 @@ export type HeatmapProps = {
    */
   radiusPixels?: number;
   /**
-   * Controls how weight values are mapped to the `colorRange`, as an array of two numbers [`minValue`, `maxValue`].
+   * Controls how weight values are mapped to the colors in `colorTexture`, as an array of two numbers [`minValue`, `maxValue`].
    *
    * @default [0, 1]
    */
   colorDomain?: [number, number];
-  /**
-   * Specified as an array of colors [color1, color2, ...].
-   *
-   * @default `6-class YlOrRd` - [colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6)
-   */
-  colorRange: Color[];
   /**
    * Value that is multiplied with the total weight at a pixel to obtain the final weight. A value larger than 1 biases the output color towards the higher end of the spectrum, and a value less than 1 biases the output color towards the lower end of the spectrum.
    */
   intensity?: number;
+  /**
+   * Color LUT for color gradient
+   */
+  colorTexture: Texture;
   opacity: number;
 };
 
-export type HeatmapUniforms = {
-  delta?: [number, number];
-  radiusPixels?: number;
-  colorDomain?: [number, number];
-  color1?: [number, number, number];
-  color2?: [number, number, number];
-  color3?: [number, number, number];
-  color4?: [number, number, number];
-  color5?: [number, number, number];
-  color6?: [number, number, number];
-  intensity: number;
-  opacity?: number;
+type PassProps = {
+  delta: [number, number];
 };
 
-export const heatmap: ShaderPass<HeatmapProps, HeatmapUniforms> = {
+export const heatmap = {
   name: 'heatmap',
   uniformPropTypes: {
-    delta: {value: [0, 1]},
-    radiusPixels: {value: 20, min: 0, softMax: 100},
     colorDomain: {value: [0, 1]},
-    color1: {value: [0, 0, 0]},
-    color2: {value: [0, 0, 0]},
-    color3: {value: [0, 0, 0]},
-    color4: {value: [0, 0, 0]},
-    color5: {value: [0, 0, 0]},
-    color6: {value: [0, 0, 0]},
+    delta: {value: [0, 1]},
     intensity: {value: 1, min: 0.1, max: 10},
-    opacity: {value: 1, min: 0, max: 1}
+    opacity: {value: 1, min: 0, max: 1},
+    radiusPixels: {value: 20, min: 0, softMax: 100}
   },
   uniformTypes: {
-    delta: 'vec2<f32>',
-    radiusPixels: 'f32',
     colorDomain: 'vec2<f32>',
-    color1: 'vec3<f32>',
-    color2: 'vec3<f32>',
-    color3: 'vec3<f32>',
-    color4: 'vec3<f32>',
-    color5: 'vec3<f32>',
-    color6: 'vec3<f32>',
+    delta: 'vec2<f32>',
     intensity: 'f32',
-    opacity: 'f32'
+    opacity: 'f32',
+    radiusPixels: 'f32'
   },
-  // @ts-expect-error stricter luma gl types
+  // @ts-ignore TODO v9.1
   getUniforms: opts => {
+    if (!opts) return {};
     const {
-      delta = [1, 0],
-      colorRange = defaultColorRange,
-      radiusPixels = 20,
       colorDomain = [0, 1],
+      colorTexture,
+      delta = [1, 0],
       intensity = 1,
-      opacity = 1
-    } = opts as HeatmapProps & {delta: [number, number]};
-    const [color1, color2, color3, color4, color5, color6] = colorRange;
+      opacity = 1,
+      radiusPixels = 20
+    } = opts;
     return {
-      delta,
-      color1,
-      color2,
-      color3,
-      color4,
-      color5,
-      color6,
-      radiusPixels,
       colorDomain,
+      colorTexture,
+      delta,
       intensity,
-      opacity
+      opacity,
+      radiusPixels
     };
   },
   fs,
   passes: [
+    // @ts-expect-error Seems typing in luma.gl should be Partial<>
     {sampler: true, uniforms: {delta: [1, 0]}},
+    // @ts-expect-error Seems typing in luma.gl should be Partial<>
     {sampler: true, uniforms: {delta: [0, 1]}}
   ]
-};
+} as const satisfies ShaderPass<HeatmapProps & PassProps>;

package/src/layers/point-label-layer.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {
   Accessor,
   Color,
@@ -24,10 +28,10 @@ class EnhancedTextBackgroundLayer extends TextBackgroundLayer {
 
     // Modify shader so that the padding is offset by the pixel offset to ensure the padding
     // always captures the anchor point. As padding is uniform we cannot pass it a per-label value
-    vs = vs.replaceAll('padding.', '_padding.');
+    vs = vs.replaceAll('textBackground.padding.', '_padding.');
     vs = vs.replace(
       'void main(void) {',
-      'void main(void) {\n  vec4 _padding = padding + instancePixelOffsets.xyxy * vec4(1.0, 1.0, -1.0, -1.0);'
+      'void main(void) {\n  vec4 _padding = textBackground.padding + instancePixelOffsets.xyxy * vec4(1.0, 1.0, -1.0, -1.0);'
     );
 
     return {...shaders, vs};

package/src/layers/post-process-utils.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {Framebuffer, TextureProps} from '@luma.gl/core';
 import {
   CompositeLayer,
@@ -64,8 +68,8 @@ export function RTTModifier(BaseLayer) {
     static layerName = `RTT-${BaseLayer.layerName}`;
 
     draw(this: RTTLayer, opts: any) {
-      const {moduleParameters} = opts;
-      const {picking} = moduleParameters;
+      const {shaderModuleProps} = opts;
+      const {picking} = shaderModuleProps;
       const postProcessLayer = getPostProcessLayer(this);
 
       if (!picking.isActive) {
@@ -130,10 +134,11 @@ export function PostProcessModifier<T extends Constructor<DrawableCompositeLayer
 
     _resizeBuffers(this: PostProcessLayer, opts: any) {
       // TODO we could likely render to a smaller buffer for better perf
-      const {moduleParameters} = opts;
+      const {shaderModuleProps} = opts;
       const {viewport} = this.context;
-      const width = moduleParameters.devicePixelRatio * viewport.width;
-      const height = moduleParameters.devicePixelRatio * viewport.height;
+      const {devicePixelRatio} = shaderModuleProps.project;
+      const width = devicePixelRatio * viewport.width;
+      const height = devicePixelRatio * viewport.height;
       this.internalState.renderBuffers.forEach((fbo: Framebuffer) => fbo.resize({width, height}));
     }
 

package/src/layers/quadbin-layer.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {AccessorFunction, DefaultProps} from '@deck.gl/core';
 import {
   _GeoCellLayer as GeoCellLayer,

package/src/layers/quadbin-tile-layer.ts

@@ -1,9 +1,13 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {CompositeLayer, CompositeLayerProps, Layer, LayersList, DefaultProps} from '@deck.gl/core';
 import QuadbinLayer, {QuadbinLayerProps} from './quadbin-layer';
 import QuadbinTileset2D from './quadbin-tileset-2d';
 import SpatialIndexTileLayer, {SpatialIndexTileLayerProps} from './spatial-index-tile-layer';
 import {hexToBigInt} from 'quadbin';
-import type {TilejsonResult} from '../sources/types';
+import type {TilejsonResult} from '@carto/api-client';
 import {injectAccessToken, TilejsonPropType} from './utils';
 import {DEFAULT_TILE_SIZE} from '../constants';
 
@@ -46,22 +50,20 @@ export default class QuadbinTileLayer<
     return loadOptions;
   }
 
-  renderLayers(): Layer | null | LayersList {
+  renderLayers(): SpatialIndexTileLayer | null {
     const tileJSON = this.props.data as TilejsonResult;
     if (!tileJSON) return null;
 
     const {tiles: data, maxresolution: maxZoom} = tileJSON;
-    return [
-      // @ts-ignore
-      new SpatialIndexTileLayer(this.props, {
-        id: `quadbin-tile-layer-${this.props.id}`,
-        data,
-        // TODO: Tileset2D should be generic over TileIndex type
-        TilesetClass: QuadbinTileset2D as any,
-        renderSubLayers,
-        maxZoom,
-        loadOptions: this.getLoadOptions()
-      })
-    ];
+    const SubLayerClass = this.getSubLayerClass('spatial-index-tile', SpatialIndexTileLayer);
+    return new SubLayerClass(this.props, {
+      id: `quadbin-tile-layer-${this.props.id}`,
+      data,
+      // TODO: Tileset2D should be generic over TileIndex type
+      TilesetClass: QuadbinTileset2D as any,
+      renderSubLayers,
+      maxZoom,
+      loadOptions: this.getLoadOptions()
+    });
   }
 }

package/src/layers/quadbin-tileset-2d.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {_Tileset2D as Tileset2D} from '@deck.gl/geo-layers';
 import {bigIntToHex, cellToParent, cellToTile, getResolution, tileToCell} from 'quadbin';
 

package/src/layers/quadbin-utils.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {worldToLngLat} from '@math.gl/web-mercator';
 import {cellToTile} from 'quadbin';
 

package/src/layers/raster-layer-vertex.glsl.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export default `\
 #version 300 es
 #define SHADER_NAME raster-layer-vertex-shader
@@ -11,16 +15,6 @@ in vec4 instanceLineColors;
 
 in vec3 instancePickingColors;
 
-// Custom uniforms
-uniform float opacity;
-uniform bool extruded;
-uniform bool stroked;
-uniform bool isStroke;
-uniform float coverage;
-uniform float elevationScale;
-uniform float widthScale;
-uniform vec3 offset;
-
 // Result
 out vec4 vColor;
 #ifdef FLAT_SHADING
@@ -29,25 +23,25 @@ out vec4 position_commonspace;
 
 void main(void) {
   // Rather than positioning using attribute, layout pixel grid using gl_InstanceID
-  vec2 common_position = offset.xy;
-  float scale = offset.z;
+  vec2 common_position = column.offset.xy;
+  float scale = column.widthScale; // Re-use widthScale prop to pass cell scale
 
   int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
   int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
-  common_position += scale * vec2(float(xIndex), float(yIndex));
+  common_position += scale * vec2(float(xIndex), float(yIndex - 1));
 
-  vec4 color = isStroke ? instanceLineColors : instanceFillColors;
+  vec4 color = column.isStroke ? instanceLineColors : instanceFillColors;
 
   // if alpha == 0.0 or z < 0.0, do not render element
   float shouldRender = float(color.a > 0.0 && instanceElevations >= 0.0);
-  float cellWidth = coverage * scale;
+  float cellWidth = column.coverage * scale;
 
   // Get position directly from quadbin, rather than projecting
   // Important to set geometry.position before using project_ methods below
   // as geometry.worldPosition is not set (we don't know our lat/long)
   geometry.position = vec4(common_position, 0.0, 1.0);
-  if (project_uProjectionMode == PROJECTION_MODE_WEB_MERCATOR_AUTO_OFFSET) {
-    geometry.position.xyz -= project_uCommonOrigin;
+  if (project.projectionMode == PROJECTION_MODE_WEB_MERCATOR_AUTO_OFFSET) {
+    geometry.position.xyz -= project.commonOrigin;
   }
 
   // calculate elevation, if 3d not enabled set to 0
@@ -56,11 +50,11 @@ void main(void) {
   // calculate stroke offset
   float strokeOffsetRatio = 1.0;
 
-  if (extruded) {
-    elevation = instanceElevations * (positions.z + 1.0) / 2.0 * elevationScale;
-  } else if (stroked) {
-    float halfOffset = project_pixel_size(widthScale) / cellWidth;
-    if (isStroke) {
+  if (column.extruded) {
+    elevation = instanceElevations * (positions.z + 1.0) / 2.0 * column.elevationScale;
+  } else if (column.stroked) {
+    float halfOffset = project_pixel_size(column.widthScale) / cellWidth;
+    if (column.isStroke) {
       strokeOffsetRatio -= sign(positions.z) * halfOffset;
     } else {
       strokeOffsetRatio -= halfOffset;
@@ -81,16 +75,16 @@ void main(void) {
   DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
 
   // Light calculations
-  if (extruded && !isStroke) {
+  if (column.extruded && !column.isStroke) {
 #ifdef FLAT_SHADING
     position_commonspace = geometry.position;
-    vColor = vec4(color.rgb, color.a * opacity);
+    vColor = vec4(color.rgb, color.a * layer.opacity);
 #else
-    vec3 lightColor = lighting_getLightColor(color.rgb, project_uCameraPosition, geometry.position.xyz, geometry.normal);
-    vColor = vec4(lightColor, color.a * opacity);
+    vec3 lightColor = lighting_getLightColor(color.rgb, project.cameraPosition, geometry.position.xyz, geometry.normal);
+    vColor = vec4(lightColor, color.a * layer.opacity);
 #endif
   } else {
-    vColor = vec4(color.rgb, color.a * opacity);
+    vColor = vec4(color.rgb, color.a * layer.opacity);
   }
 
   DECKGL_FILTER_COLOR(vColor, geometry);

package/src/layers/raster-layer.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {
   Accessor,
   CompositeLayer,
@@ -113,7 +117,8 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
 
     const blockSize = data.blockSize ?? 0;
     const [xOffset, yOffset, scale] = quadbinToOffset(tileIndex);
-    const offset = [xOffset, yOffset, scale / blockSize];
+    const offset = [xOffset, yOffset];
+    const lineWidthScale = scale / blockSize;
 
     // Filled Column Layer
     const CellLayer = this.getSubLayerClass('column', RasterColumnLayer);
@@ -136,6 +141,7 @@ export default class RasterLayer<DataT = any, ExtraProps = {}> extends Composite
         },
         dataComparator: wrappedDataComparator,
         offset,
+        lineWidthScale, // Re-use widthScale prop to pass cell scale,
         highlightedObjectIndex,
         highlightColor
       }