fix: load image in webgpu

examples/demos/webgpu/index.ts

@@ -1,7 +1,11 @@
 export { MapRender as boids } from './boids';
 export { MapRender as compute_texture } from './compute_texture';
 export { MapRender as WebGL_IDW } from './idw';
+// export { MapRender as line_normal } from './line_normal';
 export { MapRender as point_column } from './point_column';
 export { MapRender as point_fill } from './point_fill';
 export { MapRender as point_image } from './point_image';
+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 texture } from './texture';

examples/demos/webgpu/line_normal.ts

@@ -0,0 +1,82 @@
+// @ts-ignore
+import { LineLayer, Scene, Source } from '@antv/l7';
+// @ts-ignore
+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',
+    enableWebGPU: true,
+    shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [121.435159, 31.256971],
+      zoom: 14.89,
+      minZoom: 10,
+    }),
+  });
+  const geoData = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {
+          offset: 0.3,
+        },
+        geometry: {
+          type: 'MultiLineString',
+          coordinates: [
+            [
+              [99.228515625, 37.43997405227057],
+              [100.72265625, 27.994401411046148],
+              [110, 27.994401411046148],
+              [110, 25],
+              [100, 25],
+            ],
+            [
+              [108.544921875, 37.71859032558816],
+              [112.412109375, 32.84267363195431],
+              [115, 32.84267363195431],
+              [115, 35],
+            ],
+          ],
+        },
+      },
+      {
+        type: 'Feature',
+        properties: {
+          offset: 0.8,
+        },
+        geometry: {
+          type: 'MultiLineString',
+          coordinates: [
+            [
+              [110, 30],
+              [120, 30],
+              [120, 40],
+            ],
+          ],
+        },
+      },
+    ],
+  };
+  const source = new Source(geoData);
+  const layer = new LineLayer({ blend: 'normal', autoFit: true })
+    .source(source)
+    .size(1)
+    .shape('line')
+    .color('#f00')
+    .style({
+      opacity: 0.6,
+    });
+
+  scene.on('loaded', () => {
+    scene.addLayer(layer);
+  });
+
+  setTimeout(() => {
+    layer.size(20);
+    scene.render();
+  }, 2000);
+}

examples/demos/webgpu/polygon_extrude.ts

@@ -0,0 +1,64 @@
+import { PolygonLayer, Scene } from '@antv/l7';
+import * as allMap from '@antv/l7-maps';
+
+export function MapRender(option: { map: string; renderer: string }) {
+  console.log(option);
+  const scene = new Scene({
+    id: 'map',
+    renderer: option.renderer === 'device' ? 'device' : 'regl',
+    enableWebGPU: true,
+    shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+    }),
+  });
+
+  const colors = [
+    '#87CEFA',
+    '#00BFFF',
+
+    '#7FFFAA',
+    '#00FF7F',
+    '#32CD32',
+
+    '#F0E68C',
+    '#FFD700',
+
+    '#FF7F50',
+    '#FF6347',
+    '#FF0000',
+  ];
+  scene.on('loaded', () => {
+    fetch(
+      'https://gw.alipayobjects.com/os/bmw-prod/94763191-2816-4c1a-8d0d-8bcf4181056a.json',
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const filllayer = new PolygonLayer({
+          name: 'fill',
+          zIndex: 3,
+          autoFit: true,
+        })
+          .source(data)
+          .shape('extrude')
+          // .active(true)
+          .size('unit_price', (unit_price) => unit_price)
+          .color('count', [
+            '#f2f0f7',
+            '#dadaeb',
+            '#bcbddc',
+            '#9e9ac8',
+            '#756bb1',
+            '#54278f',
+          ])
+          .style({
+            pickLight: true,
+
+            opacity: 1,
+          });
+        scene.addLayer(filllayer);
+      });
+  });
+}

examples/demos/webgpu/polygon_fill.ts

@@ -0,0 +1,83 @@
+import { PolygonLayer, Scene } from '@antv/l7';
+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',
+    enableWebGPU: true,
+    shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+    }),
+  });
+
+  const data = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {
+          testOpacity: 0.8,
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              [113.8623046875, 30.031055426540206],
+              [116.3232421875, 30.031055426540206],
+              [116.3232421875, 31.090574094954192],
+              [113.8623046875, 31.090574094954192],
+              [113.8623046875, 30.031055426540206],
+            ],
+          ],
+        },
+      },
+    ],
+  };
+
+  const data2 = {
+    type: 'FeatureCollection',
+    features: [
+      {
+        type: 'Feature',
+        properties: {
+          testOpacity: 0.8,
+        },
+        geometry: {
+          type: 'Polygon',
+          coordinates: [
+            [
+              [113.8623046875, 30.031055426540206],
+              [115.3232421875, 30.031055426540206],
+              [115.3232421875, 31.090574094954192],
+              [113.8623046875, 31.090574094954192],
+              [113.8623046875, 30.031055426540206],
+            ],
+          ],
+        },
+      },
+    ],
+  };
+
+  const layer = new PolygonLayer({
+    autoFit: true,
+  })
+    .source(data)
+    .shape('fill')
+    .color('red')
+    // .active(true)
+    .style({
+      opacity: 0.5,
+      opacityLinear: {
+        enable: true,
+        dir: 'in',
+      },
+    });
+
+  scene.on('loaded', () => {
+    scene.addLayer(layer);
+  });
+}

examples/demos/webgpu/polygon_texture.ts

@@ -0,0 +1,46 @@
+import { PolygonLayer, Scene } from '@antv/l7';
+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',
+    enableWebGPU: true,
+    shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
+    map: new allMap[option.map || 'Map']({
+      style: 'light',
+      center: [121.434765, 31.256735],
+      zoom: 14.83,
+    }),
+  });
+
+  scene.on('loaded', () => {
+    fetch('https://geo.datav.aliyun.com/areas_v3/bound/330000.json')
+      .then((res) => res.json())
+      .then((data) => {
+        const provincelayerTop = new PolygonLayer({
+          autoFit: true,
+        })
+          .source(data)
+          .size(1000)
+          .shape('extrude')
+          .size(10000)
+          .color('#0DCCFF')
+          //   .active({
+          //     color: 'rgb(100,230,255)',
+          //   })
+          .style({
+            heightfixed: true,
+            // pickLight: true,
+            mapTexture:
+              'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*bm0eRKOCcNoAAAAAAAAAAAAADmJ7AQ/original',
+            // mapTexture:'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3UcORbAv_zEAAAAAAAAAAAAADmJ7AQ/original',
+            // raisingHeight: 10000,
+            opacity: 0.8,
+            // sidesurface: false,
+          });
+        scene.addLayer(provincelayerTop);
+        // scene.startAnimate();
+      });
+  });
+}

packages/layers/src/line/models/line.ts

@@ -3,19 +3,13 @@ import type {
   IEncodeFeature,
   ILayerConfig,
   IModel,
-  ITexture2D} from '@antv/l7-core';
-import {
-  AttributeType,
-  gl
+  ITexture2D,
 } from '@antv/l7-core';
+import { AttributeType, gl } from '@antv/l7-core';
 import { LineTriangulation, rgb2arr } from '@antv/l7-utils';
 import BaseModel from '../../core/BaseModel';
-import type {
-  ILineLayerStyleOptions} from '../../core/interface';
-import {
-  LinearDir,
-  TextureBlend,
-} from '../../core/interface';
+import type { ILineLayerStyleOptions } from '../../core/interface';
+import { LinearDir, TextureBlend } from '../../core/interface';
 // import { LineTriangulation } from '../../core/triangulation';
 
 import { ShaderLocation } from '../../core/CommonStyleAttribute';
@@ -269,7 +263,7 @@ export default class LineModel extends BaseModel {
         },
       },
     });
-  
+
     this.styleAttributeService.registerStyleAttribute({
       name: 'uv',
       type: AttributeType.Attribute,