[wip]chore: update pointLayer billboard draw engine

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

@@ -0,0 +1,97 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+    useEffect( () => {
+      const scene = new Scene({
+        id: 'map',
+        renderer: 'device',
+        map: new GaodeMap({
+          center: [120.188193, 30.292542],
+          pitch: 0,
+          zoom: 16,
+        }),
+      });
+
+      const layer = new PointLayer()
+        .source(
+          {
+            "type": "FeatureCollection",
+            "features": [
+              {
+                "type": "Feature",
+                "properties": {},
+                "geometry": {
+                  "type": "Point",
+                  "coordinates": [120.188193, 30.292542]
+                }
+              },
+              {
+                "type": "Feature",
+                "properties": {},
+                "geometry": {
+                  "type": "Point",
+                  "coordinates": [120.201665, 30.26873]
+                }
+              },
+              {
+                "type": "Feature",
+                "properties": {},
+                "geometry": {
+                  "type": "Point",
+                  "coordinates": [120.225209, 30.290802]
+                }
+              },
+              {
+                "type": "Feature",
+                "properties": {},
+                "geometry": {
+                  "type": "Point",
+                  "coordinates": [120.189641, 30.293248]
+                }
+              },
+              {
+                "type": "Feature",
+                "properties": {},
+                "geometry": {
+                  "type": "Point",
+                  "coordinates": [120.189389, 30.292542]
+                }
+              },
+              {
+                "type": "Feature",
+                "properties": {},
+                "geometry": {
+                  "type": "Point",
+                  "coordinates": [120.190837, 30.293303]
+                }
+              }
+            ]
+          }
+
+        )
+        .size(10)
+        .color('#f00')
+        .shape('simple')
+
+      scene.on('loaded', () => {
+        scene.addLayer(layer);
+        scene.startAnimate();
+      });
+
+
+    }, []);
+    return (
+      <div
+        id="map"
+        style={{
+          height: '500px',
+          position: 'relative',
+        }}
+      />
+    );
+  };
+

dev-demos/features/point/pointBillboard.md

@@ -0,0 +1,7 @@
+---
+group:
+  title: 点
+  order: 1
+---
+### point - billboard(simple)
+<code src="./demos/billboard.tsx"></code>

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

@@ -9,6 +9,7 @@ import BaseModel from '../../core/BaseModel';
 import { IPointLayerStyleOptions } from '../../core/interface';
 
 import { rgb2arr } from '@antv/l7-utils';
+import { ShaderLocation } from '../../core/CommonStyleAttribute';
 import simplePointFrag from '../shaders/billboard_point_frag.glsl';
 import simplePointVert from '../shaders/billboard_point_vert.glsl';
 
@@ -28,23 +29,33 @@ export default class SimplePointModel extends BaseModel {
     };
   }
   public getUninforms(): IModelUniform {
+    const commonInfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
+
+    return {
+      ...commonInfo.uniformsOption,
+      ...attributeInfo.uniformsOption,
+    };
+  }
+
+  protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } {
     const {
-      opacity = 1,
-      offsets = [0, 0],
       blend,
       strokeOpacity = 1,
       strokeWidth = 0,
       stroke = '#fff',
     } = this.layer.getLayerConfig() as IPointLayerStyleOptions;
 
-    return {
+    const commonOptions = {
+      u_stroke_color: rgb2arr(stroke),
       u_additive: blend === 'additive' ? 1.0 : 0.0,
-      u_opacity: opacity,
-      u_offsets: offsets,
       u_stroke_opacity: strokeOpacity,
       u_stroke_width: strokeWidth,
-      u_stroke_color: rgb2arr(stroke),
-    };
+    }
+
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
   }
 
   public async initModels(): Promise<IModel[]> {
@@ -54,10 +65,12 @@ export default class SimplePointModel extends BaseModel {
   public async buildModels(): Promise<IModel[]> {
     this.layer.triangulation = PointTriangulation;
 
+    this.initUniformsBuffer();
     const model = await this.layer.buildLayerModel({
       moduleName: 'pointSimple',
       vertexShader: simplePointVert,
       fragmentShader: simplePointFrag,
+      inject: this.getInject(),
       triangulation: PointTriangulation,
       depth: { enable: false },
       primitive: gl.POINTS,
@@ -71,6 +84,7 @@ export default class SimplePointModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Size',
+        shaderLocation: ShaderLocation.SIZE,
         buffer: {
           usage: gl.DYNAMIC_DRAW,
           data: [],

packages/layers/src/point/shaders/billboard_point_frag.glsl

@@ -1,12 +1,16 @@
 
-uniform float u_additive;
-uniform float u_stroke_opacity : 1;
+layout(std140) uniform commonUniorm {
+  vec4 u_stroke_color;
+  float u_additive;
+  float u_stroke_opacity;
+  float u_stroke_width;
+};
 
-uniform vec4 u_stroke_color : [0.0, 0.0, 0.0, 0.0];
+in vec4 v_color;
+in float v_blur;
+in float v_innerRadius;
 
-varying vec4 v_color;
-varying float v_blur;
-varying float v_innerRadius;
+out vec4 outputColor;
 
 #pragma include "picking"
 void main() {
@@ -23,24 +27,24 @@ void main() {
     float blurWidth = (1.0 - v_blur)/2.0;
     vec4 stroke = vec4(u_stroke_color.rgb, u_stroke_opacity);
     if(fragmengTocenter > v_innerRadius + blurWidth) {
-      gl_FragColor = stroke;
+      outputColor = stroke;
     } else if(fragmengTocenter > v_innerRadius - blurWidth){
       float mixR = (fragmengTocenter - (v_innerRadius - blurWidth)) / (blurWidth * 2.0);
-      gl_FragColor = mix(v_color, stroke, mixR);
+      outputColor = mix(v_color, stroke, mixR);
     } else {
-      gl_FragColor = v_color;
+      outputColor = v_color;
     }
   } else {
     // 当不存在 stroke 或 stroke <= 0.01
-    gl_FragColor = v_color;
+    outputColor = v_color;
   }
 
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor = filterColor(outputColor);
 
   if(u_additive > 0.0) {
-    gl_FragColor *= circleClipOpacity;
+    outputColor *= circleClipOpacity;
   } else {
-    gl_FragColor.a *= circleClipOpacity;
+    outputColor.a *= circleClipOpacity;
   }
 
 }

packages/layers/src/point/shaders/billboard_point_vert.glsl

@@ -1,25 +1,24 @@
 
-attribute vec3 a_Position;
-uniform mat4 u_ModelMatrix;
-
-attribute float a_Size;
-attribute vec4 a_Color;
-varying vec4 v_color;
-
-uniform float u_opacity : 1;
-uniform vec2 u_offsets;
-uniform float u_stroke_width;
-
-varying float v_blur;
-varying float v_innerRadius;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
 
+layout(std140) uniform commonUniorm {
+  vec4 u_stroke_color;
+  float u_additive;
+  float u_stroke_opacity;
+  float u_stroke_width;
+};
 
+out vec4 v_color;
+out float v_blur;
+out float v_innerRadius;
 
 #pragma include "projection"
 #pragma include "picking"
 #pragma include "project"
 void main() {
-  v_color = vec4(a_Color.xyz, a_Color.w * u_opacity);
+  v_color = vec4(a_Color.xyz, a_Color.w * opacity);
   v_blur = 1.0 - max(2.0/a_Size, 0.05);
   v_innerRadius = max((a_Size - u_stroke_width) / a_Size, 0.0);