提升瓦片图层性能 (#2258)

* fix: add tile vector to ci * fix: add program cache for device model * chore: update tile vector snapshot
antvis · Jan 17, 2024 · 15d39a2 · 15d39a2
1 parent f920530
commit 15d39a2
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 15 deletions.
diff --git a/__tests__/e2e/snapshots/Tile_vector.png b/__tests__/e2e/snapshots/Tile_vector.png
diff --git a/examples/demos/tile/vector.ts b/examples/demos/tile/vector.ts
@@ -126,13 +126,13 @@ export function MapRender(option: {
   scene.on('loaded', () => {
     scene.addLayer(layer);
     // scene.startAnimate();
-    // scene.addLayer(boundaries);
-    // scene.addLayer(natural);
-    // scene.addLayer(buildings);
-    // scene.addLayer(transit);
-    // scene.addLayer(roads);
-    // scene.addLayer(water);
-    // scene.addLayer(point);
+    scene.addLayer(boundaries);
+    scene.addLayer(natural);
+    scene.addLayer(buildings);
+    scene.addLayer(transit);
+    scene.addLayer(roads);
+    scene.addLayer(water);
+    scene.addLayer(point);
 
     if (window['screenshot']) {
       window['screenshot']();

diff --git a/examples/demos/webgpu/perf-animate.ts b/examples/demos/webgpu/perf-animate.ts
@@ -51,7 +51,7 @@ export function MapRender(option: {
       });
 
       // 2400
-      flydata = new Array(500).fill(flydata).flat();
+      flydata = new Array(50).fill(flydata).flat();
 
       const worldLine = new LineLayer()
         .source(world)

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
@@ -24,7 +24,7 @@
     "tsc": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "@antv/g-device-api": "^1.5.0",
+    "@antv/g-device-api": "^1.6.1",
     "@antv/l7-core": "2.20.14",
     "@antv/l7-utils": "2.20.14",
     "@babel/runtime": "^7.7.7",

diff --git a/packages/renderer/src/device/DeviceCache.ts b/packages/renderer/src/device/DeviceCache.ts
@@ -8,6 +8,8 @@ import type {
   InputLayout,
   InputLayoutDescriptor,
   MegaStateDescriptor,
+  Program,
+  ProgramDescriptor,
   RenderPipeline,
   RenderPipelineDescriptor,
 } from '@antv/g-device-api';
@@ -125,6 +127,28 @@ function bindingsDescriptorHash(a: BindingsDescriptor): number {
   return hashCodeNumberFinish(hash);
 }
 
+function programDescriptorEquals(
+  a: ProgramDescriptor,
+  b: ProgramDescriptor,
+): boolean {
+  return (
+    a.vertex?.glsl === b.vertex?.glsl && a.fragment?.glsl === b.fragment?.glsl
+  );
+}
+
+function programDescriptorCopy(
+  a: Readonly<ProgramDescriptor>,
+): ProgramDescriptor {
+  return {
+    vertex: {
+      glsl: a.vertex?.glsl,
+    },
+    fragment: {
+      glsl: a.fragment?.glsl,
+    },
+  };
+}
+
 export class RenderCache {
   constructor(private device: Device) {}
 
@@ -143,6 +167,11 @@ export class RenderCache {
     nullHashFunc,
   );
 
+  private programCache = new HashMap<ProgramDescriptor, Program>(
+    programDescriptorEquals,
+    nullHashFunc,
+  );
+
   createBindings(descriptor: BindingsDescriptor): Bindings {
     let bindings = this.bindingsCache.get(descriptor);
     if (bindings === null) {
@@ -184,18 +213,28 @@ export class RenderCache {
     return inputLayout;
   }
 
+  createProgram(descriptor: ProgramDescriptor): Program {
+    let program = this.programCache.get(descriptor);
+    if (program === null) {
+      const descriptorCopy = programDescriptorCopy(descriptor);
+      program = this.device.createProgram(descriptor);
+      this.programCache.add(descriptorCopy, program);
+    }
+    return program;
+  }
+
   destroy(): void {
     for (const bindings of this.bindingsCache.values()) bindings.destroy();
     for (const renderPipeline of this.renderPipelinesCache.values())
       renderPipeline.destroy();
     for (const inputLayout of this.inputLayoutsCache.values())
       inputLayout.destroy();
-    // for (const program of this.programCache.values()) program.destroy();
+    for (const program of this.programCache.values()) program.destroy();
     // for (const sampler of this.samplerCache.values()) sampler.destroy();
     this.bindingsCache.clear();
     this.renderPipelinesCache.clear();
     this.inputLayoutsCache.clear();
-    // this.programCache.clear();
+    this.programCache.clear();
     // this.samplerCache.clear();
   }
 }
diff --git a/packages/renderer/src/device/DeviceModel.ts b/packages/renderer/src/device/DeviceModel.ts
@@ -81,7 +81,7 @@ export default class DeviceModel implements IModel {
         ? 'diagnostic(off,derivative_uniformity);'
         : '';
 
-    const program = device.createProgram({
+    this.program = service.renderCache.createProgram({
       vertex: {
         glsl: vs,
       },
@@ -90,7 +90,6 @@ export default class DeviceModel implements IModel {
         postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs,
       },
     });
-    this.program = program;
 
     if (uniforms) {
       this.uniforms = this.extractUniforms(uniforms);
@@ -141,11 +140,10 @@ export default class DeviceModel implements IModel {
       this.indexBuffer = (elements as DeviceElements).get();
     }
 
-    // const inputLayout = device.createInputLayout({
     const inputLayout = service.renderCache.createInputLayout({
       vertexBufferDescriptors,
       indexBufferFormat: elements ? Format.U32_R : null,
-      program,
+      program: this.program,
     });
     this.inputLayout = inputLayout;
 

diff --git a/packages/renderer/src/device/index.ts b/packages/renderer/src/device/index.ts
@@ -155,6 +155,8 @@ export default class DeviceRendererService implements IRendererService {
   }
 
   beginFrame(): void {
+    this.device.beginFrame();
+
     const { currentFramebuffer, swapChain, mainColorRT, mainDepthRT } = this;
 
     const colorAttachment = currentFramebuffer
@@ -197,6 +199,7 @@ export default class DeviceRendererService implements IRendererService {
 
   endFrame(): void {
     this.device.submitPass(this.renderPass);
+    this.device.endFrame();
   }
 
   getPointSizeRange() {