chore: 更新 point fill layer

dev-demos/features/point/demos/circlemeter.tsx

@@ -7,6 +7,7 @@ export default () => {
     useEffect( () => {
 const scene = new Scene({
   id: "map",
+  renderer: 'device',
   map: new GaodeMap({
     style: "light",
     center: [120.099658370018, 30.263445807542666],
@@ -18,12 +19,12 @@ scene.on("loaded", () => {
   const circle = turf.circle([120.099658370018, 30.263445807542666],size/1000,{
      steps: 60, units: 'kilometers'
   });
-const player = new PolygonLayer().source(turf.featureCollection([circle]))
-.shape('fill')
-.color('blue')
-.style({
-  opacity:0.5
-})
+// const player = new PolygonLayer().source(turf.featureCollection([circle]))
+// .shape('fill')
+// .color('blue')
+// .style({
+//   opacity:0.5
+// })
   const pointLayer = new PointLayer({
     autoFit: false
   })
@@ -39,18 +40,19 @@ const player = new PolygonLayer().source(turf.featureCollection([circle]))
           }
         }
       ]
-    })
-    .shape("triangle")
-    .size(size)
+    })  
+    .shape("circle")
+    .size(100)
     .color("#ff0000")
-    .active(true)
+    // .animate(true)
+    // .active(true)
     .style({
       opacity: 1,
       strokeWidth: 1,
-      rotation: 30,
-      unit:'meter'
+      // rotation: 30,
+      // unit:'meter'
     });
-  scene.addLayer(player);
+  // scene.addLayer(player);
   scene.addLayer(pointLayer);
 });
 }, []);

dev-demos/features/point/demos/normal-device.tsx

@@ -10,34 +10,41 @@ export default () => {
       id: 'map',
       renderer: 'device',
       map: new GaodeMap({
-        style: 'dark',
-        center: [121.417463, 31.215175],
+        style: 'blank',
+        center: [120.099658370018, 30.263445807542666],
         pitch: 0,
         zoom: 11,
       }),
     });
     scene.on('loaded', () => {
-      fetch(
-        'https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt',
-      )
-        .then((res) => res.text())
-        .then((data) => {
+      // fetch(
+      //   'https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt',
+      // )
+      //   .then((res) => res.text())
+      //   .then((data) => {
           const pointLayer = new PointLayer({ blend: 'additive' })
-            .source(data, {
-              parser: {
-                type: 'csv',
-                y: 'lat',
-                x: 'lng',
-              },
+            .source({
+              type: "FeatureCollection",
+              features: [
+                {
+                  type: "Feature",
+                  properties: {},
+                  geometry: {
+                    type: "Point",
+                    coordinates: [120.099658370018, 30.263445807542666]
+                  }
+                }
+              ]
             })
-            .size(0.5)
-            .color('#080298')
+            .size(40)
+            .shape('dot')
+            .color('#f00')
             .style({
               opacity: 1,
             });
 
           scene.addLayer(pointLayer);
-        });
+        // });
     });
   }, []);
   return (

packages/core/src/shaders/picking.frag.glsl

@@ -1,10 +1,18 @@
-varying vec4 v_PickingResult;
-uniform vec4 u_HighlightColor : [0, 0, 0, 0];
-uniform vec4 u_SelectColor : [0, 0, 0, 0];
-uniform float u_PickingStage : 0.0;
-uniform float u_shaderPick;
 
-uniform float u_activeMix: 0;
+in vec4 v_PickingResult;
+
+layout(std140) uniform PickingUniforms {
+  vec4 u_HighlightColor;
+  vec4 u_SelectColor;
+  vec3 u_PickingColor;
+  float u_PickingStage;
+  vec3 u_CurrentSelectedId;
+  float u_PickingThreshold;
+  float u_PickingBuffer;
+  float u_shaderPick;
+  float u_EnableSelect;
+  float u_activeMix;
+};
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0

packages/core/src/shaders/picking.vert.glsl

@@ -1,15 +1,19 @@
-attribute vec3 a_PickingColor;
-varying vec4 v_PickingResult;
+layout(location = 2) in vec3 a_PickingColor;
+out vec4 v_PickingResult;
 
-uniform vec3 u_PickingColor : [0, 0, 0];
-uniform vec3 u_CurrentSelectedId : [0, 0, 0];
-uniform vec4 u_HighlightColor : [0, 0, 0, 0];
-uniform vec4 u_SelectColor : [0, 0, 0, 0];
-uniform float u_PickingStage : 0.0;
-uniform float u_PickingThreshold : 1.0;
-uniform float u_PickingBuffer: 0.0;
-uniform float u_shaderPick;
-uniform float u_EnableSelect: 0.0;
+
+layout(std140) uniform PickingUniforms {
+  vec4 u_HighlightColor;
+  vec4 u_SelectColor;
+  vec3 u_PickingColor;
+  float u_PickingStage;
+  vec3 u_CurrentSelectedId;
+  float u_PickingThreshold;
+  float u_PickingBuffer;
+  float u_shaderPick;
+  float u_EnableSelect;
+  float u_activeMix;
+};
 
 #define PICKING_NONE 0.0
 #define PICKING_ENCODE 1.0

packages/layers/src/core/BaseModel.ts

@@ -250,14 +250,15 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
     // a_PickingColor = 2
 
     const uniforms: string[] = [];
+    // 支持数据映射的类型
     this.layer.enableShaderEncodeStyles.forEach((key: string) => {
-      if (encodeStyleAttribute[key]) {
+      if (encodeStyleAttribute[key]) { // 配置了数据映射的类型
         str += `#define USE_ATTRIBUTE_${key.toUpperCase()} 0.0; \n\n`;
       } else {
         uniforms.push(`  ${DefaultUniformStyleType[key]} u_${key};`);
       }
       str += `
-              #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
+          #ifdef USE_ATTRIBUTE_${key.toUpperCase()}
           layout(location = ${shaderLocationMap[key]}) in ${
         DefaultUniformStyleType[key]
       } a_${key.charAt(0).toUpperCase() + key.slice(1)};

packages/layers/src/core/CommonStyleAttribute.ts

@@ -15,6 +15,9 @@ export enum ShaderLocation {
   OFFSETS,
   ROTATION,
   EXTRUSION_BASE,
+  SIZE,
+  SHAPE,
+  EXTRUDE,
   MAX,
 }
 

packages/layers/src/plugins/PixelPickingPlugin.ts

@@ -60,7 +60,7 @@ export default class PixelPickingPlugin implements ILayerPlugin {
       ]),
       isUBO: true,
     });
-    rendererService.uniformBuffers[1] = uniformBuffer;
+    // rendererService.uniformBuffers[1] = uniformBuffer;
     // u_PickingBuffer: layer.getLayerConfig().pickingBuffer || 0,
     // // Tip: 当前地图是否在拖动
     // u_shaderPick: Number(layer.getShaderPickStat()),
@@ -92,6 +92,12 @@ export default class PixelPickingPlugin implements ILayerPlugin {
     layer.hooks.beforePickingEncode.tap('PixelPickingPlugin', () => {
       const { enablePicking } = layer.getLayerConfig();
       if (enablePicking && layer.isVisible()) {
+        // rendererService.uniformBuffers[1].subData({
+        //   offset: 11,
+        //   data: new Uint8Array(new Float32Array([
+        //     PickingStage.ENCODE
+        //   ])),
+        // })
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.ENCODE,
@@ -104,6 +110,12 @@ export default class PixelPickingPlugin implements ILayerPlugin {
       const { enablePicking } = layer.getLayerConfig();
       // 区分选中高亮 和滑过高亮
       if (enablePicking && layer.isVisible()) {
+        // rendererService.uniformBuffers[1].subData({
+        //   offset: 11,
+        //   data: new Uint8Array(new Float32Array([
+        //     PickingStage.HIGHLIGHT
+        //   ])),
+        // })
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,
@@ -125,6 +137,12 @@ export default class PixelPickingPlugin implements ILayerPlugin {
         layer.updateLayerConfig({
           pickedFeatureID: decodePickingColor(new Uint8Array(pickedColor)),
         });
+        // rendererService.uniformBuffers[1].subData({
+        //   offset: 11,
+        //   data: new Uint8Array(new Float32Array([
+        //     PickingStage.HIGHLIGHT
+        //   ])),
+        // })
         layer.models.forEach((model) =>
           model.addUniforms({
             u_PickingStage: PickingStage.HIGHLIGHT,

packages/layers/src/plugins/ShaderUniformPlugin.ts

@@ -85,7 +85,7 @@ export default class ShaderUniformPlugin implements ILayerPlugin {
           data,
         });
       }
-      // For WebGL1.
+      // For WebGL1. regl
       layer.models.forEach((model) => {
         model.addUniforms({
           ...uniforms,

packages/layers/src/point/models/fill.ts

@@ -11,6 +11,7 @@ import {
 } from '@antv/l7-core';
 import { PointFillTriangulation } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
+import { ShaderLocation } from '../../core/CommonStyleAttribute';
 import { IPointLayerStyleOptions, SizeUnitType } from '../../core/interface';
 // animate pointLayer shader - support animate
 import waveFillFrag from '../shaders/animate/wave_frag.glsl';
@@ -29,14 +30,44 @@ export default class FillModel extends BaseModel {
       heightfixed = false,
       unit = 'pixel',
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
-    return {
+
+   const commonIniform = {
       u_blur_height_fixed: [blur, Number(raisingHeight), Number(heightfixed)],
       u_additive: blend === 'additive' ? 1.0 : 0.0,
       u_stroke_opacity: strokeOpacity,
       u_stroke_width: strokeWidth,
       u_size_unit: SizeUnitType[unit] as SizeUnitType,
       ...this.getStyleAttribute(),
     };
+
+    const attributes = this.getStyleAttribute();
+    console.log('attributes',attributes,commonIniform)
+    this.uniformBuffers[0].subData({
+      offset:0,
+      data: new Uint8Array(
+        new Float32Array([
+          ...attributes.u_stroke,
+          ...attributes.u_offsets,
+          attributes.u_opacity,
+          attributes.u_rotation,
+        ]).buffer,
+      ),
+    });
+
+    this.uniformBuffers[1].subData({
+      offset:0,
+      data: new Uint8Array(
+        new Float32Array([
+          ...commonIniform.u_blur_height_fixed,
+          commonIniform.u_stroke_width,
+          commonIniform.u_stroke_opacity,
+          commonIniform.u_additive,
+          commonIniform.u_size_unit,
+        ]).buffer,
+      ),
+    })
+    return commonIniform;
+
   }
   public getAnimateUniforms(): IModelUniform {
     const { animateOption = { enable: false } } =
@@ -70,6 +101,18 @@ export default class FillModel extends BaseModel {
       >;
     const { frag, vert, type } = this.getShaders(animateOption);
     this.layer.triangulation = PointFillTriangulation;
+    const attributeUniformBuffer = this.rendererService.createBuffer({
+      data: new Float32Array(4 + 2 + 1 + 1),
+      isUBO: true,
+    });
+
+    const commonUniforms = this.rendererService.createBuffer({
+      data: new Float32Array(3 + 4),
+      isUBO: true,
+    });
+
+
+    this.uniformBuffers.push(attributeUniformBuffer,commonUniforms);
     const model = await this.layer.buildLayerModel({
       moduleName: type,
       vertexShader: vert,
@@ -127,6 +170,7 @@ export default class FillModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Extrude',
+        shaderLocation: ShaderLocation.EXTRUDE,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
@@ -157,6 +201,7 @@ export default class FillModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Size',
+        shaderLocation: ShaderLocation.MAX,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,
@@ -177,6 +222,7 @@ export default class FillModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Shape',
+        shaderLocation: ShaderLocation.SHAPE,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.DYNAMIC_DRAW,

packages/layers/src/point/models/normal.ts

@@ -27,9 +27,6 @@ export default class NormalModel extends BaseModel {
     };
   }
   public getUninforms(): IModelUniform {
-    const { opacity = 1 } =
-      this.layer.getLayerConfig() as IPointLayerStyleOptions;
-
     const attributes = this.getStyleAttribute();
 
     // FIXME: No need to update each frame
@@ -62,7 +59,6 @@ export default class NormalModel extends BaseModel {
       isUBO: true,
     });
     this.uniformBuffers.push(uniformBuffer);
-
     const model = await this.layer.buildLayerModel({
       moduleName: 'pointNormal',
       vertexShader: normalVert,