Skip to content

Commit

Permalink
支持 WebGPU 渲染 (#2225)
Browse files Browse the repository at this point in the history 
* fix: webgpu point fill example

* fix: adjust order of varying in fill image shader

* fix: remove redundant varying in extrude vert shader

* fix: recreate main & depth rt when resizing

* fix: load image in webgpu

* fix: heatmap

* fix: heatmap grid3d in webgpu

* fix: heatmap grid3d in webgpu

* fix: line

* fix: change readpixel from sync to async

* fix: resize picking fbo

* fix: picking in webgpu

* fix: arc line layer

* fix: use diagnosticDerivativeUniformity in water demo

* fix: add render cache

* fix: point text layer

* chore: update point text layer snapshot

* fix: raster layer

* chore: add screenshot callback on test cases

* chore: sleep

* chore: cancel point image test case for now
  • Loading branch information
@xiaoiver
xiaoiver authored Jan 9, 2024
1 parent 96fc587 commit f699046
Show file tree
Hide file tree
Showing 88 changed files with 2,674 additions and 1,189 deletions.
52 changes: 31 additions & 21 deletions __tests__/e2e/snapshot.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
import { chromium, devices } from 'playwright';
import { TestDemoList } from './tests';
import { sleep } from './utils/sleep';
import './utils/useSnapshotMatchers';
import { TestDemoList } from './tests'
describe('Snapshots', () => {
const demosFlatList: Array<{
type: string;
name: string;
sleepTime: number;
}> = [];
TestDemoList.filter(g=>g.snapshots!==false).forEach((groups) => {
TestDemoList.filter((g) => g.snapshots !== false).forEach((groups) => {
const { type, demos } = groups;

demos.filter(g=>g.snapshots!==false).map((demo) => {
const { name, sleepTime = 1.5 } = demo;
demosFlatList.push({
type,
name,
sleepTime
})

})
})

demos
.filter((g) => g.snapshots !== false)
.map((demo) => {
const { name, sleepTime = 1.5 } = demo;
demosFlatList.push({
type,
name,
sleepTime,
});
});
});
demosFlatList.map((demo) => {
const { name, sleepTime = 1.5,type } = demo;
const { name, sleepTime = 1.5, type } = demo;
const key = `${type}_${name}`;

it(key, async () => {
Expand All @@ -34,9 +35,21 @@ describe('Snapshots', () => {
const page = await context.newPage();
// Go to test page served by vite devServer.
const url = `http://localhost:8080/?type=${type}&name=${name}`;
await page.goto(url);

await sleep(sleepTime * 1000);
let resolveReadyPromise: () => void;
const readyPromise = new Promise((resolve) => {
resolveReadyPromise = () => {
resolve(this);
};
});

await context.exposeFunction('screenshot', async () => {
resolveReadyPromise();
});

await page.goto(url);
await readyPromise;
await sleep(2000);

// Chart already rendered, capture into buffer.
const buffer = await page.locator('canvas').screenshot();
Expand All @@ -51,8 +64,5 @@ describe('Snapshots', () => {
await browser.close();
}
});

})


})
});
});
Binary file added __tests__/e2e/snapshots/Point_text.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 65 additions & 65 deletions __tests__/e2e/tests.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,37 @@ export const TestDemoList: Array<{
},
{
name: 'fill',
sleepTime: 1,
},
// {
// name: 'image',
// },
{
name: 'image',
snapshots: false,
sleepTime: 1,
name: 'text',
},
],
},
{
type: 'Line',
snapshots: false,
demos: [
{
name: 'arc',
},
{
name: 'arc_plane',
},
// {
// type: 'Line',
// snapshots: false,
// demos: [
// {
// name: 'arc',
// },
// {
// name: 'arc_plane',
// },

{
name: 'flow',
},
{
name: 'arc',
},
{
name: 'dash',
},
],
},
// {
// name: 'flow',
// },
// {
// name: 'arc',
// },
// {
// name: 'dash',
// },
// ],
// },
{
type: 'Polygon',
demos: [
Expand All @@ -75,37 +75,37 @@ export const TestDemoList: Array<{
},
],
},
{
type: 'HeatMap',
snapshots: false,
demos: [
{
name: 'grid',
sleepTime: 2,
},
{
name: 'hexagon',
sleepTime: 2,
},
{
name: 'normal',
sleepTime: 2,
},
],
},
{
type: 'Raster',
snapshots: false,
demos: [
{
name: 'tiff',
sleepTime: 2,
},
{
name: 'image',
},
],
},
// {
// type: 'HeatMap',
// snapshots: false,
// demos: [
// {
// name: 'grid',
// sleepTime: 2,
// },
// {
// name: 'hexagon',
// sleepTime: 2,
// },
// {
// name: 'normal',
// sleepTime: 2,
// },
// ],
// },
// {
// type: 'Raster',
// snapshots: false,
// demos: [
// {
// name: 'tiff',
// sleepTime: 2,
// },
// {
// name: 'image',
// },
// ],
// },
{
type: 'Mask',
demos: [
Expand All @@ -122,13 +122,13 @@ export const TestDemoList: Array<{
},
],
},
{
type: 'Gallery',
demos: [
{
name: 'fujian',
sleepTime: 2,
},
],
},
// {
// type: 'Gallery',
// demos: [
// {
// name: 'fujian',
// sleepTime: 2,
// },
// ],
// },
];
118 changes: 58 additions & 60 deletions examples/demos/heatmap/grid.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,65 @@ import { HeatmapLayer, 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,
map: new allMap[option.map || 'Map']({
style: 'light',
center: [121.434765, 31.256735],
zoom: 14.83,
}),
});

const scene = new Scene({
id: 'map',
renderer: option.renderer,
map: new allMap[option.map || 'Map']({
style: 'light',
center: [121.434765, 31.256735],
zoom: 14.83
})
});

scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
)
.then((res) => res.json())
.then((data) => {
const layer = new HeatmapLayer({autoFit:true})
.source(data, {
transforms: [
{
type: 'grid',
size: 150000,
field: 'mag',
method: 'sum',
},
],
})
.size('sum', sum => {
return sum * 2000;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
})
.color(
'count',
[
'#0B0030',
'#100243',
'#100243',
'#1B048B',
'#051FB7',
'#0350C1',
'#0350C1',
'#0072C4',
'#0796D3',
'#2BA9DF',
'#30C7C4',
'#6BD5A0',
'#A7ECB2',
'#D0F4CA'
].reverse()
);
scene.addLayer(layer);

});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
)
.then((res) => res.json())
.then((data) => {
const layer = new HeatmapLayer({ autoFit: true })
.source(data, {
transforms: [
{
type: 'grid',
size: 150000,
field: 'mag',
method: 'sum',
},
],
})
.size('sum', (sum) => {
return sum * 2000;
})
.shape('hexagonColumn')
.style({
coverage: 0.8,
angle: 0,
})
.active(true)
.color(
'count',
[
'#0B0030',
'#100243',
'#100243',
'#1B048B',
'#051FB7',
'#0350C1',
'#0350C1',
'#0072C4',
'#0796D3',
'#2BA9DF',
'#30C7C4',
'#6BD5A0',
'#A7ECB2',
'#D0F4CA',
].reverse(),
);
scene.addLayer(layer);
});

});
}
Loading

0 comments on commit f699046

Please sign in to comment.