Skip to content

Commit 5fb6607

Browse files
fuzhennfuzhenn
committed
implementation of GLTFLayer on webgpu and move mesh picking shaders to ShaderLib
1 parent 573c738 commit 5fb6607

File tree

19 files changed

+152
-176
lines changed

19 files changed

+152
-176
lines changed

‎debug/gl/gltf.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset='UTF-8' />
4+
<meta name='viewport' content='width=device-width, initial-scale=1' />
5+
<title>gltf</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/layer-gltf/dist/maptalks.gltf.js"></script>
23+
24+
<body>
25+
<div id="map" class="container"></div>
26+
27+
<script>
28+
const map = new maptalks.Map("map", {
29+
center: [-73.98795379493208, 40.72100197835064],
30+
zoom: 16,
31+
pitch: 70,
32+
renderer: 'gpu'
33+
});
34+
35+
const symbol = {
36+
url: "./resources/alien.gltf",
37+
modelHeight: 240, //model height,Unit is meters
38+
scaleX: 1,
39+
scaleY: 1,
40+
scaleZ: 1,
41+
rotationZ: 180
42+
};
43+
44+
const gltfLayer = new maptalks.GLTFLayer("gltf");
45+
const gltfMarker = new maptalks.GLTFMarker(map.getCenter(), {
46+
symbol,
47+
});
48+
gltfLayer.addGeometry(gltfMarker);
49+
50+
const groupLayer = new maptalks.GroupGLLayer("group", [gltfLayer]);
51+
groupLayer.addTo(map);
52+
</script>
53+
</body>
54+
55+
</html>

‎packages/analysis/src/CrossCutAnalysis.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import Analysis from './Analysis';
22
import * as maptalks from 'maptalks';
33
import { reshader, mat4 } from '@maptalks/gl';
44
import CrossCutPass from './pass/CrossCutPass';
5-
import pickingVert from './pass/glsl/picking.vert';
65
import along from '@turf/along';
76
import { lineString } from '@turf/helpers';
87
import buffer from '@turf/buffer';
98
import distance from '@turf/distance';
109

10+
const pickingVert = reshader.ShaderLib.get('mesh_picking_vert');
11+
const pickingWGSLVert = reshader.WgslShaderLib.get('mesh_picking').vert;
12+
1113
const DEFAULT_WATER_COLOR = [0.8451, 0.2588, 0.4863];
1214
const pvMatrix = [], pMatrix = [], vMatrix = [];
1315
export default class CrossCutAnalysis extends Analysis {
@@ -94,6 +96,7 @@ export default class CrossCutAnalysis extends Analysis {
9496
pickRenderer,
9597
{
9698
vert : pickingVert,
99+
wgslVert: pickingWGSLVert,
97100
uniforms : [
98101
{
99102
name : 'projViewModelMatrix',

‎packages/analysis/src/pass/CutAnalysisController.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { reshader, mat4, quat, vec3, vec2 } from '@maptalks/gl';
22
import partsModels from '../common/parts';
33
import { Util } from 'maptalks';
44
import { defined } from '../common/Util';
5-
import pickingVert from './glsl/picking.vert';
5+
6+
const pickingVert = reshader.ShaderLib.get('mesh_picking_vert');
7+
const pickingWGSLVert = reshader.WgslShaderLib.get('mesh_picking').vert;
68

79
const eyePosition = [0, 100000, 0];
810
const lookPosition = [0, 0, 0];
@@ -475,6 +477,7 @@ export default class CutAnalysisController {
475477
this.renderer,
476478
{
477479
vert : pickingVert,
480+
wgslVert: pickingWGSLVert,
478481
uniforms : [
479482
{
480483
name : 'projViewModelMatrix',

‎packages/analysis/src/pass/glsl/picking.vert

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎packages/layer-gltf/src/GLTFLayerRenderer.js

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import * as maptalks from 'maptalks';
22
import { defined } from './common/Util';
3-
import { createREGL, mat4, vec2, reshader, MaskRendererMixin } from '@maptalks/gl';
3+
import { mat4, vec2, reshader, MaskRendererMixin } from '@maptalks/gl';
44
import { intersectsBox } from 'frustum-intersects';
55
import SHADER_MAP from './common/ShaderMap';
6-
import pickingVert from './common/glsl/picking.vert';
76
import sceneVert from './common/glsl/sceneVert.vert';
87
import extentFrag from './common/glsl/extent.frag';
98
import GLTFWorkerConnection from './common/GLTFWorkerConnection';
109
import { loadGLTF } from './worker/';
1110
import MultiGLTFMarker from './MultiGLTFMarker';
1211

12+
const pickingVert = reshader.ShaderLib.get('mesh_picking_vert');
13+
const pickingWGSLVert = reshader.WgslShaderLib.get('mesh_picking').vert;
14+
1315
const uniformDeclares = [], tempBBox = [];
1416
const pointLineModes = ['points', 'lines', 'line strip', 'line loop'];
15-
class GLTFLayerRenderer extends MaskRendererMixin(maptalks.renderer.OverlayLayerCanvasRenderer) {
17+
class GLTFLayerRenderer extends MaskRendererMixin(maptalks.renderer.OverlayLayerGLRenderer) {
1618

1719
constructor(layer) {
1820
super(layer);
@@ -149,7 +151,7 @@ class GLTFLayerRenderer extends MaskRendererMixin(maptalks.renderer.OverlayLayer
149151
}
150152

151153
_setRenderMeshes(marker, timestamp) {
152-
const meshes = marker.getMeshes(this._gltfManager, this.regl, timestamp);
154+
const meshes = marker.getMeshes(this._gltfManager, this.regl || this.device, timestamp);
153155
const shader = marker.getShader();
154156
if (meshes.length) {
155157
this._renderMarkerList.push(marker);
@@ -278,67 +280,51 @@ class GLTFLayerRenderer extends MaskRendererMixin(maptalks.renderer.OverlayLayer
278280
return false;
279281
}
280282

281-
createContext() {
282-
const inGroup = this.canvas.gl && this.canvas.gl.wrap;
283-
if (inGroup) {
284-
this.gl = this.canvas.gl.wrap();
285-
this.regl = this.canvas.gl.regl;
286-
} else {
287-
const layer = this.layer;
288-
const attributes = layer.options.glOptions || {
289-
alpha: true,
290-
depth: true,
291-
//antialias: true,
292-
stencil : true
293-
};
294-
this.glOptions = attributes;
295-
this.gl = this.gl || this._createGLContext(this.canvas, attributes);
296-
this.regl = createREGL({
297-
gl : this.gl,
298-
optionalExtensions : [
299-
'ANGLE_instanced_arrays',
300-
'OES_element_index_uint',
301-
'OES_standard_derivatives',
302-
'OES_vertex_array_object',
303-
'OES_texture_half_float', 'OES_texture_half_float_linear',
304-
'OES_texture_float', 'OES_texture_float_linear',
305-
'WEBGL_depth_texture', 'EXT_shader_texture_lod',
306-
'WEBGL_compressed_texture_s3tc'
307-
]
308-
});
309-
}
310-
if (inGroup) {
311-
this.canvas.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
312-
}
313-
this.pickingFBO = this.canvas.pickingFBO || this.regl.framebuffer(this.canvas.width, this.canvas.height);
314-
this._gltfManager = this.regl.gltfManager = this.regl.gltfManager || this._createGLTFManager();
283+
initContext() {
284+
super.initContext();
285+
const { regl, device, reglGL } = this.context;
286+
const graphics = regl || device;
287+
this.regl = regl;
288+
this.gl = reglGL;
289+
this.device = device;
290+
291+
const isWebGPU = !!device;
292+
const fboOptions = {
293+
colorFormat: isWebGPU ? 'bgra8unorm' : 'rgba',
294+
depthStencil: true,
295+
width: this.canvas.width,
296+
height: this.canvas.height
297+
};
298+
this.canvas.pickingFBO = this.canvas.pickingFBO || graphics.framebuffer(fboOptions);
299+
this.pickingFBO = this.canvas.pickingFBO;
300+
this._gltfManager = graphics.gltfManager = graphics.gltfManager || this._createGLTFManager();
315301
// this._loginMarkerList();
316302
this._initRenderer();
317303
//检查是否有mesh、geometry未generate buffer过
318304
if (this._noBuffersMeshes) {
319305
this._noBuffersMeshes.forEach(mesh => {
320-
mesh.generateInstancedBuffers(this.regl);
306+
mesh.generateInstancedBuffers(this.regl || this.device);
321307
});
322308
}
323309
if (this._noBuffersGeometries) {
324310
this._noBuffersGeometries.forEach(geometry => {
325-
geometry.generateBuffers(this.regl);
311+
geometry.generateBuffers(this.regl || this.device);
326312
});
327313
}
328-
this.layer.fire('contextcreate', { regl: this.regl });
314+
this.layer.fire('contextcreate', { regl: this.regl, device: this.device });
329315
}
330316

331317
getGLTFManager() {
332318
return this._gltfManager;
333319
}
334320

335321
_createGLTFManager() {
336-
return new reshader.GLTFManager(this.regl);
322+
return new reshader.GLTFManager(this.regl || this.device);
337323
}
338324

339325
_initRenderer() {
340326
const map = this.layer.getMap();
341-
const renderer = new reshader.Renderer(this.regl);
327+
const renderer = new reshader.Renderer(this.regl || this.device);
342328
this.renderer = renderer;
343329
this._uniforms = {
344330
'projMatrix': map.projMatrix,
@@ -348,18 +334,28 @@ class GLTFLayerRenderer extends MaskRendererMixin(maptalks.renderer.OverlayLayer
348334
'cameraPosition' : map.cameraPosition,
349335
'altitudeScale': 1
350336
};
351-
reshader.pbr.PBRUtils.loginIBLResOnCanvas(this.canvas, this.regl, map);
352-
337+
reshader.pbr.PBRUtils.loginIBLResOnCanvas(this.canvas, this.regl || this.device, map);
338+
const projViewModelMatrix = [];
339+
const modelViewMatrix = [];
353340
this._picking = new reshader.FBORayPicking(
354341
renderer,
355342
{
343+
name: 'gltf-picking',
356344
vert : pickingVert,
345+
wgslVert: pickingWGSLVert,
357346
uniforms : [
347+
{
348+
name : 'projViewModelMatrix',
349+
type : 'function',
350+
fn : function (context, props) {
351+
return mat4.multiply(projViewModelMatrix, props['projViewMatrix'], props['modelMatrix']);
352+
}
353+
},
358354
{
359355
name : 'modelViewMatrix',
360356
type : 'function',
361357
fn : function (context, props) {
362-
return mat4.multiply([], props['viewMatrix'], props['modelMatrix']);
358+
return mat4.multiply(modelViewMatrix, props['viewMatrix'], props['modelMatrix']);
363359
}
364360
}
365361
]

‎packages/layer-gltf/src/common/glsl/picking.vert

Lines changed: 0 additions & 18 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ fn transposeMat3(inMat: mat3x3f) -> mat3x3f {
192192
fn main(input: VertexInput) -> VertexOutput {
193193
var output: VertexOutput;
194194

195-
let localPositionMatrix = getPositionMatrix(input, output, uniforms.positionMatrix);
195+
let localPositionMatrix = getPositionMatrix(input, &output, uniforms.positionMatrix);
196196

197197
#ifdef IS_LINE_EXTRUSION
198198
let linePosition = getLineExtrudePosition(vec3f(input.aPosition.xyz), input);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ export default class FBORayPicking {
258258
this._fbo = fbo;
259259
this._map = map;
260260
this._clearFbo(fbo);
261-
this._name = name;
261+
this._name = name || 'fboraypicking';
262262
this._vert = vert;
263263
this._wgslVert = wgslVert;
264264
this._uniforms = uniforms;

0 commit comments

Comments
 (0)