@antv/l7-layers 2.25.7 → 2.25.10

package/lib/polygon/models/ocean.d.ts

@@ -0,0 +1,37 @@
+import type { IModel, IModelUniform } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class OceanModel 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;
+    };
+    private texture1;
+    private texture2;
+    private texture3;
+    getUninforms(): {
+        [x: string]: any;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    getAnimateUniforms(): IModelUniform;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+    private loadTexture;
+}

package/lib/polygon/models/ocean.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _l7Utils = require("@antv/l7-utils");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _triangulation = require("../../core/triangulation");
+/* babel-plugin-inline-import '../shaders/ocean/ocean_frag.glsl' */
+const ocean_frag = "layout(std140) uniform commonUniforms {\n  vec4 u_watercolor;\n  vec4 u_watercolor2;\n  float u_time;\n};\n\nin vec2 v_uv;\nin float v_opacity;\nout vec4 outputColor;\n\nfloat coast2water_fadedepth = 0.1;\nfloat large_waveheight = 0.75; // change to adjust the \"heavy\" waves\nfloat large_wavesize = 3.4; // factor to adjust the large wave size\nfloat small_waveheight = 0.6; // change to adjust the small random waves\nfloat small_wavesize = 0.5; // factor to ajust the small wave size\nfloat water_softlight_fact = 15.0; // range [1..200] (should be << smaller than glossy-fact)\nfloat water_glossylight_fact = 120.0; // range [1..200]\nfloat particle_amount = 70.0;\n\nvec3 water_specularcolor = vec3(1.3, 1.3, 0.9); // specular Color (RGB) of the water-highlights\n#define light (vec3(-0.0, sin(u_time * 0.5) * 0.5 + 0.35, 2.8)) // position of the sun\n\nuniform sampler2D u_texture1;\nuniform sampler2D u_texture2;\nuniform sampler2D u_texture3;\n\nfloat hash(float n) {\n  return fract(sin(n) * 43758.5453123);\n}\n\n// 2d noise function\nfloat noise1(vec2 x) {\n  vec2 p = floor(x);\n  vec2 f = smoothstep(0.0, 1.0, fract(x));\n  float n = p.x + p.y * 57.0;\n  return mix(mix(hash(n + 0.0), hash(n + 1.0), f.x), mix(hash(n + 57.0), hash(n + 58.0), f.x), f.y);\n}\n\nfloat noise(vec2 p) {\n  return texture(SAMPLER_2D(u_texture2), p * vec2(1.0 / 256.0)).x;\n}\n\nvec4 highness(vec2 p) {\n  vec4 t = texture(SAMPLER_2D(u_texture1), fract(p));\n  float clipped =\n    -2.0 -\n    smoothstep(3.0, 10.0, t.a) * 6.9 -\n    smoothstep(10.0, 100.0, t.a) * 89.9 -\n    smoothstep(0.0, 10000.0, t.a) * 10000.0;\n  return clamp(t, 0.0, 3.0) + clamp(t / 3.0 - 1.0, 0.0, 1.0) + clamp(t / 16.0 - 1.0, 0.0, 1.0);\n}\n\nfloat height_map(vec2 p) {\n  vec4 height = highness(p);\n  /*\n    height = -0.5+\n        0.5*smoothstep(-100.,0.,-height)+\n        2.75*smoothstep(0.,2.,height)+\n        1.75*smoothstep(2.,4.,height)+\n        2.75*smoothstep(4.,16.,height)+\n        1.5*smoothstep(16.,1000.,height);\n    */\n\n  mat2 m = mat2(0.9563 * 1.4, -0.2924 * 1.4, 0.2924 * 1.4, 0.9563 * 1.4);\n  //p = p*6.;\n  float f = 0.6 * noise1(p);\n  p = m * p * 1.1 * 6.0;\n  f += 0.25 * noise(p);\n  p = m * p * 1.32;\n  f += 0.1666 * noise(p);\n  p = m * p * 1.11;\n  f += 0.0834 * noise(p);\n  p = m * p * 1.12;\n  f += 0.0634 * noise(p);\n  p = m * p * 1.13;\n  f += 0.0444 * noise(p);\n  p = m * p * 1.14;\n  f += 0.0274 * noise(p);\n  p = m * p * 1.15;\n  f += 0.0134 * noise(p);\n  p = m * p * 1.16;\n  f += 0.0104 * noise(p);\n  p = m * p * 1.17;\n  f += 0.0084 * noise(p);\n  f = 0.25 * f + dot(height, vec4(-0.03125, -0.125, 0.25, 0.25)) * 0.5;\n  const float FLAT_LEVEL = 0.92525;\n  //f = f*0.25+height*0.75;\n  if (f < FLAT_LEVEL) f = f;\n  else f = pow((f - FLAT_LEVEL) / (1.0 - FLAT_LEVEL), 2.0) * (1.0 - FLAT_LEVEL) * 2.0 + FLAT_LEVEL; // makes a smooth coast-increase\n  return clamp(f, 0.0, 10.0);\n}\n\nvec3 plasma_quintic(float x) {\n  x = clamp(x, 0.0, 1.0);\n  vec4 x1 = vec4(1.0, x, x * x, x * x * x); // 1 x x2 x3\n  vec4 x2 = x1 * x1.w * x; // x4 x5 x6 x7\n  return vec3(\n    dot(x1.xyzw, vec4(+0.063861086, +1.992659096, -1.023901152, -0.490832805)) +\n      dot(x2.xy, vec2(+1.308442123, -0.914547012)),\n    dot(x1.xyzw, vec4(+0.04971859, -0.791144343, +2.892305078, +0.811726816)) +\n      dot(x2.xy, vec2(-4.686502417, +2.717794514)),\n    dot(x1.xyzw, vec4(+0.513275779, +1.58025506, -5.164414457, +4.559573646)) +\n      dot(x2.xy, vec2(-1.916810682, +0.570638854))\n  );\n}\n\nvec4 color(vec2 p) {\n  vec4 c1 = vec4(1.7, 1.6, 0.9, 1);\n  vec4 c2 = vec4(0.2, 0.94, 0.1, 1);\n  vec4 c3 = vec4(0.3, 0.2, 0.0, 1);\n  vec4 c4 = vec4(0.99, 0.99, 1.6, 1);\n  vec4 v = highness(p);\n  float los = smoothstep(0.1, 1.1, v.b);\n  float his = smoothstep(3.5, 6.5, v.b);\n  float ces = smoothstep(1.0, 5.0, v.a);\n  vec4 lo = mix(c1, c2, los);\n  vec4 hi = mix(c3, c4, his);\n  vec4 ce = mix(lo, hi, ces);\n\n  return vec4(plasma_quintic(ces), 1).ragb;\n}\n\nvec3 terrain_map(vec2 p) {\n  return color(p).rgb * 0.75 +\n  0.25 * vec3(0.7, 0.55, 0.4) +\n  texture(SAMPLER_2D(u_texture3), fract(p * 5.0)).rgb * 0.5; // test-terrain is simply 'sandstone'\n}\n\nconst mat2 m = mat2(\n   0.72, -1.6 ,\n   1.6 ,  0.72\n);\n\nfloat water_map(vec2 p, float height) {\n  vec2 p2 = p * large_wavesize;\n  vec2 shift1 = 0.001 * vec2(u_time * 160.0 * 2.0, u_time * 120.0 * 2.0);\n  vec2 shift2 = 0.001 * vec2(u_time * 190.0 * 2.0, -u_time * 130.0 * 2.0);\n\n  // coarse crossing 'ocean' waves...\n  float f = 0.6 * noise(p);\n  f += 0.25 * noise(p * m);\n  f += 0.1666 * noise(p * m * m);\n  float wave =\n    sin(p2.x * 0.622 + p2.y * 0.622 + shift2.x * 4.269) * large_waveheight * f * height * height;\n\n  p *= small_wavesize;\n  f = 0.0;\n  float amp = 1.0,\n    s = 0.5;\n  for (int i = 0; i < 9; i++) {\n    p = m * p * 0.947;\n    f -= amp * abs(sin((noise(p + shift1 * s) - 0.5) * 2.0));\n    amp = amp * 0.59;\n    s *= -1.329;\n  }\n\n  return wave + f * small_waveheight;\n}\n\nfloat nautic(vec2 p) {\n  p *= 18.0;\n  float f = 0.0;\n  float amp = 1.0,\n    s = 0.5;\n  for (int i = 0; i < 3; i++) {\n    p = m * p * 1.2;\n    f += amp * abs(smoothstep(0.0, 1.0, noise(p + u_time * s)) - 0.5);\n    amp = amp * 0.5;\n    s *= -1.227;\n  }\n  return pow(1.0 - f, 5.0);\n}\n\nfloat particles(vec2 p) {\n  p *= 200.0;\n  float f = 0.0;\n  float amp = 1.0,\n    s = 1.5;\n  for (int i = 0; i < 3; i++) {\n    p = m * p * 1.2;\n    f += amp * noise(p + u_time * s);\n    amp = amp * 0.5;\n    s *= -1.227;\n  }\n  return pow(f * 0.35, 7.0) * particle_amount;\n}\n\nfloat test_shadow(vec2 xy, float height) {\n  vec3 r0 = vec3(xy, height);\n  vec3 rd = normalize(light - r0);\n\n  float hit = 1.0;\n  float t = 0.001;\n  for (int j = 1; j < 25; j++) {\n    vec3 p = r0 + t * rd;\n    float h = height_map(p.xy);\n    float height_diff = p.z - h;\n    if (height_diff < 0.0) {\n      return 0.0;\n    }\n    t += 0.01 + height_diff * 0.02;\n    hit = min(hit, 2.0 * height_diff / t); // soft shaddow\n  }\n  return hit;\n}\n\nvec3 CalcTerrain(vec2 uv, float height) {\n  vec3 col = terrain_map(uv);\n  vec2 iResolution = vec2(512.0);\n  float h1 = height_map(uv - vec2(0.0, 0.5) / iResolution.xy);\n  float h2 = height_map(uv + vec2(0.0, 0.5) / iResolution.xy);\n  float h3 = height_map(uv - vec2(0.5, 0.0) / iResolution.xy);\n  float h4 = height_map(uv + vec2(0.5, 0.0) / iResolution.xy);\n  vec3 norm = normalize(vec3(h3 - h4, h1 - h2, 1.0));\n  vec3 r0 = vec3(uv, height);\n  vec3 rd = normalize(light - r0);\n  float grad = dot(norm, rd);\n  col *= grad + pow(grad, 8.0);\n  float terrainshade = test_shadow(uv, height);\n  col = mix(col * 0.25, col, terrainshade);\n  return col;\n}\n\nvoid main() {\n  vec3 watercolor = u_watercolor.rgb;\n  vec3 watercolor2 = u_watercolor2.rgb;\n  vec2 uv = v_uv;\n  float WATER_LEVEL = 0.84; // Water level (range: 0.0 - 2.0)\n  float deepwater_fadedepth = 0.4 + coast2water_fadedepth;\n  float height = height_map(uv);\n  vec3 col;\n\n  float waveheight = clamp(WATER_LEVEL * 3.0 - 1.5, 0.0, 1.0);\n  float level = WATER_LEVEL + 0.2 * water_map(uv * 15.0 + vec2(u_time * 0.1), waveheight);\n  if (height > level) {\n    col = CalcTerrain(uv, height);\n  }\n  if (height <= level) {\n    vec2 dif = vec2(0.0, 0.01);\n    vec2 pos = uv * 15.0 + vec2(u_time * 0.01);\n    float h1 = water_map(pos - dif, waveheight);\n    float h2 = water_map(pos + dif, waveheight);\n    float h3 = water_map(pos - dif.yx, waveheight);\n    float h4 = water_map(pos + dif.yx, waveheight);\n    vec3 normwater = normalize(vec3(h3 - h4, h1 - h2, 0.125)); // norm-vector of the 'bumpy' water-plane\n    uv += normwater.xy * 0.002 * (level - height);\n\n    col = CalcTerrain(uv, height);\n\n    float coastfade = clamp((level - height) / coast2water_fadedepth, 0.0, 1.0);\n    float coastfade2 = clamp((level - height) / deepwater_fadedepth, 0.0, 1.0);\n    float intensity = col.r * 0.2126 + col.g * 0.7152 + col.b * 0.0722;\n    watercolor = mix(watercolor * intensity, watercolor2, smoothstep(0.0, 1.0, coastfade2));\n\n    vec3 r0 = vec3(uv, WATER_LEVEL);\n    vec3 rd = normalize(light - r0); // ray-direction to the light from water-position\n    float grad = dot(normwater, rd); // dot-product of norm-vector and light-direction\n    float specular = pow(grad, water_softlight_fact); // used for soft highlights\n    float specular2 = pow(grad, water_glossylight_fact); // used for glossy highlights\n    float gradpos = dot(vec3(0.0, 0.0, 1.0), rd);\n    float specular1 = smoothstep(0.0, 1.0, pow(gradpos, 5.0)); // used for diffusity (some darker corona around light's specular reflections...)\n    float watershade = test_shadow(uv, level);\n    watercolor *= 2.2 + watershade;\n    watercolor += (0.2 + 0.8 * watershade) * ((grad - 1.0) * 0.5 + specular) * 0.25;\n    watercolor /= 1.0 + specular1 * 1.25;\n    watercolor += watershade * specular2 * water_specularcolor;\n    watercolor +=\n      watershade *\n      coastfade *\n      (1.0 - coastfade2) *\n      (vec3(0.5, 0.6, 0.7) * nautic(uv) + vec3(1.0, 1.0, 1.0) * particles(uv));\n\n    col = mix(col, watercolor, coastfade);\n  }\n\n  outputColor = vec4(col, v_opacity);\n}\n";
+/* babel-plugin-inline-import '../shaders/ocean/ocean_vert.glsl' */
+const ocean_vert = "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_watercolor;\n  vec4 u_watercolor2;\n  float u_time;\n};\n\nout vec2 v_uv;\nout float v_opacity;\n\n#pragma include \"projection\"\n\nvoid main() {\n  v_uv = a_uv;\n  v_opacity = opacity;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n}\n\n";
+class OceanModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "texture1", void 0);
+    (0, _defineProperty2.default)(this, "texture2", void 0);
+    (0, _defineProperty2.default)(this, "texture3", 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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      watercolor = '#6D99A8',
+      watercolor2 = '#0F121C'
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_watercolor: (0, _l7Utils.rgb2arr)(watercolor),
+      u_watercolor2: (0, _l7Utils.rgb2arr)(watercolor2),
+      u_time: this.layer.getLayerAnimateTime(),
+      u_texture1: this.texture1,
+      u_texture2: this.texture2,
+      u_texture3: this.texture3
+    };
+
+    // u_opacity: isNumber(opacity) ? opacity : 1.0,
+    this.textures = [this.texture1, this.texture2, this.texture3];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  getAnimateUniforms() {
+    return {
+      u_time: this.layer.getLayerAnimateTime()
+    };
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this.loadTexture();
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'polygonOcean',
+        vertexShader: ocean_vert,
+        fragmentShader: ocean_frag,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        triangulation: _triangulation.polygonTriangulation,
+        primitive: _l7Core.gl.TRIANGLES,
+        depth: {
+          enable: false
+        }
+      });
+      return [model];
+    })();
+  }
+  clearModels() {
+    var _this$texture, _this$texture2, _this$texture3;
+    (_this$texture = this.texture1) === null || _this$texture === void 0 || _this$texture.destroy();
+    (_this$texture2 = this.texture2) === null || _this$texture2 === void 0 || _this$texture2.destroy();
+    (_this$texture3 = this.texture3) === null || _this$texture3 === void 0 || _this$texture3.destroy();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'oceanUv',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          // 当启用 enableRelativeCoordinates 时：需要将相对坐标转换回绝对坐标
+          const originalExtent = this.layer.getOriginalExtent();
+          const relativeOrigin = this.layer.getRelativeOrigin();
+          const isRelativeCoordinates = originalExtent[0] !== 0 || originalExtent[2] !== 0;
+          let lng, lat;
+          let minLng, minLat, maxLng, maxLat;
+          if (isRelativeCoordinates && relativeOrigin) {
+            lng = vertex[0] + relativeOrigin[0];
+            lat = vertex[1] + relativeOrigin[1];
+            [minLng, minLat, maxLng, maxLat] = originalExtent;
+          } else {
+            lng = vertex[0];
+            lat = vertex[1];
+            [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+          }
+          const lngLen = maxLng - minLng;
+          const latLen = maxLat - minLat;
+          return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
+        }
+      }
+    });
+  }
+  loadTexture() {
+    const {
+      createTexture2D
+    } = this.rendererService;
+    const defaultTextureOptions = {
+      height: 0,
+      width: 0
+    };
+    // 默认索引为 undefined，所以单独赋值
+    this.texture1 = createTexture2D(defaultTextureOptions);
+    this.texture2 = createTexture2D(defaultTextureOptions);
+    this.texture3 = createTexture2D(defaultTextureOptions);
+
+    // 加载完 image 后单独给 texture f赋值
+    initImage(images => {
+      this.texture1 = initTex(images[0]);
+      this.texture2 = initTex(images[1]);
+      this.texture3 = initTex(images[2]);
+      this.layerService.reRender();
+    });
+    function initImage(callback) {
+      let loadedCount = 0;
+      const loadedImages = [];
+      const images = ['https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*MJ22QbpuCzIAAAAAAAAAAAAAARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*-z2HSIVDsHIAAAAAAAAAAAAAARQnAQ'];
+      images.map(imgSrc => {
+        const image = new Image();
+        image.crossOrigin = '';
+        image.src = imgSrc;
+        loadedImages.push(image);
+        image.onload = () => {
+          loadedCount++;
+          if (loadedCount === 3) {
+            callback(loadedImages);
+          }
+        };
+      });
+    }
+    function initTex(image) {
+      return createTexture2D({
+        data: image,
+        width: image.width,
+        height: image.height,
+        wrapS: _l7Core.gl.MIRRORED_REPEAT,
+        wrapT: _l7Core.gl.MIRRORED_REPEAT,
+        min: _l7Core.gl.LINEAR,
+        mag: _l7Core.gl.LINEAR
+      });
+    }
+  }
+}
+exports.default = OceanModel;

package/lib/polygon/models/water.d.ts

@@ -0,0 +1,35 @@
+import type { IModel, IModelUniform } from '@antv/l7-core';
+import BaseModel from '../../core/BaseModel';
+export default class WaterModel 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;
+    };
+    private texture;
+    getUninforms(): {
+        [x: string]: any;
+    };
+    protected getCommonUniformsInfo(): {
+        uniformsArray: number[];
+        uniformsLength: number;
+        uniformsOption: {
+            [key: string]: any;
+        };
+    };
+    getAnimateUniforms(): IModelUniform;
+    initModels(): Promise<IModel[]>;
+    buildModels(): Promise<IModel[]>;
+    clearModels(): void;
+    protected registerBuiltinAttributes(): void;
+    private loadTexture;
+}

package/lib/polygon/models/water.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _BaseModel = _interopRequireDefault(require("../../core/BaseModel"));
+var _triangulation = require("../../core/triangulation");
+/* babel-plugin-inline-import '../shaders/water/polygon_water_frag.glsl' */
+const water_frag = "uniform sampler2D u_texture;\nlayout(std140) uniform commonUniforms {\n  float u_speed;\n  float u_time;\n};\n\nout vec4 outputColor;\n\nin vec4 v_Color;\nin vec2 v_uv;\n\nfloat rand(vec2 n) {\n  return 0.5 + 0.5 * fract(sin(dot(n.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nfloat water(vec3 p) {\n  float t = u_time * u_speed;\n  p.z += t * 2.0;\n  p.x += t * 2.0;\n  vec3 c1 = texture(SAMPLER_2D(u_texture), p.xz / 30.0).xyz;\n  p.z += t * 3.0;\n  p.x += t * 0.52;\n  vec3 c2 = texture(SAMPLER_2D(u_texture), p.xz / 30.0).xyz;\n  p.z += t * 4.0;\n  p.x += t * 0.8;\n  vec3 c3 = texture(SAMPLER_2D(u_texture), p.xz / 30.0).xyz;\n  c1 += c2 - c3;\n  float z = (c1.x + c1.y + c1.z) / 3.0;\n  return p.y + z / 4.0;\n}\n\nfloat map(vec3 p) {\n  float d = 100.0;\n  d = water(p);\n  return d;\n}\n\nfloat intersect(vec3 ro, vec3 rd) {\n  float d = 0.0;\n  for (int i = 0; i <= 100; i++) {\n    float h = map(ro + rd * d);\n    if (h < 0.1) return d;\n    d += h;\n  }\n  return 0.0;\n}\n\nvec3 norm(vec3 p) {\n  float eps = 0.1;\n  return normalize(\n    vec3(\n      map(p + vec3(eps, 0, 0)) - map(p + vec3(-eps, 0, 0)),\n      map(p + vec3(0, eps, 0)) - map(p + vec3(0, -eps, 0)),\n      map(p + vec3(0, 0, eps)) - map(p + vec3(0, 0, -eps))\n    )\n  );\n}\n\nfloat calSpc() {\n  vec3 l1 = normalize(vec3(1, 1, 1));\n  vec3 ro = vec3(-3, 20, -8);\n  vec3 rc = vec3(0, 0, 0);\n  vec3 ww = normalize(rc - ro);\n  vec3 uu = normalize(cross(vec3(0, 1, 0), ww));\n  vec3 vv = normalize(cross(rc - ro, uu));\n  vec3 rd = normalize(uu * v_uv.x + vv * v_uv.y + ww);\n  float d = intersect(ro, rd);\n  vec3 p = ro + rd * d;\n  vec3 n = norm(p);\n  float spc = pow(max(0.0, dot(reflect(l1, n), rd)), 30.0);\n  return spc;\n}\n\nvoid main() {\n  outputColor = v_Color;\n  float spc = calSpc();\n  outputColor += spc * 0.4;\n}\n";
+/* babel-plugin-inline-import '../shaders/water/polygon_water_vert.glsl' */
+const water_vert = "layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;\nlayout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;\nlayout(location = ATTRIBUTE_LOCATION_UV) in vec2 a_uv;\n\nlayout(std140) uniform commonUniforms {\n  float u_speed;\n  float u_time;\n};\nout vec4 v_Color;\nout vec2 v_uv;\n\n#pragma include \"projection\"\n\nvoid main() {\n  v_uv = a_uv;\n  v_Color = a_Color;\n  v_Color.a *= opacity;\n  vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));\n}\n\n";
+class WaterModel extends _BaseModel.default {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "texture", 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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commoninfo.uniformsOption), attributeInfo.uniformsOption);
+  }
+  getCommonUniformsInfo() {
+    const {
+      speed = 0.5
+    } = this.layer.getLayerConfig();
+    const commonOptions = {
+      u_speed: speed,
+      u_time: this.layer.getLayerAnimateTime(),
+      u_texture: this.texture
+    };
+
+    // u_opacity: isNumber(opacity) ? opacity : 1.0,
+    this.textures = [this.texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
+  }
+  getAnimateUniforms() {
+    return {
+      u_time: this.layer.getLayerAnimateTime()
+    };
+  }
+  initModels() {
+    var _this = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this.loadTexture();
+      return _this.buildModels();
+    })();
+  }
+  buildModels() {
+    var _this2 = this;
+    return (0, _asyncToGenerator2.default)(function* () {
+      _this2.initUniformsBuffer();
+      const model = yield _this2.layer.buildLayerModel({
+        moduleName: 'polygonWater',
+        vertexShader: water_vert,
+        fragmentShader: water_frag,
+        triangulation: _triangulation.polygonTriangulation,
+        defines: _this2.getDefines(),
+        inject: _this2.getInject(),
+        primitive: _l7Core.gl.TRIANGLES,
+        depth: {
+          enable: false
+        },
+        pickingEnabled: false,
+        diagnosticDerivativeUniformityEnabled: false
+      });
+      return [model];
+    })();
+  }
+  clearModels() {
+    var _this$texture;
+    (_this$texture = this.texture) === null || _this$texture === void 0 || _this$texture.destroy();
+  }
+  registerBuiltinAttributes() {
+    this.styleAttributeService.registerStyleAttribute({
+      name: 'waterUv',
+      type: _l7Core.AttributeType.Attribute,
+      descriptor: {
+        name: 'a_uv',
+        shaderLocation: this.attributeLocation.UV,
+        buffer: {
+          usage: _l7Core.gl.STATIC_DRAW,
+          data: [],
+          type: _l7Core.gl.FLOAT
+        },
+        size: 2,
+        update: (feature, featureIdx, vertex) => {
+          // 当启用 enableRelativeCoordinates 时：需要将相对坐标转换回绝对坐标
+          const originalExtent = this.layer.getOriginalExtent();
+          const relativeOrigin = this.layer.getRelativeOrigin();
+          const isRelativeCoordinates = originalExtent[0] !== 0 || originalExtent[2] !== 0;
+          let lng, lat;
+          let minLng, minLat, maxLng, maxLat;
+          if (isRelativeCoordinates && relativeOrigin) {
+            lng = vertex[0] + relativeOrigin[0];
+            lat = vertex[1] + relativeOrigin[1];
+            [minLng, minLat, maxLng, maxLat] = originalExtent;
+          } else {
+            lng = vertex[0];
+            lat = vertex[1];
+            [minLng, minLat, maxLng, maxLat] = this.layer.getSource().extent;
+          }
+          const lngLen = maxLng - minLng;
+          const latLen = maxLat - minLat;
+          return [(lng - minLng) / lngLen, (lat - minLat) / latLen];
+        }
+      }
+    });
+  }
+  loadTexture() {
+    const {
+      waterTexture
+    } = this.layer.getLayerConfig();
+    const {
+      createTexture2D
+    } = this.rendererService;
+    this.texture = createTexture2D({
+      height: 1,
+      width: 1
+    });
+    const image = new Image();
+    image.crossOrigin = '';
+    if (waterTexture) {
+      // custom texture
+      console.warn('L7 recommend：https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ');
+      image.src = waterTexture;
+    } else {
+      // default texture
+      image.src = 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*EojwT4VzSiYAAAAAAAAAAAAAARQnAQ';
+    }
+    image.onload = () => {
+      this.texture = createTexture2D({
+        data: image,
+        width: image.width,
+        height: image.height,
+        wrapS: _l7Core.gl.MIRRORED_REPEAT,
+        wrapT: _l7Core.gl.MIRRORED_REPEAT,
+        min: _l7Core.gl.LINEAR,
+        mag: _l7Core.gl.LINEAR
+      });
+      this.layerService.reRender();
+    };
+  }
+}
+exports.default = WaterModel;

package/lib/polygon/shaders/extrude/polygon_extrude_frag.glsl

@@ -0,0 +1,24 @@
+layout(std140) uniform commonUniforms {
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  float u_linearColor;
+  float u_topsurface;
+  float u_sidesurface;
+  float u_heightfixed; // 默认不固定
+  float u_raisingHeight;
+};
+
+in vec4 v_Color;
+#pragma include "scene_uniforms"
+#pragma include "picking"
+out vec4 outputColor;
+void main() {
+  // top face
+  if (u_topsurface < 1.0) {
+    discard;
+  }
+
+  outputColor = v_Color;
+
+  outputColor = filterColor(outputColor);
+}

package/lib/polygon/shaders/extrude/polygon_extrude_picklight_frag.glsl

@@ -0,0 +1,49 @@
+layout(std140) uniform commonUniforms {
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  float u_linearColor;
+  float u_topsurface;
+  float u_sidesurface;
+  float u_heightfixed; // 默认不固定
+  float u_raisingHeight;
+};
+
+in vec4 v_Color;
+in vec3 v_uvs;
+in vec2 v_texture_data;
+out vec4 outputColor;
+
+#pragma include "scene_uniforms"
+#pragma include "picking"
+
+void main() {
+  float isSide = v_texture_data.x;
+  float sidey = v_uvs[2];
+  float lightWeight = v_texture_data.y;
+
+  // Tip: 部分机型 GPU 计算精度兼容
+  if (isSide < 0.999) {
+    // side face
+    if (u_sidesurface < 1.0) {
+      discard;
+    }
+
+    if (u_linearColor == 1.0) {
+      // side use linear
+      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+      linearColor.rgb *= lightWeight;
+      outputColor = linearColor;
+    } else {
+      // side notuse linear
+      outputColor = v_Color;
+    }
+  } else {
+    // top face
+    if (u_topsurface < 1.0) {
+      discard;
+    }
+    outputColor = v_Color;
+  }
+
+  outputColor = filterColorAlpha(outputColor, lightWeight);
+}

package/lib/polygon/shaders/extrude/polygon_extrude_picklight_vert.glsl

@@ -0,0 +1,53 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;
+layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
+layout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;
+layout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;
+layout(location = ATTRIBUTE_LOCATION_UV) in vec3 a_uvs;
+
+layout(std140) uniform commonUniforms {
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  float u_linearColor;
+  float u_topsurface;
+  float u_sidesurface;
+  float u_heightfixed; // 默认不固定
+  float u_raisingHeight;
+};
+
+out vec4 v_Color;
+out vec3 v_uvs;
+out vec2 v_texture_data;
+
+#pragma include "projection"
+#pragma include "light"
+#pragma include "picking"
+
+void main() {
+  v_uvs = a_uvs;
+  // cal style mapping - 数据纹理映射部分的计算
+  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
+  vec4 project_pos = project_position(pos, a_Position64Low);
+
+  if (u_heightfixed > 0.0) {
+    // 判断几何体是否固定高度
+    project_pos.z = a_Position.z * a_Size;
+    project_pos.z += u_raisingHeight;
+    if (
+      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||
+      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET
+    ) {
+      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);
+      project_pos.z *= mapboxZoomScale;
+      project_pos.z += u_raisingHeight * mapboxZoomScale;
+    }
+  }
+
+  gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+  float lightWeight = calc_lighting(project_pos);
+  v_texture_data = vec2(a_Position.z, lightWeight);
+
+  v_Color = vec4(a_Color.rgb * lightWeight, a_Color.w * opacity);
+
+  setPickingColor(a_PickingColor);
+}

package/lib/polygon/shaders/extrude/polygon_extrude_vert.glsl

@@ -0,0 +1,74 @@
+layout(location = ATTRIBUTE_LOCATION_POSITION) in vec3 a_Position;
+layout(location = ATTRIBUTE_LOCATION_POSITION_64LOW) in vec2 a_Position64Low;
+layout(location = ATTRIBUTE_LOCATION_COLOR) in vec4 a_Color;
+layout(location = ATTRIBUTE_LOCATION_SIZE) in float a_Size;
+layout(location = ATTRIBUTE_LOCATION_NORMAL) in vec3 a_Normal;
+layout(location = ATTRIBUTE_LOCATION_UV) in vec3 a_uvs;
+
+layout(std140) uniform commonUniforms {
+  vec4 u_sourceColor;
+  vec4 u_targetColor;
+  float u_linearColor;
+  float u_topsurface;
+  float u_sidesurface;
+  float u_heightfixed; // 默认不固定
+  float u_raisingHeight;
+};
+
+out vec4 v_Color;
+
+#pragma include "projection"
+#pragma include "light"
+#pragma include "picking"
+
+void main() {
+  float isSide = a_Position.z;
+  float topU = a_uvs[0];
+  float topV = 1.0 - a_uvs[1];
+  float sidey = a_uvs[2];
+
+  vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size, 1.0);
+
+  vec4 project_pos = project_position(pos, a_Position64Low);
+  float lightWeight = calc_lighting(project_pos);
+
+  if (u_heightfixed > 0.0) {
+    // 判断几何体是否固定高度
+    project_pos.z = a_Position.z * a_Size;
+    project_pos.z += u_raisingHeight;
+
+    if (
+      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT ||
+      u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET
+    ) {
+      float mapboxZoomScale = 4.0 / pow(2.0, 21.0 - u_Zoom);
+      project_pos.z *= mapboxZoomScale;
+      project_pos.z += u_raisingHeight * mapboxZoomScale;
+    }
+  }
+
+ gl_Position = project_common_position_to_clipspace(vec4(project_pos.xyz, 1.0));
+
+  // Tip: 部分机型 GPU 计算精度兼容
+  if (isSide < 0.999) {
+    // side face
+    // if(u_sidesurface < 1.0) {
+    //   discard;
+    // }
+
+    if (u_linearColor == 1.0) {
+      vec4 linearColor = mix(u_targetColor, u_sourceColor, sidey);
+      linearColor.rgb *= lightWeight;
+      v_Color = linearColor;
+    } else {
+      v_Color = a_Color;
+    }
+
+  } else {
+    v_Color = a_Color;
+  }
+
+  v_Color = vec4(v_Color.rgb * lightWeight, v_Color.w * opacity);
+
+  setPickingColor(a_PickingColor);
+}