Update GS rendering

src/platform/graphics/shader-utils.js

@@ -175,14 +175,9 @@ class ShaderUtils {
 
  const precision = forcePrecision ? forcePrecision : device.precision;
 
- let code = '';
- if (device.isWebGPU) {
-
- code = `precision ${precision} float;\nprecision ${precision} int;\n`;
-
- } else {
+ let code = `precision ${precision} float;\nprecision ${precision} int;\n`;
 
-  code = `precision ${precision} float;\n`;
+ if (device.isWebGL2) {
  code += `precision ${precision} sampler2DShadow;\n`;
  }
 

src/platform/graphics/texture.js

@@ -774,7 +774,7 @@ class Texture {
  * - {@link TEXTURELOCK_READ}
  * - {@link TEXTURELOCK_WRITE}
  * Defaults to {@link TEXTURELOCK_WRITE}.
- * @returns {Uint8Array|Uint16Array|Float32Array} A typed array containing the pixel data of
+ * @returns {Uint8Array|Uint16Array|Uint32Array|Float32Array} A typed array containing the pixel data of
  * the locked mip level.
  */
  lock(options = {}) {

src/scene/gsplat/gsplat-data.js

@@ -88,6 +88,10 @@ class GSplatData {
  if (!this.isCompressed && performZScale) {
  mat4.setScale(-1, -1, 1);
  this.transform(mat4);
+
+ // reorder uncompressed splats in morton order for better memory access
+ // efficiency during rendering
+ this.reorderData();
  }
  }
 
@@ -408,6 +412,83 @@ class GSplatData {
  })
  }], false);
  }
+
+ calcMortonOrder() {
+ const calcMinMax = (arr) => {
+ let min = arr[0];
+ let max = arr[0];
+ for (let i = 1; i < arr.length; i++) {
+ if (arr[i] < min) min = arr[i];
+ if (arr[i] > max) max = arr[i];
+ }
+ return { min, max };
+ };
+
+ // https://fgiesen.wordpress.com/2009/12/13/decoding-morton-codes/
+ const encodeMorton3 = (x, y, z) => {
+ const Part1By2 = (x) => {
+ x &= 0x000003ff;
+ x = (x ^ (x << 16)) & 0xff0000ff;
+ x = (x ^ (x << 8)) & 0x0300f00f;
+ x = (x ^ (x << 4)) & 0x030c30c3;
+ x = (x ^ (x << 2)) & 0x09249249;
+ return x;
+ };
+
+ return (Part1By2(z) << 2) + (Part1By2(y) << 1) + Part1By2(x);
+ };
+
+ const x = this.getProp('x');
+ const y = this.getProp('y');
+ const z = this.getProp('z');
+
+ const { min: minX, max: maxX } = calcMinMax(x);
+ const { min: minY, max: maxY } = calcMinMax(y);
+ const { min: minZ, max: maxZ } = calcMinMax(z);
+
+ const sizeX = 1024 / (maxX - minX);
+ const sizeY = 1024 / (maxY - minY);
+ const sizeZ = 1024 / (maxZ - minZ);
+
+ const morton = new Uint32Array(this.numSplats);
+ for (let i = 0; i < this.numSplats; i++) {
+ const ix = Math.floor((x[i] - minX) * sizeX);
+ const iy = Math.floor((y[i] - minY) * sizeY);
+ const iz = Math.floor((z[i] - minZ) * sizeZ);
+ morton[i] = encodeMorton3(ix, iy, iz);
+ }
+
+ // generate indices
+ const indices = new Uint32Array(this.numSplats);
+ for (let i = 0; i < this.numSplats; i++) {
+ indices[i] = i;
+ }
+ // order splats by morton code
+ indices.sort((a, b) => morton[a] - morton[b]);
+
+ return indices;
+ }
+
+ reorderData() {
+ // calculate splat morton order
+ const order = this.calcMortonOrder();
+
+ const reorder = (data) => {
+ const result = new data.constructor(data.length);
+
+ for (let i = 0; i < order.length; i++) {
+ result[i] = data[order[i]];
+ }
+
+ return result;
+ };
+
+ this.elements.forEach((element) => {
+ element.properties.forEach((property) => {
+ property.storage = reorder(property.storage);
+ });
+ });
+ }
 }
 
 export { GSplatData };