Script: 3DGS wireframe rendering

Useful Resources
1

Hey guys!
Here is a simple script reproducing Wireframe mode from PlayCanvas Editor for Gaussian Splats at runtime. Attach it to Splat in your scene. Cheers!

Screenshot 2026-04-17 at 13.47.06
Screenshot 2026-04-17 at 13.47.061920×1023 549 KB

const GSplatLine = pc.createScript ('GSplatLine');


GSplatLine.attributes.add ('thickness', {title: 'Thickness', type: 'number', default: 1, min: 0, max: 3});


GSplatLine.prototype.initialize = function ()
{
    this.setupShader ();
    this.on ('attr:thickness', this.setupShader, this);
}


GSplatLine.prototype.setupShader = function ()
{
    // Exponential remap for convenience: 0 -> 0.0001, 1 -> 0.001, 2 -> 0.01, 3 -> 0.1
    const thickness = 10 ** (this.thickness - 4);

    this.entity.gsplat.material.getShaderChunks ('glsl').set ('gsplatModifyVS',
    `
        float thickness = ${thickness};

        void modifySplatCenter (inout vec3 center) {}
        void modifySplatColor (vec3 center, inout vec4 color) {}

        void modifySplatRotationScale
        (
            vec3 originalCenter,
            vec3 modifiedCenter,
            inout vec4 rotation,
            inout vec3 scale
        )
        {
            if (scale.x >= scale.y && scale.x >= scale.z)
                scale = vec3 (scale.x, thickness, thickness);
            else if (scale.y >= scale.x && scale.y >= scale.z)
                scale = vec3 (thickness, scale.y, thickness);
            else
                scale = vec3 (thickness, thickness, scale.z);
        }
    `);

    this.entity.gsplat.material.getShaderChunks ('wgsl').set ('gsplatModifyVS',
    `
        const thickness: f32 = ${thickness};

        fn modifySplatCenter (center: ptr<function, vec3f>) {}
        fn modifySplatColor (center: vec3f, color: ptr<function, vec4f>) {}

        fn modifySplatRotationScale
        (
            originalCenter: vec3f,
            modifiedCenter: vec3f,
            rotation: ptr<function, vec4f>,
            scale: ptr<function, vec3f>
        )
        {
            if ((*scale).x >= (*scale).y && (*scale).x >= (*scale).z)
                {*scale = vec3f ((*scale).x, thickness, thickness);}
            else if ((*scale).y >= (*scale).x && (*scale).y >= (*scale).z)
                {*scale = vec3f (thickness, (*scale).y, thickness);}
            else
                {*scale = vec3f (thickness, thickness, (*scale).z);}
        }
    `);

    this.entity.gsplat.material.update ();
};
2 Likes