Cesium高级教程-3D高斯泼溅-Splat-高斯数据排序

Cesium高级教程-3D高斯泼溅-Splat-高斯数据排序

数据排序步骤

数据排序的基本逻辑包括以下步骤：创建WebWorker（在后台进行排序）、监听消息事件、设置高斯数据、更新视图矩阵、使用排序结果。前面的几个步骤在前面已经包含了，我们只需要再完成后面两个步骤即可。

更新视图矩阵

Worker中的排序操作基于相机视图矩阵，当更新该矩阵时就会触发排序操作，我们可以定时获取该矩阵的信息，然后更新到Worker中，这里通过场景的渲染事件来实时更新。

//更新视图矩阵
viewer.scene.preRender.addEventListener(e => {
…
worker.postMessage({ view: Cesium.Matrix4.toArray(viewProj) });
}, this)

现在操作场景（旋转）就会触发排序操作，我们可以先在接收到排序结果后通过console.log()打印看看。

worker.onmessage = (e) => {
if (e.data.texdata) {
const { texdata, texwidth, texheight } = e.data;
dataTexture = createTexture(texdata, texwidth, texheight);
} else if (e.data.depthIndex) {
const { depthIndex, viewProj } = e.data;
console.log("排序更新", depthIndex);
vertexCount = e.data.vertexCount;
}
};

更新索引数据

接下来需要将排序结果更新到索引（indexBuffer）中，默认情况下该Buffer是静态的，如果想要启用它的更新能力，我们首先要设置其为动态模式，后面才能在接收到排序结果时替换它的内容。

let indexBuffer = Cesium.Buffer.createVertexBuffer({
context: viewer.scene.context,
typedArray: initialIndices,
usage: Cesium.BufferUsage.DYNAMIC_DRAW
});

…

worker.onmessage = (e) => {
if (e.data.texdata) {
const { texdata, texwidth, texheight } = e.data;
dataTexture = createTexture(texdata, texwidth, texheight);
} else if (e.data.depthIndex) {
const { depthIndex, viewProj } = e.data;
console.log("排序更新", depthIndex);
…
}
};

示例效果可到 xt3d 官网 运行查看

更多内容见 Cesium高级教程-教程简介