Skip to content

Commit 573c738

Browse files
fuzhennfuzhenn
committed
implement gltf-lit of VectorTileLayer on webgpu
1 parent b3201bb commit 573c738

File tree

14 files changed

+1595
-76
lines changed

14 files changed

+1595
-76
lines changed

‎debug/gl/resources/alien.gltf

Lines changed: 1387 additions & 0 deletions
Large diffs are not rendered by default.

‎debug/gl/vt-gltf-lit.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset='UTF-8' />
4+
<meta name='viewport' content='width=device-width, initial-scale=1' />
5+
<title>vt-gltf-lit</title>
6+
<style type='text/css'>
7+
html,
8+
body {
9+
width: 100%;
10+
height: 100%;
11+
margin: 0px;
12+
}
13+
14+
.container {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
</style>
19+
<link rel="stylesheet" href="/maptalks/dist/maptalks.css">
20+
<script type="text/javascript" src="/maptalks/dist/maptalks.js"></script>
21+
<script type="text/javascript" src="/maptalks-work/packages/gl/dist/maptalksgl.js"></script>
22+
<script type="text/javascript" src="/maptalks-work/packages/vt/dist/maptalks.vt.js"></script>
23+
<!-- <script type="text/javascript" src="https://unpkg.com/maptalks-gl/dist/maptalks-gl.js"></script> -->
24+
<!-- <script type="text/javascript" src="/maptalks/dist/maptalks.js"></script>
25+
<script type="text/javascript" src="/gl/packages/gl/dist/maptalksgl.js"></script>
26+
<script type="text/javascript" src="/gl/packages/vt/dist/maptalks.vt.js"></script> -->
27+
28+
<body>
29+
<div id="map" class="container"></div>
30+
31+
<script>
32+
const map = new maptalks.Map("map", {
33+
center: [-73.98795379493208, 40.72100197835064],
34+
zoom: 19,
35+
bearing: -69,
36+
renderer: 'gpu'
37+
});
38+
39+
/**start**/
40+
const vt = new maptalks.VectorTileLayer("vt", {
41+
urlTemplate: "http://tile.maptalks.com/test/planet-single/{z}/{x}/{y}.mvt",
42+
});
43+
44+
const style = {
45+
style: [{
46+
filter: ["all",
47+
["==", "$layer", "building"],
48+
["==", "$type", "Polygon"]
49+
],
50+
renderPlugin: {
51+
type: "gltf-lit",
52+
dataConfig: {
53+
type: "native-point"
54+
},
55+
sceneConfig: {
56+
gltfAnimation: {
57+
"enable": true
58+
}
59+
}
60+
},
61+
symbol: {
62+
url: "./resources/alien.gltf",
63+
scaleX: 30,
64+
scaleY: 30,
65+
scaleZ: 30
66+
}
67+
}]
68+
};
69+
vt.setStyle(style);
70+
/**end**/
71+
72+
const groupLayer = new maptalks.GroupGLLayer("group", [vt]);
73+
groupLayer.addTo(map);
74+
</script>
75+
</body>
76+
77+
</html>

‎packages/reshader.gl/src/Geometry.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1255,9 +1255,12 @@ function createGPUBuffer(device, data, usage, label) {
12551255
if (Array.isArray(data[0])) {
12561256
data = flatten(data);
12571257
}
1258+
if (Array.isArray(data)) {
1259+
data = new Float32Array(data);
1260+
}
12581261
const ctor = data.constructor;
12591262
// f32 in default
1260-
const byteLength = Array.isArray(data) ? data.length * 4 : data.byteLength;
1263+
const byteLength = data.byteLength;
12611264
// mappedAtCreation requires size is a multiplier of 4
12621265
// https://github.com/gpuweb/gpuweb/issues/5105
12631266
const size = roundUp(byteLength, 4);

‎packages/reshader.gl/src/InstancedMesh.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,17 +218,26 @@ export default class InstancedMesh extends Mesh {
218218
}
219219

220220
getBufferDescriptor(vertexInfo) {
221+
const attrInfos = [];
222+
for (const p in vertexInfo) {
223+
const info = vertexInfo[p];
224+
attrInfos[info.location] = info;
225+
}
221226
const data = this.instancedData;
222227
const bufferDesc = [];
223-
for (const p in data) {
228+
for (let i = 0; i < attrInfos.length; i++) {
229+
if (!attrInfos[i]) {
230+
continue;
231+
}
232+
const p = attrInfos[i].geoAttrName;
224233
const attr = data[p];
225234
if (!attr) {
226235
continue;
227236
}
228237
const info = vertexInfo[p];
229238
const desc = getAttrBufferDescriptor(attr, info);
230239
desc.stepMode = 'instance';
231-
bufferDesc.push(desc);
240+
bufferDesc[i] = desc;
232241
}
233242
return bufferDesc;
234243
}

‎packages/reshader.gl/src/pbr/wgsl/standard_vert.wgsl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ struct VertexOutput {
9898
@location($o) vTangentViewPos: vec3f,
9999
@location($o) vTangentFragPos: vec3f,
100100
#endif
101-
};
101+
}
102+
102103

103104
struct ShaderUniforms {
104105
cameraPosition: vec3f,
@@ -186,6 +187,7 @@ fn transposeMat3(inMat: mat3x3f) -> mat3x3f {
186187
);
187188
}
188189

190+
189191
@vertex
190192
fn main(input: VertexInput) -> VertexOutput {
191193
var output: VertexOutput;

‎packages/reshader.gl/src/picking/FBORayPicking.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,6 +780,10 @@ export default class FBORayPicking {
780780
return this._vert;
781781
}
782782

783+
getWGSLPickingVert() {
784+
return this._wgslVert;
785+
}
786+
783787
getUniformDeclares() {
784788
return this._uniforms;
785789
}

‎packages/reshader.gl/src/webgpu/CommandBuilder.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,8 +219,8 @@ export default class CommandBuilder {
219219
const info = inputMapping[attr];
220220
if (info) {
221221
vertexInfo[attr] = {
222-
location: info.location,
223222
geoAttrName: name,
223+
location: info.location,
224224
itemSize: getItemSize(info.type)
225225
};
226226
}
@@ -230,6 +230,7 @@ export default class CommandBuilder {
230230
for (const name in data) {
231231
if (inputMapping[name]) {
232232
vertexInfo[name] = {
233+
geoAttrName: name,
233234
location: inputMapping[name].location,
234235
itemSize: getItemSize(inputMapping[name].type)
235236
};
@@ -309,7 +310,12 @@ export default class CommandBuilder {
309310
const buffers = mesh.geometry.getBufferDescriptor(vertInfo);
310311
if (mesh instanceof InstancedMesh) {
311312
const instanceBuffers = (mesh as InstancedMesh).getBufferDescriptor(vertInfo);
312-
buffers.push(...instanceBuffers);
313+
for (let i = 0; i < instanceBuffers.length; i++) {
314+
if (!instanceBuffers[i]) {
315+
continue;
316+
}
317+
buffers[i] = instanceBuffers[i];
318+
}
313319
}
314320
const pipelineLayout = device.createPipelineLayout({
315321
label: this.name + '-pipelinelayout',

‎packages/vt/src/layer/plugins/painters/GLTFMixin.js

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { setUniformFromSymbol, createColorSetter, isNumber, extend } from '../Ut
33
import { getCentiMeterScale, isNil } from '../../../common/Util';
44
import { isFunctionDefinition, interpolated } from '@maptalks/function-type';
55
import { getVectorPacker } from '../../../packer/inject';
6+
import pickingVert from './glsl/mesh-picking.vert';
7+
import pickingWGSLVert from './wgsl/mesh-picking.wgsl';
68

79
const { PackUtil } = getVectorPacker();
810

@@ -20,24 +22,6 @@ const DEFAULT_MARKER_FILL = [1, 1, 1, 1];
2022
const TEMP_MATRIX = [];
2123

2224
const Y_TO_Z = [1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1];
23-
24-
const pickingVert = `
25-
attribute vec3 aPosition;
26-
uniform mat4 projViewModelMatrix;
27-
uniform mat4 modelMatrix;
28-
uniform mat4 positionMatrix;
29-
//引入fbo picking的vert相关函数
30-
#include <fbo_picking_vert>
31-
#include <get_output>
32-
void main()
33-
{
34-
mat4 localPositionMatrix = getPositionMatrix();
35-
vec4 localPosition = getPosition(aPosition);
36-
37-
gl_Position = projViewModelMatrix * localPositionMatrix * localPosition;
38-
//传入gl_Position的depth值
39-
fbo_picking_setData(gl_Position.w, true);
40-
}`;
4125
// TODO 缺少 updateSymbol 的支持
4226
const GLTFMixin = Base =>
4327

@@ -48,7 +32,7 @@ const GLTFMixin = Base =>
4832
this.scene.sortFunction = this.sortByCommandKey;
4933
const fetchOptions = sceneConfig.fetchOptions || {};
5034
fetchOptions.referrer = window && window.location.href;
51-
this._gltfManager = new reshader.GLTFManager(regl, {
35+
this._gltfManager = regl.gltfManager = regl.gltfManager || new reshader.GLTFManager(regl, {
5236
fetchOptions,
5337
urlModifier: (url) => {
5438
const modifier = layer.getURLModifier();
@@ -515,7 +499,7 @@ const GLTFMixin = Base =>
515499
setInstanceData('instance_vectorA', i, mat, 0);
516500
setInstanceData('instance_vectorB', i, mat, 1);
517501
setInstanceData('instance_vectorC', i, mat, 2);
518-
instanceData['aPickingId'][i] = i;
502+
instanceData['aPickingId'][i] = aPickingId[i];
519503
}
520504
vec3.set(position, cx, cy, cz);
521505
return position;
@@ -713,6 +697,10 @@ const GLTFMixin = Base =>
713697
return pickingVert;
714698
}
715699

700+
getWGSLPickingVert() {
701+
return pickingWGSLVert;
702+
}
703+
716704
deleteMesh(meshes) {
717705
if (!meshes) {
718706
return;

‎packages/vt/src/layer/plugins/painters/Painter.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { getVectorPacker } from '../../../packer/inject';
44
import { isFunctionDefinition, interpolated, piecewiseConstant } from '@maptalks/function-type';
55
import { extend, copyJSON, isNil, hasOwn } from '../Util';
66
import outlineFrag from './glsl/outline.frag';
7+
import outlineWGSLFrag from './wgsl/outline_frag.wgsl';
78
import { updateOneGeometryFnTypeAttrib } from './util/fn_type_util';
89
import { inTerrainTile } from './util/line_offset';
910
import deepEuqal from 'fast-deep-equal';
@@ -1098,6 +1099,7 @@ class Painter {
10981099
this._outlineShaders = [];
10991100
for (let i = 0; i < this.picking.length; i++) {
11001101
const pickingVert = this.picking[i].getPickingVert();
1102+
const wgslPickingVert = this.picking[i].getPickingWGSLVert();
11011103
const defines = {
11021104
'ENABLE_PICKING': 1,
11031105
'HAS_PICKING_ID': 1
@@ -1109,6 +1111,8 @@ class Painter {
11091111
this._outlineShaders[i] = new reshader.MeshShader({
11101112
vert: pickingVert,
11111113
frag: outlineFrag,
1114+
wgslVert: wgslPickingVert,
1115+
wgslFrag: outlineWGSLFrag,
11121116
uniforms,
11131117
defines,
11141118
extraCommandProps: {

‎packages/vt/src/layer/plugins/painters/PhongPainter.js

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { reshader } from '@maptalks/gl';
33
import { mat4 } from '@maptalks/gl';
44
import { extend, hasOwn } from '../Util';
55
import MeshPainter from './MeshPainter';
6+
import pickingVert from './glsl/mesh-picking.vert';
7+
import pickingWGSLVert from './wgsl/mesh-picking.wgsl';
68

79
class PhongPainter extends MeshPainter {
810

@@ -70,6 +72,7 @@ class PhongPainter extends MeshPainter {
7072

7173
const pickingConfig = {
7274
vert: this.getPickingVert(),
75+
wgslVert: this.getPickingWGSLVert(),
7376
uniforms: [
7477
'projViewMatrix',
7578
'modelMatrix',
@@ -196,34 +199,11 @@ class PhongPainter extends MeshPainter {
196199
}
197200

198201
getPickingVert() {
199-
// return `
200-
// attribute vec3 aPosition;
201-
// uniform mat4 projViewModelMatrix;
202-
// #include <fbo_picking_vert>
203-
// void main() {
204-
// vec4 pos = vec4(aPosition, 1.0);
205-
// gl_Position = projViewModelMatrix * pos;
206-
// fbo_picking_setData(gl_Position.w, true);
207-
// }
208-
// `;
209-
return `
210-
attribute vec3 aPosition;
211-
uniform mat4 projViewModelMatrix;
212-
uniform mat4 modelMatrix;
213-
uniform mat4 positionMatrix;
214-
//引入fbo picking的vert相关函数
215-
#include <fbo_picking_vert>
216-
#include <get_output>
217-
void main()
218-
{
219-
mat4 localPositionMatrix = getPositionMatrix();
220-
vec4 localPosition = getPosition(aPosition);
221-
222-
gl_Position = projViewModelMatrix * localPositionMatrix * localPosition;
223-
//传入gl_Position的depth值
224-
fbo_picking_setData(gl_Position.w, true);
225-
}
226-
`;
202+
return pickingVert;
203+
}
204+
205+
getPickingWGSLVert() {
206+
return pickingWGSLVert;
227207
}
228208

229209
_getLightUniformValues() {

0 commit comments

Comments
 (0)