feat: implement renderer service with g-device-api (#1961)

* chore: rebase conflict * chore: rebase conflict * chore: rebase conflict * chore: rebase conflict * fix: render tsc 配置 * chore: rebase conflict * chore: 版本依赖 * chore: 更新 point fill layer * fix: demo * chore: rest fill demo * fix: add picking ubo * chore: add a WebGPU example * chore: g device 依赖 --------- Co-authored-by: lzxue <[email protected]>
antvis · Nov 14, 2023 · e3b1c7a · e3b1c7a
1 parent 3f43108
commit e3b1c7a
Show file tree

Hide file tree

Showing 54 changed files with 2,168 additions and 272 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,6 +29,7 @@ module.exports = {
         'no-useless-catch': 0,
         '@typescript-eslint/explicit-module-boundary-types': 0,
         '@typescript-eslint/no-explicit-any':0,
+        "@typescript-eslint/no-unused-vars": 0,
         'prefer-rest-params':0,
     },
     settings: {

diff --git a/.gitignore b/.gitignore
@@ -71,7 +71,6 @@ dist/
 es/
 
 .DS_Store
-public
 .cache
 .idea
 

diff --git a/.umirc.ts b/.umirc.ts
@@ -29,7 +29,7 @@ export default defineConfig({
       title: '特性',
       path: '/features',
     },
-  
+
     {
       title: '图库',
       path: '/gallery',
@@ -101,7 +101,8 @@ export default defineConfig({
     // "https://api.map.baidu.com/api?v=1.0&amp;&amp;type=webgl&amp;ak=zLhopYPPERGtpGOgimcdKcCimGRyyIsh",
     /** lodash */
     'https://gw.alipayobjects.com/os/lib/lodash/4.17.20/lodash.min.js',
-  ]
+  ],
+  publicPath: '/public/',
 
   // more config: https://d.umijs.org/config
 });
diff --git a/dev-demos/features/point/demos/circle-webgpu.tsx b/dev-demos/features/point/demos/circle-webgpu.tsx
@@ -0,0 +1,77 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'point_circle',
+      pickBufferScale: 1.0,
+      renderer: 'device',
+      enableWebGPU: true,
+      shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+      map: new GaodeMap({
+        style: 'light',
+        center: [-121.24357, 37.58264],
+        pitch: 0,
+        zoom: 6.45,
+      }),
+    });
+    scene.on('loaded', () => {
+      fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv',
+      )
+        .then((res) => res.text())
+        .then((data) => {
+          const pointLayer = new PointLayer()
+            .source(data, {
+              parser: {
+                type: 'csv',
+                x: 'Longitude',
+                y: 'Latitude',
+              },
+            })
+            .shape('circle')
+            .size(16)
+            .active(true)
+            .select({
+              color: 'red',
+            })
+            .color('Magnitude', [
+              '#0A3663',
+              '#1558AC',
+              '#3771D9',
+              '#4D89E5',
+              '#64A5D3',
+              '#72BED6',
+              '#83CED6',
+              '#A6E1E0',
+              '#B8EFE2',
+              '#D7F9F0',
+            ])
+            .style({
+              opacity: 1,
+              strokeWidth: 0,
+              stroke: '#fff',
+            });
+          scene.addLayer(pointLayer);
+          //  let i =0;
+          // setInterval(() => {
+          //     i++ % 2 === 0 ? pointLayer.setBlend('additive') : pointLayer.setBlend('normal');
+
+          // },20)
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="point_circle"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/point/demos/circlemeter.tsx b/dev-demos/features/point/demos/circlemeter.tsx
@@ -1,31 +1,23 @@
 import { Scene, PointLayer,PolygonLayer } from "@antv/l7";
-import { GaodeMap } from "@antv/l7-maps";
+import { GaodeMap,Map } from "@antv/l7-maps";
 import React, { useEffect } from 'react';
 import * as turf from '@turf/turf'
 
 export default () => {
     useEffect( () => {
 const scene = new Scene({
   id: "map",
+  renderer: 'device',
   map: new GaodeMap({
     style: "light",
     center: [120.099658370018, 30.263445807542666],
     zoom: 10
   })
 });
 scene.on("loaded", () => {
-  const size = 1000;
-  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 pointLayer = new PointLayer({
-    autoFit: false
+    autoFit: true
   })
     .source({
       type: "FeatureCollection",
@@ -39,18 +31,14 @@ const player = new PolygonLayer().source(turf.featureCollection([circle]))
           }
         }
       ]
-    })
-    .shape("triangle")
-    .size(size)
+    })  
+    .shape("circle")
+    .size(100)
     .color("#ff0000")
-    .active(true)
     .style({
       opacity: 1,
       strokeWidth: 1,
-      rotation: 30,
-      unit:'meter'
     });
-  scene.addLayer(player);
   scene.addLayer(pointLayer);
 });
 }, []);

diff --git a/dev-demos/features/point/demos/normal-device.tsx b/dev-demos/features/point/demos/normal-device.tsx
@@ -0,0 +1,63 @@
+// @ts-ignore
+import { PointLayer, Scene } from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      renderer: 'device',
+      map: new GaodeMap({
+        // 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) => {
+          const pointLayer = new PointLayer({ blend: 'additive' })
+            .source({
+              type: "FeatureCollection",
+              features: [
+                {
+                  type: "Feature",
+                  properties: {},
+                  geometry: {
+                    type: "Point",
+                    coordinates: [120.099658370018, 30.263445807542666]
+                  }
+                }
+              ]
+            })
+            .size(40)
+            .shape('dot')
+            .color('#f00')
+            .style({
+              sizeScale:0.5,
+              opacity: 0.6,
+              stroke:'#00f',
+
+
+            });
+
+          scene.addLayer(pointLayer);
+        // });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/point/demos/normal.tsx b/dev-demos/features/point/demos/normal.tsx
@@ -1,51 +1,51 @@
 // @ts-ignore
 import { PointLayer, Scene } from '@antv/l7';
 // @ts-ignore
-import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { GaodeMap } from '@antv/l7-maps';
 import React, { useEffect } from 'react';
-  
+
 export default () => {
-    useEffect( () => {
-      const scene = new Scene({
-        id: 'map',
-        map: new GaodeMap({
-          style: 'dark',
-          center: [ 121.417463, 31.215175 ],
-          pitch: 0,
-          zoom: 11
-        })
-      });
-      scene.on('loaded', () => {
-        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'
-                }
-              })
-              .size(0.5)
-              .color('#080298')
-              .style({
-                opacity: 1
-              });
+  useEffect(() => {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        style: 'dark',
+        center: [121.417463, 31.215175],
+        pitch: 0,
+        zoom: 11,
+      }),
+    });
+    scene.on('loaded', () => {
+      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',
+              },
+            })
+            .size(0.5)
+            .color('#080298')
+            .style({
+              opacity: 1,
+            });
 
-            scene.addLayer(pointLayer);
-          });
-      });
-
-    }, []);
-    return (
-      <div
-        id="map"
-        style={{
-          height: '500px',
-          position: 'relative',
-        }}
-      />
-    );
-  };
-
+          scene.addLayer(pointLayer);
+        });
+    });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};
diff --git a/dev-demos/features/point/pointCircleWebGPU.md b/dev-demos/features/point/pointCircleWebGPU.md
@@ -0,0 +1,3 @@
+### point - circle - WebGPU
+
+<code src="./demos/circle-webgpu.tsx"></code>
diff --git a/dev-demos/features/point/pointNormalDevice.md b/dev-demos/features/point/pointNormalDevice.md
@@ -0,0 +1,3 @@
+### Point - normal - Device API
+
+<code src="./demos/normal-device.tsx"></code>
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -6,6 +6,7 @@ import container, {
 } from './inversify.config';
 import BasePostProcessingPass from './services/renderer/passes/BasePostProcessingPass';
 import { TYPES } from './types';
+import { removeDuplicateUniforms } from './utils/shader-module';
 import { packCircleVertex } from './utils/vertex-compression';
 
 export * from './services/asset/IFontService';
@@ -54,4 +55,5 @@ export {
   lazyInject,
   lazyMultiInject,
   packCircleVertex,
+  removeDuplicateUniforms,
 };
diff --git a/packages/core/src/services/config/IConfigService.ts b/packages/core/src/services/config/IConfigService.ts
@@ -17,6 +17,10 @@ export interface ISceneConfig extends IRenderConfig {
   // TODO: 场景是否支持 stencil mask
   stencil?: boolean;
   debug?: boolean;
+  /**
+   * Support regl & @antv/g-device-api now
+   */
+  renderer?: 'regl' | 'device';
 }
 
 export interface IGlobalConfigService {

diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
@@ -17,6 +17,7 @@ import {
 } from '../interaction/IPickingService';
 import { IMapService } from '../map/IMapService';
 import { IAttribute } from '../renderer/IAttribute';
+import { IBuffer } from '../renderer/IBuffer';
 import {
   IBlendOptions,
   IModel,
@@ -87,6 +88,8 @@ export interface ILayerModelInitializationOptions {
 }
 
 export interface ILayerModel {
+  uniformBuffers: IBuffer[];
+  textures: ITexture2D[];
   renderUpdate?(): void;
   getBlend(): Partial<IBlendOptions>;
   getStencil(option?: Partial<IRenderOptions>): Partial<IStencilOptions>;

diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts
@@ -145,6 +145,8 @@ export default class LayerService
     this.debugService.renderStart(renderUid);
     this.alreadyInRendering = true;
     this.clear();
+
+    this.renderService.beginFrame();
     for (const layer of this.layerList) {
       const { enableMask } = layer.getLayerConfig();
       if (layer.masks.filter((m) => m.inited).length > 0 && enableMask) {
@@ -158,6 +160,7 @@ export default class LayerService
         await layer.render();
       }
     }
+    this.renderService.endFrame();
     this.debugService.renderEnd(renderUid);
     this.alreadyInRendering = false;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,6 @@ dist/ @@
     es/
     .DS_Store
-    public
     .cache
     .idea
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		### point - circle - WebGPU

		<code src="./demos/circle-webgpu.tsx"></code>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		### Point - normal - Device API

		<code src="./demos/normal-device.tsx"></code>