demo

app.py

@@ -437,114 +437,191 @@ void main () {
 }\`;
 
   function createWorker() {
-    const code = \`
-    let buffer, vertexCount = 0;
-    const rowLength = 32;
-    var _floatView = new Float32Array(1), _int32View = new Int32Array(_floatView.buffer);
-    function floatToHalf(float) {
-      _floatView[0] = float; var f = _int32View[0];
-      var sign = (f >> 31) & 0x0001, exp = (f >> 23) & 0x00ff, frac = f & 0x007fffff, newExp;
-      if (exp == 0) newExp = 0;
-      else if (exp < 113) { newExp = 0; frac |= 0x00800000; frac = frac >> (113 - exp); if (frac & 0x01000000) { newExp = 1; frac = 0; }}
-      else if (exp < 142) newExp = exp - 112; else { newExp = 31; frac = 0; }
-      return (sign << 15) | (newExp << 10) | (frac >> 13);
+    const workerCode = `
+let buffer, vertexCount = 0;
+const rowLength = 32;
+var _floatView = new Float32Array(1), _int32View = new Int32Array(_floatView.buffer);
+
+function floatToHalf(float) {
+  _floatView[0] = float;
+  var f = _int32View[0];
+  var sign = (f >> 31) & 0x0001, exp = (f >> 23) & 0x00ff, frac = f & 0x007fffff, newExp;
+  if (exp == 0) newExp = 0;
+  else if (exp < 113) { 
+    newExp = 0; frac |= 0x00800000; frac = frac >> (113 - exp);
+    if (frac & 0x01000000) { newExp = 1; frac = 0; }
+  } else if (exp < 142) newExp = exp - 112;
+  else { newExp = 31; frac = 0; }
+  return (sign << 15) | (newExp << 10) | (frac >> 13);
+}
+
+function packHalf2x16(x, y) { 
+  return (floatToHalf(x) | (floatToHalf(y) << 16)) >>> 0; 
+}
+
+function processPlyBuffer(inputBuffer) {
+  const ubuf = new Uint8Array(inputBuffer);
+  const header = new TextDecoder().decode(ubuf.slice(0, 10240));
+  const header_end = "end_header\\n";
+  const header_end_index = header.indexOf(header_end);
+  if (header_end_index < 0) throw new Error("Unable to read PLY header");
+  
+  const match = /element vertex (\\d+)\\n/.exec(header);
+  const vertexCount = parseInt(match[1]);
+  console.log("Vertex Count:", vertexCount);
+  
+  let row_offset = 0, offsets = {}, types = {};
+  const TYPE_MAP = {
+    double: "getFloat64", int: "getInt32", uint: "getUint32",
+    float: "getFloat32", short: "getInt16", ushort: "getUint16", uchar: "getUint8"
+  };
+  
+  const lines = header.slice(0, header_end_index).split("\\n");
+  for (let line of lines) {
+    if (line.startsWith("property ")) {
+      const parts = line.split(" ");
+      const type = parts[1];
+      const name = parts[2];
+      const arrayType = TYPE_MAP[type] || "getInt8";
+      types[name] = arrayType;
+      offsets[name] = row_offset;
+      row_offset += parseInt(arrayType.replace(/[^\\d]/g, "")) / 8;
     }
-    function packHalf2x16(x, y) { return (floatToHalf(x) | (floatToHalf(y) << 16)) >>> 0; }
-    function processPlyBuffer(inputBuffer) {
-      const ubuf = new Uint8Array(inputBuffer);
-      const header = new TextDecoder().decode(ubuf.slice(0, 10240));
-      const header_end = "end_header\\\\n", header_end_index = header.indexOf(header_end);
-      if (header_end_index < 0) throw new Error("Unable to read .ply file header");
-      const vertexCount = parseInt(/element vertex (\\\\d+)\\\\n/.exec(header)[1]);
-      console.log("Vertex Count:", vertexCount);
-      let row_offset = 0, offsets = {}, types = {};
-      const TYPE_MAP = {double: "getFloat64", int: "getInt32", uint: "getUint32", float: "getFloat32", short: "getInt16", ushort: "getUint16", uchar: "getUint8"};
-      for (let prop of header.slice(0, header_end_index).split("\\\\n").filter(k => k.startsWith("property "))) {
-        const [p, type, name] = prop.split(" ");
-        const arrayType = TYPE_MAP[type] || "getInt8";
-        types[name] = arrayType; offsets[name] = row_offset;
-        row_offset += parseInt(arrayType.replace(/[^\\\\d]/g, "")) / 8;
-      }
-      let dataView = new DataView(inputBuffer, header_end_index + header_end.length), row = 0;
-      const attrs = new Proxy({}, {
-        get(target, prop) {
-          if (!types[prop]) throw new Error(prop + " not found");
-          return dataView[types[prop]](row * row_offset + offsets[prop], true);
-        }
-      });
-      let sizeList = new Float32Array(vertexCount), sizeIndex = new Uint32Array(vertexCount);
-      for (row = 0; row < vertexCount; row++) {
-        sizeIndex[row] = row;
-        if (!types["scale_0"]) continue;
-        const size = Math.exp(attrs.scale_0) * Math.exp(attrs.scale_1) * Math.exp(attrs.scale_2);
-        const opacity = 1 / (1 + Math.exp(-attrs.opacity));
-        sizeList[row] = size * opacity;
-      }
-      sizeIndex.sort((b, a) => sizeList[a] - sizeList[b]);
-      const buffer = new ArrayBuffer(rowLength * vertexCount);
-      for (let j = 0; j < vertexCount; j++) {
-        row = sizeIndex[j];
-        const position = new Float32Array(buffer, j * rowLength, 3);
-        const scales = new Float32Array(buffer, j * rowLength + 12, 3);
-        const rgba = new Uint8ClampedArray(buffer, j * rowLength + 24, 4);
-        const rot = new Uint8ClampedArray(buffer, j * rowLength + 28, 4);
-        if (types["scale_0"]) {
-          const qlen = Math.sqrt(attrs.rot_0 ** 2 + attrs.rot_1 ** 2 + attrs.rot_2 ** 2 + attrs.rot_3 ** 2);
-          rot[0] = (attrs.rot_0 / qlen) * 128 + 128; rot[1] = (attrs.rot_1 / qlen) * 128 + 128;
-          rot[2] = (attrs.rot_2 / qlen) * 128 + 128; rot[3] = (attrs.rot_3 / qlen) * 128 + 128;
-          scales[0] = Math.exp(attrs.scale_0); scales[1] = Math.exp(attrs.scale_1); scales[2] = Math.exp(attrs.scale_2);
-        } else { scales[0] = scales[1] = scales[2] = 0.01; rot[0] = 255; rot[1] = rot[2] = rot[3] = 0; }
-        position[0] = attrs.x; position[1] = attrs.y; position[2] = attrs.z;
-        if (types["f_dc_0"]) {
-          const SH_C0 = 0.28209479177387814;
-          rgba[0] = (0.5 + SH_C0 * attrs.f_dc_0) * 255; rgba[1] = (0.5 + SH_C0 * attrs.f_dc_1) * 255; rgba[2] = (0.5 + SH_C0 * attrs.f_dc_2) * 255;
-        } else { rgba[0] = attrs.red; rgba[1] = attrs.green; rgba[2] = attrs.blue; }
-        rgba[3] = types["opacity"] ? (1 / (1 + Math.exp(-attrs.opacity))) * 255 : 255;
-      }
-      return buffer;
+  }
+  
+  let dataView = new DataView(inputBuffer, header_end_index + header_end.length);
+  let row = 0;
+  const attrs = new Proxy({}, {
+    get(target, prop) {
+      if (!types[prop]) throw new Error(prop + " not found");
+      return dataView[types[prop]](row * row_offset + offsets[prop], true);
     }
-    function generateTexture() {
-      if (!buffer) return;
-      const f_buffer = new Float32Array(buffer), u_buffer = new Uint8Array(buffer);
-      const texwidth = 2048, texheight = Math.ceil((2 * vertexCount) / texwidth);
-      const texdata = new Uint32Array(texwidth * texheight * 4);
-      const texdata_c = new Uint8Array(texdata.buffer), texdata_f = new Float32Array(texdata.buffer);
-      for (let i = 0; i < vertexCount; i++) {
-        texdata_f[8 * i + 0] = f_buffer[8 * i + 0]; texdata_f[8 * i + 1] = f_buffer[8 * i + 1]; texdata_f[8 * i + 2] = f_buffer[8 * i + 2];
-        texdata_c[4 * (8 * i + 7) + 0] = u_buffer[32 * i + 24 + 0]; texdata_c[4 * (8 * i + 7) + 1] = u_buffer[32 * i + 24 + 1];
-        texdata_c[4 * (8 * i + 7) + 2] = u_buffer[32 * i + 24 + 2]; texdata_c[4 * (8 * i + 7) + 3] = u_buffer[32 * i + 24 + 3];
-        let scale = [f_buffer[8 * i + 3], f_buffer[8 * i + 4], f_buffer[8 * i + 5]];
-        let rot = [(u_buffer[32 * i + 28] - 128) / 128, (u_buffer[32 * i + 29] - 128) / 128, (u_buffer[32 * i + 30] - 128) / 128, (u_buffer[32 * i + 31] - 128) / 128];
-        const M = [1.0 - 2.0 * (rot[2] * rot[2] + rot[3] * rot[3]), 2.0 * (rot[1] * rot[2] + rot[0] * rot[3]), 2.0 * (rot[1] * rot[3] - rot[0] * rot[2]),
-                   2.0 * (rot[1] * rot[2] - rot[0] * rot[3]), 1.0 - 2.0 * (rot[1] * rot[1] + rot[3] * rot[3]), 2.0 * (rot[2] * rot[3] + rot[0] * rot[1]),
-                   2.0 * (rot[1] * rot[3] + rot[0] * rot[2]), 2.0 * (rot[2] * rot[3] - rot[0] * rot[1]), 1.0 - 2.0 * (rot[1] * rot[1] + rot[2] * rot[2])].map((k, i) => k * scale[Math.floor(i / 3)]);
-        const sigma = [M[0]*M[0]+M[3]*M[3]+M[6]*M[6], M[0]*M[1]+M[3]*M[4]+M[6]*M[7], M[0]*M[2]+M[3]*M[5]+M[6]*M[8],
-                       M[1]*M[1]+M[4]*M[4]+M[7]*M[7], M[1]*M[2]+M[4]*M[5]+M[7]*M[8], M[2]*M[2]+M[5]*M[5]+M[8]*M[8]];
-        texdata[8 * i + 4] = packHalf2x16(4 * sigma[0], 4 * sigma[1]);
-        texdata[8 * i + 5] = packHalf2x16(4 * sigma[2], 4 * sigma[3]);
-        texdata[8 * i + 6] = packHalf2x16(4 * sigma[4], 4 * sigma[5]);
-      }
-      self.postMessage({ texdata, texwidth, texheight, vertexCount }, [texdata.buffer]);
+  });
+  
+  let sizeList = new Float32Array(vertexCount);
+  let sizeIndex = new Uint32Array(vertexCount);
+  for (row = 0; row < vertexCount; row++) {
+    sizeIndex[row] = row;
+    if (!types["scale_0"]) continue;
+    const size = Math.exp(attrs.scale_0) * Math.exp(attrs.scale_1) * Math.exp(attrs.scale_2);
+    const opacity = 1 / (1 + Math.exp(-attrs.opacity));
+    sizeList[row] = size * opacity;
+  }
+  sizeIndex.sort((b, a) => sizeList[a] - sizeList[b]);
+  
+  const buffer = new ArrayBuffer(rowLength * vertexCount);
+  for (let j = 0; j < vertexCount; j++) {
+    row = sizeIndex[j];
+    const position = new Float32Array(buffer, j * rowLength, 3);
+    const scales = new Float32Array(buffer, j * rowLength + 12, 3);
+    const rgba = new Uint8ClampedArray(buffer, j * rowLength + 24, 4);
+    const rot = new Uint8ClampedArray(buffer, j * rowLength + 28, 4);
+    
+    if (types["scale_0"]) {
+      const qlen = Math.sqrt(attrs.rot_0 ** 2 + attrs.rot_1 ** 2 + attrs.rot_2 ** 2 + attrs.rot_3 ** 2);
+      rot[0] = (attrs.rot_0 / qlen) * 128 + 128;
+      rot[1] = (attrs.rot_1 / qlen) * 128 + 128;
+      rot[2] = (attrs.rot_2 / qlen) * 128 + 128;
+      rot[3] = (attrs.rot_3 / qlen) * 128 + 128;
+      scales[0] = Math.exp(attrs.scale_0);
+      scales[1] = Math.exp(attrs.scale_1);
+      scales[2] = Math.exp(attrs.scale_2);
+    } else {
+      scales[0] = scales[1] = scales[2] = 0.01;
+      rot[0] = 255; rot[1] = rot[2] = rot[3] = 0;
     }
-    self.onmessage = (e) => {
-      console.log('[Worker] Message received:', e.data);
-      if (e.data.ply) {
-        try {
-          console.log('[Worker] Processing PLY buffer...');
-          buffer = processPlyBuffer(e.data.ply);
-          vertexCount = Math.floor(buffer.byteLength / rowLength);
-          console.log('[Worker] Buffer processed, vertex count:', vertexCount);
-          console.log('[Worker] Generating texture...');
-          generateTexture();
-          console.log('[Worker] Texture generated and sent');
-        } catch (error) {
-          console.error('[Worker] Error:', error);
-          console.error('[Worker] Stack:', error.stack);
-        }
-      }
-    };
-    \`;
-    return new Worker(URL.createObjectURL(new Blob([code], { type: 'application/javascript' })));
+    
+    position[0] = attrs.x;
+    position[1] = attrs.y;
+    position[2] = attrs.z;
+    
+    if (types["f_dc_0"]) {
+      const SH_C0 = 0.28209479177387814;
+      rgba[0] = (0.5 + SH_C0 * attrs.f_dc_0) * 255;
+      rgba[1] = (0.5 + SH_C0 * attrs.f_dc_1) * 255;
+      rgba[2] = (0.5 + SH_C0 * attrs.f_dc_2) * 255;
+    } else {
+      rgba[0] = attrs.red;
+      rgba[1] = attrs.green;
+      rgba[2] = attrs.blue;
+    }
+    rgba[3] = types["opacity"] ? (1 / (1 + Math.exp(-attrs.opacity))) * 255 : 255;
+  }
+  return buffer;
+}
+
+function generateTexture() {
+  if (!buffer) return;
+  const f_buffer = new Float32Array(buffer);
+  const u_buffer = new Uint8Array(buffer);
+  const texwidth = 2048;
+  const texheight = Math.ceil((2 * vertexCount) / texwidth);
+  const texdata = new Uint32Array(texwidth * texheight * 4);
+  const texdata_c = new Uint8Array(texdata.buffer);
+  const texdata_f = new Float32Array(texdata.buffer);
+  
+  for (let i = 0; i < vertexCount; i++) {
+    texdata_f[8 * i + 0] = f_buffer[8 * i + 0];
+    texdata_f[8 * i + 1] = f_buffer[8 * i + 1];
+    texdata_f[8 * i + 2] = f_buffer[8 * i + 2];
+    texdata_c[4 * (8 * i + 7) + 0] = u_buffer[32 * i + 24 + 0];
+    texdata_c[4 * (8 * i + 7) + 1] = u_buffer[32 * i + 24 + 1];
+    texdata_c[4 * (8 * i + 7) + 2] = u_buffer[32 * i + 24 + 2];
+    texdata_c[4 * (8 * i + 7) + 3] = u_buffer[32 * i + 24 + 3];
+    
+    let scale = [f_buffer[8 * i + 3], f_buffer[8 * i + 4], f_buffer[8 * i + 5]];
+    let rot = [
+      (u_buffer[32 * i + 28] - 128) / 128,
+      (u_buffer[32 * i + 29] - 128) / 128,
+      (u_buffer[32 * i + 30] - 128) / 128,
+      (u_buffer[32 * i + 31] - 128) / 128
+    ];
+    
+    const M = [
+      1.0 - 2.0 * (rot[2] * rot[2] + rot[3] * rot[3]),
+      2.0 * (rot[1] * rot[2] + rot[0] * rot[3]),
+      2.0 * (rot[1] * rot[3] - rot[0] * rot[2]),
+      2.0 * (rot[1] * rot[2] - rot[0] * rot[3]),
+      1.0 - 2.0 * (rot[1] * rot[1] + rot[3] * rot[3]),
+      2.0 * (rot[2] * rot[3] + rot[0] * rot[1]),
+      2.0 * (rot[1] * rot[3] + rot[0] * rot[2]),
+      2.0 * (rot[2] * rot[3] - rot[0] * rot[1]),
+      1.0 - 2.0 * (rot[1] * rot[1] + rot[2] * rot[2])
+    ].map((k, idx) => k * scale[Math.floor(idx / 3)]);
+    
+    const sigma = [
+      M[0]*M[0] + M[3]*M[3] + M[6]*M[6],
+      M[0]*M[1] + M[3]*M[4] + M[6]*M[7],
+      M[0]*M[2] + M[3]*M[5] + M[6]*M[8],
+      M[1]*M[1] + M[4]*M[4] + M[7]*M[7],
+      M[1]*M[2] + M[4]*M[5] + M[7]*M[8],
+      M[2]*M[2] + M[5]*M[5] + M[8]*M[8]
+    ];
+    
+    texdata[8 * i + 4] = packHalf2x16(4 * sigma[0], 4 * sigma[1]);
+    texdata[8 * i + 5] = packHalf2x16(4 * sigma[2], 4 * sigma[3]);
+    texdata[8 * i + 6] = packHalf2x16(4 * sigma[4], 4 * sigma[5]);
+  }
+  self.postMessage({ texdata, texwidth, texheight, vertexCount }, [texdata.buffer]);
+}
+
+self.onmessage = (e) => {
+  console.log('[Worker] Message received');
+  if (e.data.ply) {
+    try {
+      console.log('[Worker] Processing PLY buffer...');
+      buffer = processPlyBuffer(e.data.ply);
+      vertexCount = Math.floor(buffer.byteLength / rowLength);
+      console.log('[Worker] Vertex count:', vertexCount);
+      generateTexture();
+      console.log('[Worker] Texture sent');
+    } catch (error) {
+      console.error('[Worker] Error:', error);
+    }
+  }
+};
+`;
+    return new Worker(URL.createObjectURL(new Blob([workerCode], { type: 'application/javascript' })));
   }
 
   const invert4 = (a) => {