支持 Raster Layer 在 WebGPU 下的渲染 (#2262)

* fix: raster layer in WebGPU * fix: raster rgb layer * fix: extend 3 channels to 4 in WebGPU * chore: remove taobao npm registry
antvis · Jan 24, 2024 · 87bffa8 · 87bffa8
1 parent 2934be3
commit 87bffa8
Show file tree

Hide file tree

Showing 39 changed files with 500 additions and 113 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1,5 +1,3 @@
 @ali:registry=https://registry.npm.alibaba-inc.com
 @alipay:registry=https://registry.npm.alibaba-inc.com
-@alife:registry=https://registry.npm.alibaba-inc.com
-
-registry=https://registry.npm.taobao.org/
+@alife:registry=https://registry.npm.alibaba-inc.com
diff --git a/examples/demos/bugfix/color.ts b/examples/demos/bugfix/color.ts
@@ -1,54 +1,51 @@
-import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
+import { LineLayer, PolygonLayer, Scene } from '@antv/l7';
 import * as allMap from '@antv/l7-maps';
 
 export function MapRender(option: {
-    map: string
-    renderer: 'regl' | 'device'
+  map: string;
+  renderer: 'regl' | 'device';
 }) {
-    const scene = new Scene({
-        id: 'map',
-        // renderer: option.renderer === 'device' ? 'device' : 'regl',
-        map: new allMap[option.map || 'Map']({
-            style: 'light',
-            center: [ -96, 37.8 ],
-            zoom: 3
+  const scene = new Scene({
+    id: 'map',
+    // renderer: option.renderer,
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [-96, 37.8],
+      zoom: 3,
+    }),
+  });
+  scene.on('loaded', () => {
+    fetch(
+      // 'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
+      'https://mdn.alipayobjects.com/afts/file/A*CFbnRqXpg8wAAAAAAAAAAAAADrd2AQ/test.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        const layer = new PolygonLayer({ autoFit: true })
+          .source(data)
+          .color('#f00')
+          .shape('fill')
+          .active(true);
+        const layer2 = new LineLayer({
+          zIndex: 2,
         })
-    });
-    scene.on('loaded', () => {
-        fetch(
-            // 'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
-            'https://mdn.alipayobjects.com/afts/file/A*CFbnRqXpg8wAAAAAAAAAAAAADrd2AQ/test.json'
-        )
-            .then(res => res.json())
-            .then(data => {
-                console.log(data)
-                const layer = new PolygonLayer({ autoFit: true })
-                    .source(data)
-                    .color("#f00")
-                    .shape("fill")
-                    .active(true);
-                const layer2 = new LineLayer({
-                    zIndex: 2,
-                })
-                    .source(data)
-                    .color("#ffffff")
-                    .active(true)
-                    .size(1)
-                    .style({
-                        lineType: "dash",
-                        dashArray: [2, 2],
-                    });
-                scene.addLayer(layer);
-                scene.addLayer(layer2);
-
-                setTimeout(() => {
-                    layer.color("#f0f");
-                    layer2.color("#00f");
-                    scene.render();
-                }, 1000);
-
-
-            });
-    });
+          .source(data)
+          .color('#ffffff')
+          .active(true)
+          .size(1)
+          .style({
+            lineType: 'dash',
+            dashArray: [2, 2],
+          });
+        scene.addLayer(layer);
+        scene.addLayer(layer2);
 
+        setTimeout(() => {
+          layer.color('#f0f');
+          layer2.color('#00f');
+          scene.render();
+        }, 1000);
+      });
+  });
 }
diff --git a/examples/demos/point/fill.ts b/examples/demos/point/fill.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     map: new allMap[option.map || 'Map']({
       style: 'light',
       center: [121.435159, 31.256971],

diff --git a/examples/demos/point/image.ts b/examples/demos/point/image.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     map: new allMap[option.map || 'Map']({
       style: 'light',
       center: [121.434765, 31.256735],

diff --git a/examples/demos/point/text.ts b/examples/demos/point/text.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     map: new allMap[option.map || 'Map']({
       style: 'light',
       center: [121.434765, 31.256735],

diff --git a/examples/demos/tile/index.ts b/examples/demos/tile/index.ts
@@ -1,3 +1,4 @@
-export { MapRender as  image } from './normal';
-export { MapRender as rgb } from  './rgb'
-export { MapRender as vector } from  './vector'
+export { MapRender as image } from './normal';
+export { MapRender as perf } from './perf';
+export { MapRender as rgb } from './rgb';
+export { MapRender as vector } from './vector';
diff --git a/examples/demos/tile/perf.ts b/examples/demos/tile/perf.ts
@@ -0,0 +1,80 @@
+import { LineLayer, PolygonLayer, Scene, Source } from '@antv/l7';
+// @ts-ignore
+import * as allMap from '@antv/l7-maps';
+import { Protocol } from 'pmtiles';
+const protocol = new Protocol();
+Scene.addProtocol('pmtiles', protocol.tile);
+
+export function MapRender(option: {
+  map: string;
+  renderer: 'regl' | 'device';
+}) {
+  const scene = new Scene({
+    id: 'map',
+    renderer: option.renderer,
+    map: new allMap[option.map || 'Map']({
+      zoom: 4.5,
+      center: [116.412427, 39.303573],
+    }),
+  });
+
+  const url =
+    'https://mvt.amap.com/district/CHN3/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
+  const source = new Source(url, {
+    parser: {
+      type: 'mvt',
+      tileSize: 256,
+      warp: false,
+    },
+  });
+
+  scene.on('loaded', () => {
+    const colors = {};
+    const getColorByAdcode = function (adcode) {
+      if (!colors[adcode]) {
+        const gb = Math.floor(Math.random() * 155 + 50);
+        colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
+      }
+
+      return colors[adcode];
+    };
+    // 绿地
+    const fill = new PolygonLayer({
+      sourceLayer: 'CHN_Districts',
+    })
+      .source(source)
+      .shape('fill')
+      .color('adcode', getColorByAdcode);
+
+    const line = new LineLayer({
+      sourceLayer: 'CHN_Districts_L',
+    })
+      .source(source)
+      .shape('simple')
+      .color('#fee0d2');
+
+    const line2 = new LineLayer({
+      sourceLayer: 'CHN_Citys_L',
+    })
+      .source(source)
+      .shape('line')
+      .size(0.6)
+      .color('#fc9272');
+
+    const line3 = new LineLayer({
+      sourceLayer: 'CHN_Provinces_L',
+    })
+      .source(source)
+      .shape('line')
+      .size(0.6)
+      .color('#de2d26');
+
+    scene.addLayer(fill);
+    scene.addLayer(line);
+    scene.addLayer(line2);
+    scene.addLayer(line3);
+    //   scene.addLayer(line2);
+    // const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
+    // scene.addLayer(debugerLayer);
+  });
+}
diff --git a/examples/demos/webgpu/heatmap_grid.ts b/examples/demos/webgpu/heatmap_grid.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/heatmap_grid3d.ts b/examples/demos/webgpu/heatmap_grid3d.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/heatmap_normal.ts b/examples/demos/webgpu/heatmap_normal.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/index.ts b/examples/demos/webgpu/index.ts
@@ -5,6 +5,8 @@ export { MapRender as heatmap_grid3d } from './heatmap_grid3d';
 export { MapRender as heatmap_normal } from './heatmap_normal';
 export { MapRender as WebGL_IDW } from './idw';
 export { MapRender as line_normal } from './line_normal';
+export { MapRender as perf } from './perf';
+export { MapRender as perf_animate } from './perf-animate';
 export { MapRender as point_column } from './point_column';
 export { MapRender as point_fill } from './point_fill';
 export { MapRender as point_image } from './point_image';
@@ -13,7 +15,11 @@ export { MapRender as polygon_extrude } from './polygon_extrude';
 export { MapRender as polygon_fill } from './polygon_fill';
 export { MapRender as polygon_texture } from './polygon_texture';
 export { MapRender as polygon_water } from './polygon_water';
-// export { MapRender as raster_image } from './raster_image';
-export { MapRender as perf } from './perf';
-export { MapRender as perf_animate } from './perf-animate';
+export { MapRender as raster_dem } from './raster_dem';
+export { MapRender as raster_image } from './raster_image';
+export { MapRender as raster_multiband } from './raster_multiband';
+export { MapRender as raster_ndvi } from './raster_ndvi';
+export { MapRender as raster_tiff } from './raster_tiff';
 export { MapRender as texture } from './texture';
+export { MapRender as tile_image } from './tile_image';
+export { MapRender as tile_vector } from './tile_vector';
diff --git a/examples/demos/webgpu/line_normal.ts b/examples/demos/webgpu/line_normal.ts
@@ -6,7 +6,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/perf-animate.ts b/examples/demos/webgpu/perf-animate.ts
@@ -10,7 +10,7 @@ export function MapRender(option: {
   option.animate = true;
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/perf.ts b/examples/demos/webgpu/perf.ts
@@ -6,7 +6,7 @@ export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
     // renderer: 'regl',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/point_column.ts b/examples/demos/webgpu/point_column.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/point_fill.ts b/examples/demos/webgpu/point_fill.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/point_image.ts b/examples/demos/webgpu/point_image.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/point_text.ts b/examples/demos/webgpu/point_text.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/polygon_extrude.ts b/examples/demos/webgpu/polygon_extrude.ts
@@ -5,7 +5,7 @@ export function MapRender(option: { map: string; renderer: string }) {
   console.log(option);
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/polygon_fill.ts b/examples/demos/webgpu/polygon_fill.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/polygon_texture.ts b/examples/demos/webgpu/polygon_texture.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({

diff --git a/examples/demos/webgpu/polygon_water.ts b/examples/demos/webgpu/polygon_water.ts
@@ -4,7 +4,7 @@ import * as allMap from '@antv/l7-maps';
 export function MapRender(option: { map: string; renderer: string }) {
   const scene = new Scene({
     id: 'map',
-    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    renderer: option.renderer,
     enableWebGPU: true,
     shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
     map: new allMap[option.map || 'Map']({