Create gsplat.js

gsplat.js

@@ -0,0 +1,190 @@
+// gsplat.js
+// ==============================
+// Basic PlayCanvas script for visualizing SOGS/GSplat points from meta.json and WebP data
+
+var GSplat = pc.createScript('gsplat');
+
+/**
+ * attributes:
+ *   sogsData: parsed meta.json (from SOGS export)
+ *   textures: dictionary of {name: pc.Texture}
+ */
+GSplat.attributes.add('sogsData', { type: 'json' });
+GSplat.attributes.add('textures', { type: 'object' });
+
+GSplat.prototype.initialize = async function () {
+    // Prepare storage for points
+    this.points = [];
+    this.loaded = false;
+    this.material = null;
+    this.billboardMat = null;
+
+    // Load and decode all blobs/textures from sogsData
+    await this._loadAndDecode();
+
+    // Make a basic material for billboarding/dots
+    this.billboardMat = new pc.StandardMaterial();
+    this.billboardMat.diffuse = new pc.Color(1, 1, 0);
+    this.billboardMat.update();
+
+    this.loaded = true;
+};
+
+GSplat.prototype._loadAndDecode = async function () {
+    const data = this.sogsData;
+    const textures = this.textures;
+
+    // Helper to read float32 RGBA data from a texture
+    function decodeFloat32Texture(tex, count, channels, mins, maxs) {
+        // Render texture to canvas to extract RGBA
+        const w = tex.width;
+        const h = tex.height;
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        // Draw texture to canvas
+        ctx.drawImage(tex.getSource(), 0, 0);
+        const imgData = ctx.getImageData(0, 0, w, h).data;
+
+        // Float32 in RGBA8888 encoding
+        // Get per-channel min/max for denormalization
+        // Assume channels <= 4 (RGBA)
+        let result = new Float32Array(count * channels);
+        let idx = 0;
+        for (let i = 0; i < count; ++i) {
+            for (let c = 0; c < channels; ++c) {
+                // Each float is 4 bytes = 4 pixels channels
+                const px = i * channels + c;
+                const pxIdx = px * 4;
+                // Read RGBA 4 bytes as uint32, then float32 decode
+                const r = imgData[pxIdx + 0];
+                const g = imgData[pxIdx + 1];
+                const b = imgData[pxIdx + 2];
+                const a = imgData[pxIdx + 3];
+                const u32 = (r << 24) | (g << 16) | (b << 8) | a;
+                // Unpack as float (simulate)
+                // Most SOGS encoders quantize to [0,255] and need rescale to [min,max]
+                let v = r / 255.0;
+                if (mins && maxs) {
+                    v = mins[c] + v * (maxs[c] - mins[c]);
+                }
+                result[idx++] = v;
+            }
+        }
+        return result;
+    }
+
+    // Helper to decode quaternions from uint8 webp (just as placeholder)
+    function decodeUint8Texture(tex, count, channels) {
+        const w = tex.width;
+        const h = tex.height;
+        const canvas = document.createElement('canvas');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(tex.getSource(), 0, 0);
+        const imgData = ctx.getImageData(0, 0, w, h).data;
+
+        let result = new Uint8Array(count * channels);
+        let idx = 0;
+        for (let i = 0; i < count * channels; ++i) {
+            const pxIdx = i * 4;
+            // Use R channel
+            result[idx++] = imgData[pxIdx];
+        }
+        return result;
+    }
+
+    // Extract meta
+    const meansMeta = data.means;
+    const scalesMeta = data.scales;
+    const quatsMeta = data.quats;
+    const sh0Meta = data.sh0;
+
+    // We will show positions (means) as yellow spheres.
+    let numPoints = meansMeta.shape[0];
+
+    // Means: (could be split into two webp)
+    let means = [];
+    if (meansMeta.files.length === 2) {
+        // Combine two webp for double precision
+        let texL = textures[meansMeta.files[0]];
+        let texU = textures[meansMeta.files[1]];
+        if (!texL || !texU) return;
+        // Only using texL for now for simplicity!
+        means = decodeFloat32Texture(texL, numPoints, 3, meansMeta.mins, meansMeta.maxs);
+    } else {
+        let texL = textures[meansMeta.files[0]];
+        means = decodeFloat32Texture(texL, numPoints, 3, meansMeta.mins, meansMeta.maxs);
+    }
+
+    // Scales (not visualized in this demo)
+    // let scalesTex = textures[scalesMeta.files[0]];
+    // let scales = decodeFloat32Texture(scalesTex, numPoints, 3, scalesMeta.mins, scalesMeta.maxs);
+
+    // SH0 (color, first 3 channels)
+    let sh0Tex = textures[sh0Meta.files[0]];
+    let sh0 = decodeFloat32Texture(sh0Tex, numPoints, 4, sh0Meta.mins, sh0Meta.maxs);
+
+    // Compose points for visualization
+    this.points = [];
+    for (let i = 0; i < numPoints; ++i) {
+        // Means is a flat array [x0, y0, z0, x1, y1, z1, ...]
+        let px = means[i * 3 + 0];
+        let py = means[i * 3 + 1];
+        let pz = means[i * 3 + 2];
+
+        // SH0 is flat array of 4 channels: [r,g,b,a]
+        let r = sh0[i * 4 + 0], g = sh0[i * 4 + 1], b = sh0[i * 4 + 2];
+        // Splat color may need gamma correction
+        this.points.push({
+            pos: new pc.Vec3(px, py, pz),
+            color: new pc.Color(r, g, b)
+        });
+    }
+};
+
+// Basic draw call (draws each point as a small sphere, no instancing)
+GSplat.prototype.update = function (dt) {
+    if (!this.loaded || !this.points.length) return;
+
+    // Only draw at most 10k points for performance in this demo
+    const MAX_POINTS = Math.min(10000, this.points.length);
+
+    for (let i = 0; i < MAX_POINTS; ++i) {
+        const pt = this.points[i];
+        // Draw billboard or sphere at pt.pos with color pt.color
+        // Replace this with instanced splatting as needed!
+        this._drawBillboard(pt.pos, pt.color, 0.0025);
+    }
+};
+
+// Helper to draw billboarded quads (replace with custom shader for real splatting)
+GSplat.prototype._drawBillboard = function (pos, color, size) {
+    if (!this.entity || !this.entity.enabled) return;
+    if (!this.billboardMat) return;
+
+    // You can implement actual billboard rendering here with pc.MeshInstance
+    // or, for prototyping, add many child spheres (slow!)
+    // For fast real SOGS/gsplat: use a custom shader + single draw call.
+    // This is just a demonstration:
+
+    let app = this.app;
+    let sphere = new pc.Entity();
+    sphere.addComponent("model", {
+        type: "sphere"
+    });
+    sphere.setLocalScale(size, size, size);
+    sphere.setPosition(pos);
+    sphere.model.material = this.billboardMat.clone();
+    sphere.model.material.diffuse = color;
+    sphere.model.material.update();
+
+    this.entity.addChild(sphere);
+
+    // Clean up to avoid adding thousands of spheres per frame
+    setTimeout(() => {
+        if (sphere && sphere.destroy) sphere.destroy();
+    }, 2000); // Display for a short time only
+};