[g-webgl] 修复渲染排序问题 (#862)

* fix: control render order with renderInst's sortKey #859 * fix: end point in polygon & path #860 * fix: support webgl1 in hal #851 * feat: add targets config in g-webgl Co-authored-by: yuqi.pyq <[email protected]>
antvis · Jan 24, 2022 · 70aee44 · 70aee44
1 parent de413c3
commit 70aee44
Show file tree

Hide file tree

Showing 47 changed files with 889 additions and 994 deletions.
diff --git a/packages/g-plugin-3d/src/geometries/CubeGeometry.ts b/packages/g-plugin-3d/src/geometries/CubeGeometry.ts
@@ -150,7 +150,7 @@ export class CubeGeometry extends ProceduralGeometry<CubeGeometryProps> {
       return [
         {
           bufferIndex: ProceduralGeometryAttributeLocation.POSITION,
-          location: VertexAttributeLocation.POSITION,
+          location: VertexAttributeLocation.MAX,
           data: p,
         },
       ];

diff --git a/packages/g-plugin-3d/src/geometries/PlaneGeometry.ts b/packages/g-plugin-3d/src/geometries/PlaneGeometry.ts
@@ -86,7 +86,7 @@ export class PlaneGeometry extends ProceduralGeometry<PlaneGeometryProps> {
       return [
         {
           bufferIndex: ProceduralGeometryAttributeLocation.POSITION,
-          location: VertexAttributeLocation.POSITION,
+          location: VertexAttributeLocation.MAX,
           data: p,
         },
       ];

diff --git a/packages/g-plugin-3d/src/geometries/ProceduralGeometry.ts b/packages/g-plugin-3d/src/geometries/ProceduralGeometry.ts
@@ -100,7 +100,7 @@ export abstract class ProceduralGeometry<GeometryProps> extends BufferGeometry<G
         {
           format: Format.F32_RGB,
           bufferByteOffset: 4 * 0,
-          location: VertexAttributeLocation.POSITION,
+          location: VertexAttributeLocation.MAX,
         },
       ],
       data: Float32Array.from(positionsAll),
@@ -113,7 +113,7 @@ export abstract class ProceduralGeometry<GeometryProps> extends BufferGeometry<G
         {
           format: Format.F32_RGB,
           bufferByteOffset: 4 * 0,
-          location: VertexAttributeLocation.NORMAL,
+          location: VertexAttributeLocation.MAX + 1,
         },
       ],
       data: Float32Array.from(normalsAll),
@@ -126,7 +126,7 @@ export abstract class ProceduralGeometry<GeometryProps> extends BufferGeometry<G
         {
           format: Format.F32_RG,
           bufferByteOffset: 4 * 0,
-          location: VertexAttributeLocation.UV,
+          location: VertexAttributeLocation.MAX + 2,
         },
       ],
       data: Float32Array.from(uvsAll),

diff --git a/packages/g-plugin-3d/src/geometries/SphereGeometry.ts b/packages/g-plugin-3d/src/geometries/SphereGeometry.ts
@@ -89,7 +89,7 @@ export class SphereGeometry extends ProceduralGeometry<SphereGeometryProps> {
       return [
         {
           bufferIndex: ProceduralGeometryAttributeLocation.POSITION,
-          location: VertexAttributeLocation.POSITION,
+          location: VertexAttributeLocation.MAX,
           data: p,
         },
       ];

diff --git a/packages/g-plugin-3d/src/lights/AmbientLight.ts b/packages/g-plugin-3d/src/lights/AmbientLight.ts
@@ -1,5 +1,5 @@
 import { DisplayObjectConfig, PARSED_COLOR_TYPE, Tuple4Number } from '@antv/g';
-import { Light, LightProps, fillVec4 } from '@antv/g-plugin-webgl-renderer';
+import { Light, LightProps, RenderInstUniform } from '@antv/g-plugin-webgl-renderer';
 
 export interface AmbientLightProps extends LightProps {}
 export class AmbientLight extends Light {
@@ -16,18 +16,19 @@ export class AmbientLight extends Light {
     });
   }
 
-  getUniformWordCount() {
-    return 4;
-  }
+  // getUniformWordCount() {
+  //   return 4;
+  // }
 
-  uploadUBO(d: Float32Array, offs: number) {
+  uploadUBO(uniforms: RenderInstUniform[], index: number) {
     const { fill } = this.parsedStyle;
 
     if (fill?.type === PARSED_COLOR_TYPE.Constant) {
       const fillColor = fill.value as Tuple4Number;
-      offs += fillVec4(d, offs, ...fillColor); // color
+      uniforms.push({
+        name: 'u_AmbientLightColor',
+        value: fillColor,
+      });
     }
-
-    return offs;
   }
 }
diff --git a/packages/g-plugin-3d/src/lights/DirectionalLight.ts b/packages/g-plugin-3d/src/lights/DirectionalLight.ts
@@ -1,5 +1,5 @@
 import { DisplayObjectConfig, PARSED_COLOR_TYPE, Tuple4Number } from '@antv/g';
-import { Light, LightProps, fillVec4 } from '@antv/g-plugin-webgl-renderer';
+import { Light, LightProps, RenderInstUniform } from '@antv/g-plugin-webgl-renderer';
 import { vec3 } from 'gl-matrix';
 
 export interface DirectionalLightProps extends LightProps {
@@ -24,15 +24,23 @@ export class DirectionalLight extends Light {
     return 4 + 4;
   }
 
-  uploadUBO(d: Float32Array, offs: number) {
+  uploadUBO(uniforms: RenderInstUniform[], index: number) {
     const { fill, direction, intensity } = this.parsedStyle;
 
     if (fill?.type === PARSED_COLOR_TYPE.Constant) {
       const fillColor = fill.value as Tuple4Number;
-      offs += fillVec4(d, offs, ...(direction as [number, number, number]), intensity); // direction
-      offs += fillVec4(d, offs, ...fillColor); // color
+      uniforms.push({
+        name: `directionalLights[${index}].direction`,
+        value: direction,
+      });
+      uniforms.push({
+        name: `directionalLights[${index}].intensity`,
+        value: intensity,
+      });
+      uniforms.push({
+        name: `directionalLights[${index}].color`,
+        value: fillColor.slice(0, 3),
+      });
     }
-
-    return offs;
   }
 }
diff --git a/packages/g-plugin-3d/src/materials/MeshBasicMaterial.ts b/packages/g-plugin-3d/src/materials/MeshBasicMaterial.ts
@@ -1,4 +1,10 @@
-import { Material, Texture2D, CullMode, IMaterial, Format } from '@antv/g-plugin-webgl-renderer';
+import {
+  Material,
+  Texture2D,
+  CullMode,
+  IMaterial,
+  VertexAttributeLocation,
+} from '@antv/g-plugin-webgl-renderer';
 import vert from '../shaders/material.basic.vert';
 import frag from '../shaders/material.basic.frag';
 
@@ -72,6 +78,9 @@ export class MeshBasicMaterial<T extends IMeshBasicMaterial> extends Material<T>
       USE_WIREFRAME: false,
       USE_FOG: false,
       USE_LIGHT: false,
+      POSITION: VertexAttributeLocation.MAX,
+      UV: VertexAttributeLocation.MAX + 2,
+      BARYCENTRIC: VertexAttributeLocation.MAX + 3,
     };
 
     const { map, wireframe } = props || {};
@@ -80,10 +89,8 @@ export class MeshBasicMaterial<T extends IMeshBasicMaterial> extends Material<T>
     }
     this.wireframe = wireframe;
 
-    this.addUniform({
-      name: Uniform.PLACE_HOLDER,
-      format: Format.F32_RGBA,
-      data: [0, 0, 0, 0],
+    this.setUniforms({
+      [Uniform.PLACE_HOLDER]: [0, 0, 0, 0],
     });
   }
 }
diff --git a/packages/g-plugin-3d/src/materials/MeshPhongMaterial.ts b/packages/g-plugin-3d/src/materials/MeshPhongMaterial.ts
@@ -1,5 +1,5 @@
 import { parseColor, Tuple4Number } from '@antv/g';
-import { Format, Texture2D } from '@antv/g-plugin-webgl-renderer';
+import { Format, Texture2D, VertexAttributeLocation } from '@antv/g-plugin-webgl-renderer';
 import { MeshBasicMaterial, IMeshBasicMaterial } from './MeshBasicMaterial';
 import vert from '../shaders/material.phong.vert';
 import frag from '../shaders/material.phong.frag';
@@ -35,15 +35,19 @@ export class MeshPhongMaterial extends MeshBasicMaterial<IMeshPhongMaterial> {
   set emissive(v) {
     this.props.emissive = v;
     const emissiveColor = parseColor(v).value as Tuple4Number;
-    this.updateUniformData(Uniform.EMISSIVE, emissiveColor.slice(0, 3) as [number, number, number]);
+    this.setUniforms({
+      [Uniform.EMISSIVE]: emissiveColor.slice(0, 3) as [number, number, number],
+    });
   }
 
   get shininess() {
     return this.props.shininess;
   }
   set shininess(v) {
     this.props.shininess = v;
-    this.updateUniformData(Uniform.SHININESS, v);
+    this.setUniforms({
+      [Uniform.SHININESS]: v,
+    });
   }
 
   get specular() {
@@ -52,7 +56,9 @@ export class MeshPhongMaterial extends MeshBasicMaterial<IMeshPhongMaterial> {
   set specular(v) {
     this.props.specular = v;
     const specularColor = parseColor(v).value as Tuple4Number;
-    this.updateUniformData(Uniform.SPECULAR, specularColor.slice(0, 3) as [number, number, number]);
+    this.setUniforms({
+      [Uniform.SPECULAR]: specularColor.slice(0, 3) as [number, number, number],
+    });
   }
 
   get specularMap() {
@@ -84,22 +90,24 @@ export class MeshPhongMaterial extends MeshBasicMaterial<IMeshPhongMaterial> {
     this.defines.USE_BUMPMAP = !!v;
     if (v) {
       this.addTexture(v, Uniform.BUMP_MAP, SamplerLocation.BUMP_MAP);
-      this.addUniform({
-        name: Uniform.BUMP_SCALE,
-        format: Format.F32_R,
-        data: this.bumpScale,
+      this.setUniforms({
+        [Uniform.BUMP_SCALE]: this.bumpScale,
       });
     } else {
       this.removeTexture(Uniform.BUMP_MAP);
-      this.removeUniform(Uniform.BUMP_SCALE);
+      this.setUniforms({
+        [Uniform.BUMP_SCALE]: null,
+      });
     }
   }
   get bumpScale() {
     return this.props.bumpScale;
   }
   set bumpScale(v) {
     this.props.bumpScale = v;
-    this.updateUniformData(Uniform.BUMP_SCALE, v);
+    this.setUniforms({
+      [Uniform.BUMP_SCALE]: v,
+    });
   }
 
   get doubleSide() {
@@ -126,21 +134,11 @@ export class MeshPhongMaterial extends MeshBasicMaterial<IMeshPhongMaterial> {
 
     const emissiveColor = parseColor(emissive).value as Tuple4Number;
     const specularColor = parseColor(specular).value as Tuple4Number;
-    this.removeUniform('u_Placeholder');
-    this.addUniform({
-      name: Uniform.EMISSIVE,
-      format: Format.F32_RGB,
-      data: emissiveColor,
-    });
-    this.addUniform({
-      name: Uniform.SHININESS,
-      format: Format.F32_R,
-      data: shininess,
-    });
-    this.addUniform({
-      name: Uniform.SPECULAR,
-      format: Format.F32_RGB,
-      data: specularColor,
+    this.setUniforms({
+      u_Placeholder: null,
+      [Uniform.EMISSIVE]: emissiveColor.slice(0, 3) as [number, number, number],
+      [Uniform.SHININESS]: shininess,
+      [Uniform.SPECULAR]: specularColor.slice(0, 3) as [number, number, number],
     });
 
     if (specularMap) {
@@ -152,5 +150,10 @@ export class MeshPhongMaterial extends MeshBasicMaterial<IMeshPhongMaterial> {
     }
 
     this.doubleSide = doubleSide;
+
+    this.defines = {
+      ...this.defines,
+      NORMAL: VertexAttributeLocation.MAX + 1,
+    };
   }
 }
diff --git a/packages/g-plugin-3d/src/shaders/material.basic.vert b/packages/g-plugin-3d/src/shaders/material.basic.vert
@@ -4,15 +4,15 @@
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
 
-layout(location = 10) attribute vec3 a_Position;
+layout(location = POSITION) attribute vec3 a_Position;
 
 #ifdef USE_UV
-  layout(location = 12) attribute vec2 a_Uv;
+  layout(location = UV) attribute vec2 a_Uv;
   varying vec2 v_Uv;
 #endif
 
 #ifdef USE_WIREFRAME
-  layout(location = 13) attribute vec3 a_Barycentric;
+  layout(location = BARYCENTRIC) attribute vec3 a_Barycentric;
   varying vec3 v_Barycentric;
 #endif
 

diff --git a/packages/g-plugin-3d/src/shaders/material.phong.vert b/packages/g-plugin-3d/src/shaders/material.phong.vert
@@ -6,16 +6,16 @@
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
 
-layout(location = 10) attribute vec3 a_Position;
-layout(location = 11) attribute vec3 a_Normal;
+layout(location = POSITION) attribute vec3 a_Position;
+layout(location = NORMAL) attribute vec3 a_Normal;
 
 #ifdef USE_UV
-  layout(location = 12) attribute vec2 a_Uv;
+  layout(location = UV) attribute vec2 a_Uv;
   varying vec2 v_Uv;
 #endif
 
 #ifdef USE_WIREFRAME
-  layout(location = 13) attribute vec3 a_Barycentric;
+  layout(location = BARYCENTRIC) attribute vec3 a_Barycentric;
   varying vec3 v_Barycentric;
 #endif
 
@@ -34,7 +34,7 @@ void main() {
 
   // v_ViewPosition = vec3(mvPosition) / mvPosition.w;
 
-  mat3 normalWorld = mat3(transpose(inverse(u_ViewMatrix * u_ModelMatrix)));
+  mat3 normalWorld = mat3(transposeMat3(inverseMat3(mat3(u_ViewMatrix * u_ModelMatrix))));
   v_Normal = normalize(normalWorld * a_Normal);
 
   #pragma glslify: import('@antv/g-shader-components/uv.vert')

diff --git a/packages/g-plugin-webgl-renderer/src/RenderGraphPlugin.ts b/packages/g-plugin-webgl-renderer/src/RenderGraphPlugin.ts
@@ -42,6 +42,16 @@ import {
 import { Fog, Light } from './lights';
 import { LightPool } from './LightPool';
 
+// uniforms in scene level
+export enum SceneUniform {
+  PROJECTION_MATRIX = 'u_ProjectionMatrix',
+  VIEW_MATRIX = 'u_ViewMatrix',
+  CAMERA_POSITION = 'u_CameraPosition',
+  DEVICE_PIXEL_RATIO = 'u_DevicePixelRatio',
+  VIEWPORT = 'u_Viewport',
+  IS_ORTHO = 'u_IsOrtho',
+}
+
 @singleton({ contrib: RenderingPluginContribution })
 export class RenderGraphPlugin implements RenderingPlugin {
   static tag = 'RenderGraphPlugin';
@@ -78,9 +88,7 @@ export class RenderGraphPlugin implements RenderingPlugin {
   private swapChain: SwapChain;
 
   private renderLists = {
-    skyscape: new RenderInstList(),
     world: new RenderInstList(),
-    picking: new RenderInstList(),
   };
 
   /**
@@ -230,21 +238,41 @@ export class RenderGraphPlugin implements RenderingPlugin {
             rgbBlendMode: BlendMode.Add,
             alphaBlendMode: BlendMode.Add,
             rgbBlendSrcFactor: BlendFactor.SrcAlpha,
-            alphaBlendSrcFactor: BlendFactor.One,
+            alphaBlendSrcFactor: BlendFactor.Zero,
             rgbBlendDstFactor: BlendFactor.OneMinusSrcAlpha,
             alphaBlendDstFactor: BlendFactor.One,
           },
         ),
       );
 
       // Update Scene Params
-      let offs = template.allocateUniformBuffer(0, 16 + 16 + 4 + 4);
-      let d = template.mapUniformBufferF32(0);
-      offs += fillMatrix4x4(d, offs, this.camera.getPerspective()); // ProjectionMatrix 16
-      offs += fillMatrix4x4(d, offs, this.camera.getViewTransform()); // ViewMatrix 16
-      offs += fillVec3v(d, offs, this.camera.getPosition(), this.contextService.getDPR()); // CameraPosition DPR isOrtho 4
       const { width, height } = this.canvasConfig;
-      offs += fillVec4(d, offs, width, height, this.camera.isOrtho() ? 1 : 0); // Viewport isOrtho
+      template.setUniforms(0, [
+        {
+          name: SceneUniform.PROJECTION_MATRIX,
+          value: this.camera.getPerspective(),
+        },
+        {
+          name: SceneUniform.VIEW_MATRIX,
+          value: this.camera.getViewTransform(),
+        },
+        {
+          name: SceneUniform.CAMERA_POSITION,
+          value: this.camera.getPosition(),
+        },
+        {
+          name: SceneUniform.DEVICE_PIXEL_RATIO,
+          value: this.contextService.getDPR(),
+        },
+        {
+          name: SceneUniform.VIEWPORT,
+          value: [width, height],
+        },
+        {
+          name: SceneUniform.IS_ORTHO,
+          value: this.camera.isOrtho() ? 1 : 0,
+        },
+      ]);
 
       renderInstManager.setCurrentRenderInstList(this.renderLists.world);
       // render batches