Skip to content

Commit d5e6e0a

Browse files
roamzhenroamzhen
committedJul 11, 2024
(feat): 3ggs 切换wasm
1 parent fd34c54 commit d5e6e0a

File tree

11 files changed

+810
-107
lines changed

11 files changed

+810
-107
lines changed
 

‎miniprogram/packageAPI/pages/ar/gaussian-splatting/gaussian-splatting-ar.js

+93-21
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ Component({
2222
heightScale: 1, // canvas高度缩放值
2323
renderByXRFrame: false, // 是否使用 xr-frame渲染
2424
renderByWebGL2: true, // 是否使用WebGL2渲染
25-
workerOn: true,
26-
maxGaussians: 50000,
25+
workerOn: false,
26+
wasmOn: true,
27+
splatInited: false,
28+
maxGaussians: 200000,
2729
},
2830
lifetimes: {
2931
/**
@@ -242,13 +244,19 @@ Component({
242244
// console.log('创建 worker 共享内存', this.sabPositions, this.sabOpacities, this.sabCov3Da, this.sabCov3Db, this.sabcolors)
243245

244246
// 初始化 worker 相关
245-
this.initWorker(info, {
246-
// sabPositions: this.sabPositions,
247-
// sabOpacities: this.sabOpacities,
248-
// sabCov3Da: this.sabCov3Da,
249-
// sabCov3Db: this.sabCov3Db,
250-
// sabcolors: this.sabcolors,
251-
});
247+
if (this.data.workerOn) {
248+
this.initWorker(info, {
249+
// sabPositions: this.sabPositions,
250+
// sabOpacities: this.sabOpacities,
251+
// sabCov3Da: this.sabCov3Da,
252+
// sabCov3Db: this.sabCov3Db,
253+
// sabcolors: this.sabcolors,
254+
});
255+
}
256+
257+
if (this.data.wasmOn) {
258+
this.initWASM(info);
259+
}
252260

253261
} else {
254262
wx.hideLoading();
@@ -280,19 +288,18 @@ Component({
280288
// worker 初始化 回调
281289
console.log('[Worker callback] gaussianSplatting init callBack', res)
282290

283-
this.camera.isWorkerInit = true;
284-
this.camera.updateByVK();
291+
this.camera.worker = this.worker;
285292

293+
this.camera.updateByVK();
286294

287295
} else if (res.type === 'execFunc_sort') {
288296
// worker 排序 回调
289297
// console.log(res)
290298

291-
this.camera.isWorkerSorting = false;
299+
this.camera.isSorting = false;
292300

293301
const data = res.result.data
294302

295-
const start = new Date().getTime()
296303

297304
const gl = this.gl
298305

@@ -313,7 +320,6 @@ Component({
313320
const cov3Db = new Float32Array(data.cov3Db);
314321
const colors = new Float32Array(data.colors);
315322

316-
317323
updateBuffer(this.splat.buffers.center, positions)
318324
updateBuffer(this.splat.buffers.opacity, opacities)
319325
updateBuffer(this.splat.buffers.covA, cov3Da)
@@ -323,10 +329,6 @@ Component({
323329
// 设定绘制的高斯球数量
324330
this.gaussiansCount = data.gaussiansCount;
325331

326-
const end = new Date().getTime()
327-
// const sortTime = `${((end - start)/1000).toFixed(3)}s`
328-
// console.log(`updateBuffer ${sortTime}`)
329-
330332
// this.canvas.requestAnimationFrame(this.requestRender.bind(this));
331333

332334
// console.log('execFunc_sort end')
@@ -339,6 +341,69 @@ Component({
339341
params: [plyInfo, config]
340342
})
341343
},
344+
async initWASM(plyInfo){
345+
// 初始化 WASM
346+
this.wasm = await init("packageAPI/pages/ar/gaussian-splatting/wasm/out/gs_sort_bg.wasm");
347+
// 共享内存
348+
const memory = this.wasm.memory;
349+
350+
console.log('wasm', this.wasm)
351+
352+
const gaussianCount = plyInfo.count
353+
354+
console.log('gaussianCount', gaussianCount)
355+
356+
const position_src = plyInfo.positions
357+
const color_src = plyInfo.colors
358+
const opacity_src = plyInfo.opacities
359+
const cov_src = plyInfo.cov3Ds
360+
361+
const gaussian = Gaussian.new(gaussianCount, position_src, color_src, opacity_src, cov_src)
362+
this.gaussianWASM = gaussian;
363+
364+
console.log('gaussian', gaussian)
365+
366+
this.vpmWASM = new Float32Array(memory.buffer, gaussian.vpm_ptr, 16)
367+
this.positionWASM = new Float32Array(memory.buffer, gaussian.positions_ptr, gaussianCount * 3)
368+
this.colorWASM = new Float32Array(memory.buffer, gaussian.colors_ptr, gaussianCount * 3)
369+
this.opacitiesWASM = new Float32Array(memory.buffer, gaussian.opacities_ptr, gaussianCount)
370+
this.cov3DaWASM = new Float32Array(memory.buffer, gaussian.cov_a_ptr, gaussianCount * 3)
371+
this.cov3DbWASM = new Float32Array(memory.buffer, gaussian.cov_b_ptr, gaussianCount * 3)
372+
373+
this.camera.wasm = this.wasm
374+
this.camera.gaussian = this.gaussianWASM
375+
this.camera.vpmWASM = this.vpmWASM
376+
377+
// 绑定更新回调
378+
this.camera.wasmUpdateCallback = () => {
379+
380+
// console.log('wasm vpm', this.vpmWASM);
381+
// console.log('wasm positionF32', this.positionWASM )
382+
// console.log('wasm opacitiesF32', this.opacitiesWASM )
383+
// console.log('wasm colorF32', this.colorWASM )
384+
// console.log('wasm cov3DaF32', this.cov3DaWASM )
385+
// console.log('wasm cov3DbF32', this.cov3DbWASM )
386+
387+
const gl = this.gl
388+
389+
const updateBuffer = (buffer, data) => {
390+
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
391+
gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW)
392+
}
393+
394+
updateBuffer(this.splat.buffers.center, this.positionWASM)
395+
updateBuffer(this.splat.buffers.color, this.colorWASM)
396+
updateBuffer(this.splat.buffers.opacity, this.opacitiesWASM)
397+
updateBuffer(this.splat.buffers.covA, this.cov3DaWASM)
398+
updateBuffer(this.splat.buffers.covB, this.cov3DbWASM)
399+
400+
this.gaussiansCount = this.renderCount;
401+
402+
}
403+
404+
this.camera.updateByVK();
405+
406+
},
342407
// 后续为 webGL2 相关，为了方便开发，先放在一起
343408
initWebGL2() {
344409
console.log('== InitWebGL2 start ==')
@@ -350,9 +415,10 @@ Component({
350415
up: [0, 1.0, 0.0],
351416
target: [0, 0, 0],
352417
camera: [Math.PI/2, Math.PI/2, 10], // theta phi radius
418+
workerOn: this.data.workerOn,
419+
wasmOn: this.data.wasmOn,
353420
}
354-
this.camera = new CameraWebGL(gl, this.worker, cameraParameters)
355-
421+
this.camera = new CameraWebGL(gl, cameraParameters)
356422
// Setup Instance Mesh
357423
this.cubeInstance = new CubeInstanceWebGL(gl)
358424

@@ -730,6 +796,10 @@ Component({
730796

731797
// 开始处理 ply 资源
732798
this.initPLY(id);
799+
800+
this.setData({
801+
splatInited: true
802+
})
733803
}
734804
},
735805
changeMaxGaussianCount(e) {
@@ -741,10 +811,12 @@ Component({
741811
},
742812
switchWorker(e) {
743813
this.setData({
744-
workerOn: e.detail.value
814+
workerOn: e.detail.value,
815+
wasmOn: !e.detail.value
745816
})
746817

747818
this.camera.setWorkerOn(this.data.workerOn);
819+
this.camera.setWasmOn(this.data.wasmOn)
748820

749821
console.log('switch WorkerOn:', this.data.workerOn);
750822
}

‎miniprogram/packageAPI/pages/ar/gaussian-splatting/gaussian-splatting-ar.wxml

+8-8
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,22 @@
2020
<view class="control-wrap">
2121
<view class="title">经典 Splat</view>
2222
<view class="block">
23-
<button class="btn" type="primary" data-id="room" bindtap="onTapControl">房间</button>
24-
<button class="btn" type="primary" data-id="garden" bindtap="onTapControl">花园</button>
25-
<button class="btn" type="primary" data-id="stump" bindtap="onTapControl">树桩</button>
23+
<button class="btn" type="primary" disabled="{{splatInited}}" data-id="room" bindtap="onTapControl">房间</button>
24+
<button class="btn" type="primary" disabled="{{splatInited}}" data-id="garden" bindtap="onTapControl">花园</button>
25+
<button class="btn" type="primary" disabled="{{splatInited}}" data-id="stump" bindtap="onTapControl">树桩</button>
2626
</view>
2727
<view class="title">自制 Splat</view>
2828
<view class="block">
29-
<button class="btn" type="primary" data-id="oneflower" bindtap="onTapControl">盆栽</button>
30-
<button class="btn" type="primary" data-id="usj" bindtap="onTapControl">USJ马里奥</button>
31-
<button class="btn" type="primary" data-id="sakura" bindtap="onTapControl">樱花小道</button>
29+
<button class="btn" type="primary" disabled="{{splatInited}}" data-id="oneflower" bindtap="onTapControl">盆栽</button>
30+
<button class="btn" type="primary" disabled="{{splatInited}}" data-id="usj" bindtap="onTapControl">USJ马里奥</button>
31+
<button class="btn" type="primary" disabled="{{splatInited}}" data-id="sakura" bindtap="onTapControl">樱花小道</button>
3232
<!-- <button class="btn" type="primary" data-id="0517cruch" bindtap="onTapControl">教堂花园</button> -->
3333
</view>
3434
</view>
3535
<view class="input-wrap">
3636
<view class="title">最大高斯球数</view>
37-
<slider class="slider" bindchange="changeMaxGaussianCount" min="0" max="1200000" value="{{maxGaussians}}" show-value/>
38-
<view class="checkbox-wrap"><p class="words">是否开启 worker 排序</p><switch class="checkbox" type="checkbox" checked="{{workerOn}}" bindchange="switchWorker"/></view>
37+
<slider disabled="{{splatInited}}" class="slider" bindchange="changeMaxGaussianCount" min="0" max="1200000" value="{{maxGaussians}}" show-value/>
38+
<view class="checkbox-wrap"><p class="words">是否开启 worker 排序</p><switch disabled="{{splatInited}}" class="checkbox" type="checkbox" checked="{{workerOn}}" bindchange="switchWorker"/></view>
3939

4040

4141
</view>

0 commit comments

Comments
 (0)