@antv/l7-layers 2.25.7 → 2.25.10

package/es/raster/models/raster.d.ts

@@ -0,0 +1,35 @@
+import type { IModel, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class RasterModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        UV: number;
+    };
+    protected texture: ITexture2D;
+    protected colorTexture: ITexture2D;
+    getUninforms(): {
+        [x: string]: any;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    private getRasterData;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+}

package/es/raster/models/raster.js

@@ -0,0 +1,156 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import { getDefaultDomain } from '@antv/l7-utils';
+import BaseModel from "../../core/BaseModel";
+import { RasterImageTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/raster/raster_2d_frag.glsl' */
+const rasterFrag = "layout(std140) uniform commonUniforms {\n  vec2 u_domain;\n  float u_opacity;\n  float u_noDataValue;\n  float u_clampLow;\n  float u_clampHigh;\n};\n\nuniform sampler2D u_rasterTexture;\nuniform sampler2D u_colorTexture;\n\nin vec2 v_texCoord;\n\nbool isnan_emu(float x) {\n  return x > 0.0 || x < 0.0\n    ? x != x\n    : x != 0.0;\n}\n\nout vec4 outputColor;\n\nvoid main() {\n  // Can use any component here since u_rasterTexture is under luminance format.\n  float value = texture(SAMPLER_2D(u_rasterTexture), vec2(v_texCoord.x, v_texCoord.y)).r;\n  if (value == u_noDataValue || isnan_emu(value)) {\n    discard;\n  } else if (u_clampLow < 0.5 && value < u_domain[0] || u_clampHigh < 0.5 && value > u_domain[1]) {\n    discard;\n  } else {\n    float normalisedValue = (value - u_domain[0]) / (u_domain[1] - u_domain[0]);\n    vec4 color = texture(SAMPLER_2D(u_colorTexture), vec2(normalisedValue, 0));\n\n    outputColor = color;\n    outputColor.a = outputColor.a * u_opacity;\n    if (outputColor.a < 0.01) discard;\n  }\n}\n";
+/* babel-plugin-inline-import '../shaders/raster/raster_2d_vert.glsl' */
+const rasterVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_domain;\n  float u_opacity;\n  float u_noDataValue;\n  float u_clampLow;\n  float u_clampHigh;\n};\n\nout vec2 v_texCoord;\n\n#pragma include \"projection\"\n\nvoid main() {\n  v_texCoord = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));\n}\n";
+export default class RasterModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+    _defineProperty(this, "colorTexture", void 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      UV: 9
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity = 1,
+      clampLow = true,
+      clampHigh = true,
+      noDataValue = -9999999,
+      domain,
+      rampColors
+    } = this.layer.getLayerConfig();
+    const newdomain = domain || getDefaultDomain(rampColors);
+    this.colorTexture = this.layer.textureService.getColorTexture(rampColors, newdomain);
+    const commonOptions = {
+      u_domain: newdomain,
+      u_opacity: opacity || 1,
+      u_noDataValue: noDataValue,
+      u_clampLow: clampLow ? 1 : 0,
+      u_clampHigh: (typeof clampHigh !== 'undefined' ? clampHigh : clampLow) ? 1 : 0,
+      u_rasterTexture: this.texture,
+      u_colorTexture: this.colorTexture
+    };
+    this.textures = [this.texture, this.colorTexture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  getRasterData(parserDataItem) {
+    return _asyncToGenerator(function* () {
+      if (Array.isArray(parserDataItem.data)) {
+        // 直接传入波段数据
+        return {
+          data: parserDataItem.data,
+          width: parserDataItem.width,
+          height: parserDataItem.height
+        };
+      } else {
+        // 多波段形式、需要进行处理
+        const {
+          rasterData,
+          width,
+          height
+        } = yield parserDataItem.data;
+        return {
+          data: Array.from(rasterData),
+          width,
+          height
+        };
+      }
+    })();
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.initUniformsBuffer();
+      const source = _this2.layer.getSource();
+      const {
+        createTexture2D,
+        queryVerdorInfo
+      } = _this2.rendererService;
+      const parserDataItem = source.data.dataArray[0];
+      const {
+        data,
+        width,
+        height
+      } = yield _this2.getRasterData(parserDataItem);
+      _this2.texture = createTexture2D({
+        // @ts-ignore
+        data: new Float32Array(data),
+        width,
+        height,
+        /**
+         * WebGL1 allow the combination of gl.LUMINANCE & gl.FLOAT with OES_texture_float
+         * TODO: https://github.com/antvis/g-device-api/issues/188
+         */
+        format: queryVerdorInfo() === 'WebGL1' ? gl.LUMINANCE : gl.RED,
+        type: gl.FLOAT,
+        alignment: 1
+      });
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'rasterImageData',
+        vertexShader: rasterVert,
+        fragmentShader: rasterFrag,
+        defines: _this2.getDefines(),
+        triangulation: RasterImageTriangulation,
+        primitive: gl.TRIANGLES,
+        depth: {
+          enable: false
+        },
+        pickingEnabled: false
+      });
+      return [model];
+    })();
+  }
+  clearModels() {
+    var _this$texture, _this$colorTexture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+    (_this$colorTexture = this.colorTexture) === null || _this$colorTexture === void 0 || _this$colorTexture.destroy();
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        shaderLocation: this.attributeLocation.UV,
+        name: 'a_Uv',
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
+      }
+    });
+  }
+}

package/es/raster/models/rasterRgb.d.ts

@@ -0,0 +1,35 @@
+import type { IModel, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class RasterModel extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        UV: number;
+    };
+    protected texture: ITexture2D;
+    protected dataOption: any;
+    getUninforms(): {
+        [x: string]: any;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    private getRasterData;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+}

package/es/raster/models/rasterRgb.js

@@ -0,0 +1,158 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["data"],
+  _excluded2 = ["rasterData"];
+import { AttributeType, gl } from '@antv/l7-core';
+import BaseModel from "../../core/BaseModel";
+import { RasterImageTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/rgb/raster_rgb_frag.glsl' */
+const rasterFrag = "uniform sampler2D u_texture;\nlayout(std140) uniform commonUniforms {\n  vec2 u_rminmax;\n  vec2 u_gminmax;\n  vec2 u_bminmax;\n  float u_opacity;\n  float u_noDataValue;\n};\n\nin vec2 v_texCoord;\n\nout vec4 outputColor;\n\nvoid main() {\n  vec3 rgb = texture(SAMPLER_2D(u_texture), vec2(v_texCoord.x, v_texCoord.y)).rgb;\n\n  if (rgb == vec3(u_noDataValue)) {\n    outputColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n    outputColor = vec4(\n      rgb.r / (u_rminmax.y - u_rminmax.x),\n      rgb.g / (u_gminmax.y - u_gminmax.x),\n      rgb.b / (u_bminmax.y - u_bminmax.x),\n      u_opacity\n    );\n  }\n\n  if (outputColor.a < 0.01) discard;\n\n}\n";
+/* babel-plugin-inline-import '../shaders/rgb/raster_rgb_vert.glsl' */
+const rasterVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec2 u_rminmax;\n  vec2 u_gminmax;\n  vec2 u_bminmax;\n  float u_opacity;\n  float u_noDataValue;\n};\n\nout vec2 v_texCoord;\n\n#pragma include \"projection\"\n\nvoid main() {\n  v_texCoord = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));\n}\n";
+export default class RasterModel extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+    _defineProperty(this, "dataOption", {});
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      UV: 9
+    });
+  }
+  getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+    return _objectSpread(_objectSpread({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity = 1,
+      noDataValue = 0
+    } = this.layer.getLayerConfig();
+    const {
+      rMinMax = [0, 255],
+      gMinMax = [0, 255],
+      bMinMax = [0, 255]
+    } = this.dataOption;
+    const commonOptions = {
+      u_rminmax: rMinMax,
+      u_gminmax: gMinMax,
+      u_bminmax: bMinMax,
+      u_opacity: opacity || 1,
+      u_noDataValue: noDataValue,
+      u_texture: this.texture
+    };
+    this.textures = [this.texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  getRasterData(parserDataItem) {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      if (Array.isArray(parserDataItem.data)) {
+        const {
+            data
+          } = parserDataItem,
+          rescfg = _objectWithoutProperties(parserDataItem, _excluded);
+        _this.dataOption = rescfg;
+        return _objectSpread({
+          data
+        }, rescfg);
+      }
+      const _yield$parserDataItem = yield parserDataItem.data,
+        {
+          rasterData
+        } = _yield$parserDataItem,
+        rest = _objectWithoutProperties(_yield$parserDataItem, _excluded2);
+      _this.dataOption = rest;
+      if (Array.isArray(rasterData)) {
+        // 直接传入波段数据
+        return _objectSpread({
+          data: rasterData
+        }, rest);
+      } else {
+        // 多波段形式、需要进行处理
+        // 支持彩色栅格（多通道）
+        return _objectSpread({
+          data: Array.from(rasterData)
+        }, rest);
+      }
+    })();
+  }
+  initModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      _this2.initUniformsBuffer();
+      const source = _this2.layer.getSource();
+      const {
+        createTexture2D
+      } = _this2.rendererService;
+      const parserDataItem = source.data.dataArray[0];
+      const {
+        data,
+        width,
+        height
+      } = yield _this2.getRasterData(parserDataItem);
+      _this2.texture = createTexture2D({
+        // @ts-ignore
+        data: new Float32Array(data),
+        width,
+        height,
+        format: gl.RGB,
+        type: gl.FLOAT
+      });
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'rasterImageDataRGBA',
+        vertexShader: rasterVert,
+        fragmentShader: rasterFrag,
+        defines: _this2.getDefines(),
+        triangulation: RasterImageTriangulation,
+        primitive: gl.TRIANGLES,
+        depth: {
+          enable: false
+        },
+        pickingEnabled: false
+      });
+      return [model];
+    })();
+  }
+  buildModels() {
+    var _this3 = this;
+    return _asyncToGenerator(function* () {
+      return _this3.initModels();
+    })();
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+
+    // point layer size;
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          // give the WebGL driver a hint that this buffer may change
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
+      }
+    });
+  }
+}

package/es/raster/models/rasterTerrainRgb.d.ts

@@ -0,0 +1,30 @@
+import type { IModel, ITexture2D } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class RasterTerrainRGB extends BaseModel {
+    protected get attributeLocation(): {
+        readonly POSITION: 0;
+        readonly POSITION_64LOW: 1;
+        readonly COLOR: 2;
+        readonly PICKING_COLOR: 3;
+        readonly STROKE: 4;
+        readonly OPACITY: 5;
+        readonly OFFSETS: 6;
+        readonly ROTATION: 7;
+        readonly MAX: 8;
+    } & Record<string, number> & {
+        MAX: 8;
+        UV: number;
+    };
+    protected texture: ITexture2D;
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    initModels(): Promise<IModel[]>;
+    clearModels(): void;
+    buildModels(): Promise<IModel[]>;
+    protected registerBuiltinAttributes(): void;
+}

package/es/raster/models/rasterTerrainRgb.js

@@ -0,0 +1,118 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { AttributeType, gl } from '@antv/l7-core';
+import { getDefaultDomain } from '@antv/l7-utils';
+import BaseModel from "../../core/BaseModel";
+import { RasterImageTriangulation } from "../../core/triangulation";
+/* babel-plugin-inline-import '../shaders/terrain/terrain_rgb_frag.glsl' */
+const Raster_terrainFrag = "uniform sampler2D u_texture;\nuniform sampler2D u_colorTexture;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_unpack;\n  vec2 u_domain;\n  float u_opacity;\n  float u_noDataValue;\n  float u_clampLow;\n  float u_clampHigh;\n};\n\nin vec2 v_texCoord;\nout vec4 outputColor;\n\nfloat getElevation(vec2 coord, float bias) {\n  // Convert encoded elevation value to meters\n  vec4 data = texture(SAMPLER_2D(u_texture), coord, bias) * 255.0;\n  data.a = -1.0;\n  return dot(data, u_unpack);\n}\n\nvec4 getColor(float value) {\n  float normalisedValue = (value - u_domain[0]) / (u_domain[1] - u_domain[0]);\n  vec2 coord = vec2(normalisedValue, 0);\n  return texture(SAMPLER_2D(u_colorTexture), coord);\n}\n\nvoid main() {\n  float value = getElevation(v_texCoord, 0.0);\n  if (value == u_noDataValue) {\n    outputColor = vec4(0.0, 0, 0, 0.0);\n  } else if (u_clampLow < 0.5 && value < u_domain[0] || u_clampHigh < 0.5 && value > u_domain[1]) {\n    outputColor = vec4(0.0, 0, 0, 0.0);\n  } else {\n    outputColor = getColor(value);\n    outputColor.a = outputColor.a * u_opacity;\n    if (outputColor.a < 0.01) discard;\n  }\n}\n";
+/* babel-plugin-inline-import '../shaders/terrain/terrain_rgb_vert.glsl' */
+const Raster_terrainVert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;\n\nlayout(std140) uniform commonUniforms {\n  vec4 u_unpack;\n  vec2 u_domain;\n  float u_opacity;\n  float u_noDataValue;\n  float u_clampLow;\n  float u_clampHigh;\n};\nout vec2 v_texCoord;\n#pragma include \"projection\"\n\nvoid main() {\n  v_texCoord = a_Uv;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));\n}\n";
+export default class RasterTerrainRGB extends BaseModel {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "texture", void 0);
+  }
+  get attributeLocation() {
+    return Object.assign(super.attributeLocation, {
+      MAX: super.attributeLocation.MAX,
+      UV: 9
+    });
+  }
+  getCommonUniformsInfo() {
+    const {
+      opacity,
+      clampLow = true,
+      clampHigh = true,
+      noDataValue = -9999999,
+      domain,
+      rampColors,
+      colorTexture,
+      rScaler = 6553.6,
+      gScaler = 25.6,
+      bScaler = 0.1,
+      offset = 10000
+    } = this.layer.getLayerConfig();
+    const newdomain = domain || getDefaultDomain(rampColors);
+    let texture = colorTexture;
+    if (!colorTexture) {
+      texture = this.layer.textureService.getColorTexture(rampColors, newdomain);
+    } else {
+      this.layer.textureService.setColorTexture(colorTexture, rampColors, newdomain);
+    }
+    const commonOptions = {
+      u_unpack: [rScaler, gScaler, bScaler, offset],
+      u_domain: newdomain,
+      u_opacity: opacity || 1,
+      u_noDataValue: noDataValue,
+      u_clampLow: clampLow,
+      u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow,
+      u_texture: this.texture,
+      u_colorTexture: texture
+    };
+    this.textures = [this.texture, texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  initModels() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.initUniformsBuffer();
+      const source = _this.layer.getSource();
+      const {
+        createTexture2D
+      } = _this.rendererService;
+      const imageData = yield source.data.images;
+      _this.texture = createTexture2D({
+        data: imageData[0],
+        width: imageData[0].width,
+        height: imageData[0].height,
+        min: gl.LINEAR,
+        mag: gl.LINEAR
+      });
+      const model = yield _this.layer.buildLayerModel({
+        moduleName: 'RasterTileDataImage',
+        vertexShader: Raster_terrainVert,
+        fragmentShader: Raster_terrainFrag,
+        defines: _this.getDefines(),
+        triangulation: RasterImageTriangulation,
+        primitive: gl.TRIANGLES,
+        depth: {
+          enable: false
+        }
+      });
+      return [model];
+    })();
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+  }
+  buildModels() {
+    var _this2 = this;
+    return _asyncToGenerator(function* () {
+      return _this2.initModels();
+    })();
+  }
+  registerBuiltinAttributes() {
+    // 注册 Position 属性 64 位地位部分，经纬度数据开启双精度，避免大于 22 层级以上出现数据偏移
+    this.registerPosition64LowAttribute();
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'uv',
+      type: AttributeType.Attribute,
+      descriptor: {
+        name: 'a_Uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          usage: gl.DYNAMIC_DRAW,
+          data: [],
+          type: gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          return [vertex[3], vertex[4]];
+        }
+      }
+    });
+  }
+}

package/es/raster/shaders/raster/raster_2d_frag.glsl

@@ -0,0 +1,37 @@
+layout(std140) uniform commonUniforms {
+  vec2 u_domain;
+  float u_opacity;
+  float u_noDataValue;
+  float u_clampLow;
+  float u_clampHigh;
+};
+
+uniform sampler2D u_rasterTexture;
+uniform sampler2D u_colorTexture;
+
+in vec2 v_texCoord;
+
+bool isnan_emu(float x) {
+  return x > 0.0 || x < 0.0
+    ? x != x
+    : x != 0.0;
+}
+
+out vec4 outputColor;
+
+void main() {
+  // Can use any component here since u_rasterTexture is under luminance format.
+  float value = texture(SAMPLER_2D(u_rasterTexture), vec2(v_texCoord.x, v_texCoord.y)).r;
+  if (value == u_noDataValue || isnan_emu(value)) {
+    discard;
+  } else if (u_clampLow < 0.5 && value < u_domain[0] || u_clampHigh < 0.5 && value > u_domain[1]) {
+    discard;
+  } else {
+    float normalisedValue = (value - u_domain[0]) / (u_domain[1] - u_domain[0]);
+    vec4 color = texture(SAMPLER_2D(u_colorTexture), vec2(normalisedValue, 0));
+
+    outputColor = color;
+    outputColor.a = outputColor.a * u_opacity;
+    if (outputColor.a < 0.01) discard;
+  }
+}

package/es/raster/shaders/raster/raster_2d_vert.glsl

@@ -0,0 +1,21 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;
+layout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;
+
+layout(std140) uniform commonUniforms {
+  vec2 u_domain;
+  float u_opacity;
+  float u_noDataValue;
+  float u_clampLow;
+  float u_clampHigh;
+};
+
+out vec2 v_texCoord;
+
+#pragma include "projection"
+
+void main() {
+  v_texCoord = a_Uv;
+  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);
+  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));
+}

package/es/raster/shaders/rgb/raster_rgb_frag.glsl

@@ -0,0 +1,30 @@
+uniform sampler2D u_texture;
+layout(std140) uniform commonUniforms {
+  vec2 u_rminmax;
+  vec2 u_gminmax;
+  vec2 u_bminmax;
+  float u_opacity;
+  float u_noDataValue;
+};
+
+in vec2 v_texCoord;
+
+out vec4 outputColor;
+
+void main() {
+  vec3 rgb = texture(SAMPLER_2D(u_texture), vec2(v_texCoord.x, v_texCoord.y)).rgb;
+
+  if (rgb == vec3(u_noDataValue)) {
+    outputColor = vec4(0.0, 0, 0, 0.0);
+  } else {
+    outputColor = vec4(
+      rgb.r / (u_rminmax.y - u_rminmax.x),
+      rgb.g / (u_gminmax.y - u_gminmax.x),
+      rgb.b / (u_bminmax.y - u_bminmax.x),
+      u_opacity
+    );
+  }
+
+  if (outputColor.a < 0.01) discard;
+
+}

package/es/raster/shaders/rgb/raster_rgb_vert.glsl

@@ -0,0 +1,21 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;
+layout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_Uv;
+
+layout(std140) uniform commonUniforms {
+  vec2 u_rminmax;
+  vec2 u_gminmax;
+  vec2 u_bminmax;
+  float u_opacity;
+  float u_noDataValue;
+};
+
+out vec2 v_texCoord;
+
+#pragma include "projection"
+
+void main() {
+  v_texCoord = a_Uv;
+  vec4 project_pos = project_position(vec4(a_Position, 1.0), a_Position64Low);
+  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, 0.0, 1.0));
+}

package/es/raster/shaders/terrain/terrain_rgb_frag.glsl

@@ -0,0 +1,40 @@
+uniform sampler2D u_texture;
+uniform sampler2D u_colorTexture;
+
+layout(std140) uniform commonUniforms {
+  vec4 u_unpack;
+  vec2 u_domain;
+  float u_opacity;
+  float u_noDataValue;
+  float u_clampLow;
+  float u_clampHigh;
+};
+
+in vec2 v_texCoord;
+out vec4 outputColor;
+
+float getElevation(vec2 coord, float bias) {
+  // Convert encoded elevation value to meters
+  vec4 data = texture(SAMPLER_2D(u_texture), coord, bias) * 255.0;
+  data.a = -1.0;
+  return dot(data, u_unpack);
+}
+
+vec4 getColor(float value) {
+  float normalisedValue = (value - u_domain[0]) / (u_domain[1] - u_domain[0]);
+  vec2 coord = vec2(normalisedValue, 0);
+  return texture(SAMPLER_2D(u_colorTexture), coord);
+}
+
+void main() {
+  float value = getElevation(v_texCoord, 0.0);
+  if (value == u_noDataValue) {
+    outputColor = vec4(0.0, 0, 0, 0.0);
+  } else if (u_clampLow < 0.5 && value < u_domain[0] || u_clampHigh < 0.5 && value > u_domain[1]) {
+    outputColor = vec4(0.0, 0, 0, 0.0);
+  } else {
+    outputColor = getColor(value);
+    outputColor.a = outputColor.a * u_opacity;
+    if (outputColor.a < 0.01) discard;
+  }
+}