chore: 升级geometry的billboard支持G引擎 (#2138) (#2141)

* chore: 升级geometry的billboard支持G引擎 (#2138) Co-authored-by: Mark <[email protected]> * fix: billboard rotation (#2142) --------- Co-authored-by: MarkLei7 <[email protected]> Co-authored-by: Mark <[email protected]>
antvis · Dec 8, 2023 · 865c4e0 · 865c4e0
1 parent 8da5883
commit 865c4e0
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 35 deletions.
diff --git a/dev-demos/features/geometry/demos/billboard.tsx b/dev-demos/features/geometry/demos/billboard.tsx
@@ -8,10 +8,11 @@ export default () => {
   useEffect(() => {
     const scene = new Scene({
       id: 'map',
+      renderer: 'device',
       map: new GaodeMap({
         pitch: 80,
         style: 'dark',
-        center: [120, 30],
+        center: [0, 0],
         zoom: 5,
       }),
     });
@@ -54,8 +55,9 @@ export default () => {
           color: '#0ff',
           mix: 0.5,
         });
+        scene.startAnimate();
         scene.addLayer(billboard);
-      };
+               };
       img.src =
         'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*zMw0T6gEIZYAAAAAAAAAAAAAARQnAQ';
     });

diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts
@@ -348,6 +348,7 @@ ${uniforms.join('\n')}
         data: new Float32Array(MultipleOfFourNumber(commonUniforms.uniformsLength)).fill(0),
         isUBO: true,
       });
+      console.log(commonUniforms.uniformsLength)
       this.uniformBuffers.push(this.commonUnifoms);
     }
 

diff --git a/packages/layers/src/geometry/models/billboard.ts b/packages/layers/src/geometry/models/billboard.ts
@@ -10,6 +10,7 @@ import BaseModel from '../../core/BaseModel';
 import { IGeometryLayerStyleOptions } from '../../core/interface';
 import planeFrag from '../shaders/billboard_frag.glsl';
 import planeVert from '../shaders/billboard_vert.glsl';
+import { ShaderLocation } from '../../core/CommonStyleAttribute';
 
 export default class BillBoardModel extends BaseModel {
   protected texture: ITexture2D;
@@ -35,6 +36,17 @@ export default class BillBoardModel 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,
       width = 1,
@@ -60,19 +72,16 @@ export default class BillBoardModel extends BaseModel {
     this.radian =
       (rotateFlag * Math.PI * (this.mapService.getRotation() % 360)) / 180;
 
-    return {
+    const commonOptions = {
+      u_size: [width, height],
       u_raisingHeight: Number(raisingHeight),
-      u_RotateMatrix: new Float32Array([
-        // z
-        Math.cos(this.radian),
-        Math.sin(this.radian),
-        -Math.sin(this.radian),
-        Math.cos(this.radian),
-      ]),
+      u_rotation: this.radian,
       u_opacity: opacity || 1,
       u_texture: this.texture,
-      u_size: [width, height],
     };
+    this.textures = [this.texture];
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
   }
 
   public clearModels(): void {
@@ -91,13 +100,14 @@ export default class BillBoardModel extends BaseModel {
 
     if (drawCanvas) {
       this.updateTexture(drawCanvas);
-    }
-
-    const model = await this.layer.buildLayerModel({
+      }
+      this.initUniformsBuffer();
+      const model = await this.layer.buildLayerModel({
       moduleName: 'geometryBillboard',
       vertexShader: planeVert,
       fragmentShader: planeFrag,
       triangulation: this.planeGeometryTriangulation,
+      inject: this.getInject(),
       primitive: gl.TRIANGLES,
       depth: { enable: true },
     });
@@ -136,6 +146,7 @@ export default class BillBoardModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Extrude',
+        shaderLocation: ShaderLocation.EXTRUDE,
         buffer: {
           usage: gl.DYNAMIC_DRAW,
           data: [],
@@ -163,6 +174,7 @@ export default class BillBoardModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Uv',
+        shaderLocation: ShaderLocation.UV,
         buffer: {
           usage: gl.DYNAMIC_DRAW,
           data: [],

diff --git a/packages/layers/src/geometry/shaders/billboard_frag.glsl b/packages/layers/src/geometry/shaders/billboard_frag.glsl
@@ -1,13 +1,18 @@
+layout(std140) uniform commonUniforms {
+ vec2 u_size;
+ float u_raisingHeight;
+ float u_rotation;
+ float u_opacity;
+};
 
 uniform sampler2D u_texture;
-uniform float u_opacity;
 
-varying vec3 v_Color;
-varying vec2 v_uv;
+in vec2 v_uv;
+out vec4 outputColor;
 
 #pragma include "picking"
 void main() {
-  gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));
-  gl_FragColor.a *= u_opacity;
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor = texture(SAMPLER_2D(u_texture), vec2(v_uv.x, 1.0 - v_uv.y));
+  outputColor.a *= u_opacity;
+  outputColor = filterColor(outputColor);
 }
diff --git a/packages/layers/src/geometry/shaders/billboard_vert.glsl b/packages/layers/src/geometry/shaders/billboard_vert.glsl
@@ -1,25 +1,22 @@
-precision highp float;
-uniform mat4 u_ModelMatrix;
-uniform float u_raisingHeight: 0.0;
-uniform float u_opacity;
-uniform vec2 u_size: [1.0, 1.0];
-uniform mat2 u_RotateMatrix;
+layout(location = 0) in vec3 a_Position;
+layout(location = 11) in vec3 a_Extrude;
+layout(location = 14) in vec2 a_Uv;
 
-attribute vec3 a_Extrude;
-attribute vec3 a_Position;
-attribute vec2 a_Uv;
-attribute vec3 a_Color;
+layout(std140) uniform commonUniforms {
+ vec2 u_size;
+ float u_raisingHeight;
+ float u_rotation;
+ float u_opacity;
+};
 
-varying vec3 v_Color;
-varying vec2 v_uv;
+out vec2 v_uv;
 
 #pragma include "projection"
 #pragma include "picking"
+#pragma include "rotation_2d"
 void main() {
    vec3 extrude = a_Extrude;
-   v_Color = a_Color;
    v_uv = a_Uv;
-
    float raiseHeight = 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);
@@ -30,7 +27,7 @@ void main() {
    vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
 
    // 计算绕 z 轴旋转后的偏移
-   vec2 offsetXY = project_pixel(u_RotateMatrix * vec2(extrude.x * u_size.x, 0.0));
+   vec2 offsetXY = project_pixel(rotate_matrix(vec2(extrude.x * u_size.x, 0.0),u_rotation));
    // 绕 z 轴旋转
    float x = project_pos.x + offsetXY.x;
    float y = project_pos.y + offsetXY.y;