<pc-gsplat>

The <pc-gsplat> tag adds a gsplat component that renders a 3D Gaussian Splat: a scene captured as millions of small, soft, colored blobs.

When rendering splat-based scenes, it is recommended to set antialias to false and max-pixel-ratio to 1 on your <pc-app> tag for best performance.

Usage

It must be a direct child of a <pc-entity>, a <pc-model> or a <pc-node>.

Attributes

Attribute	Type	Default	Description
`asset`	Asset ID	-	Gaussian splat asset ID (must reference a `gsplat` type asset)
`cast-shadows`	Boolean	`"false"`	Whether the gsplat component casts shadows
`enabled`	Boolean	`"true"`	Enabled state of the component
`lod-falloff`	Number	`"1"`	How quickly this splat's detail falls off away from the camera, as an exponent from 0 to 8. Higher values concentrate more of the scene-wide splat budget near the camera; lower values spread it more evenly. Only affects assets that contain LOD levels.
`lod-range-max`	Number	`"99"`	Maximum allowed LOD index (inclusive). The LOD the budget selects is clamped so it never goes coarser (higher index) than this value. The default of `99` effectively means "no cap". Only affects assets that contain LOD levels.
`lod-range-min`	Number	`"0"`	Minimum allowed LOD index (inclusive). The LOD the budget selects is clamped so it never goes finer (lower index) than this value. Raising it avoids downloading the highest-quality (largest) LOD files. Only affects assets that contain LOD levels.

Level of Detail

A streamed splat asset is one exported with LOD levels: its <pc-asset> src points at the export's lod-meta.json, which is downloaded up front while the splat data itself streams in on demand. Declare it with type="gsplat", since a .json file would otherwise be loaded as plain JSON. Such an asset is not rendered at full detail everywhere. The engine works to a scene-wide splat budget: a target number of splats on screen across every <pc-gsplat> in the scene, spent where it buys the most. The budget and how it is spent are properties of the scene, so they live on <pc-scene>; how each splat competes for its share lives here:

Attribute	On	What it controls
`gsplat-splat-budget`	`<pc-scene>`	The total number of splats to render across the scene. Defaults to 1,000,000; a budget larger than the scene resolves every node at its finest level
`gsplat-lod-mode`	`<pc-scene>`	`"distance"`, the default, orders detail by camera distance alone, stepping it down in concentric bands around the camera, and uses less memory. `"error"` spends the same budget where it removes the most approximation error, which lifts sparse regions such as sky and distant background that `"distance"` leaves coarse, but keeps noticeably more of the streamed data in memory
`lod-falloff`	`<pc-gsplat>`	How steeply this splat trades far-field detail for near-field detail within its share of the budget. 1 is neutral; higher values pull detail towards the camera
`lod-range-min`, `lod-range-max`	`<pc-gsplat>`	Hard clamps on the LOD index this splat may use, whatever the budget decides — raise the minimum to avoid ever downloading the largest files

<pc-asset id="capture" src="capture/lod-meta.json" type="gsplat"></pc-asset>
<!-- ... -->
<pc-scene gsplat-splat-budget="1500000" gsplat-lod-mode="error">
    <pc-entity name="capture">
        <pc-gsplat asset="capture" lod-falloff="1.5" lod-range-min="1"></pc-gsplat>
    </pc-entity>
</pc-scene>

There is no way to switch budgeted selection off: a budget of zero or less would pin every node to its coarsest level rather than lift the cap, so the engine uses the default instead. To see everything at full detail, set a budget larger than the capture. A plain .ply or .sog asset with no LOD levels always renders in full, but its splats count against the budget, leaving that much less for the streamed ones.

The Splat Streaming example streams a large LOD capture. It pins lod-range-min to the coarsest level so the whole scene arrives quickly, then removes the pin and lets finer levels stream in, which shows the budget at work.

Example

A Gaussian splat scanned from a real toy. Drag to orbit and scroll to zoom — and note the <pc-app> attributes recommended above:

Live Example

<pc-app antialias="false" max-pixel-ratio="1">
    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas@2.22.6/scripts/esm/camera-controls.mjs"></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
    <pc-scene>
        <pc-entity name="camera" position="0 0 2.5">
            <pc-camera clear-color="#1d1f2b"></pc-camera>
            <pc-script>
                <pc-script-instance name="cameraControls" enable-pan="false" zoom-range="1 5"></pc-script-instance>
            </pc-script>
        </pc-entity>
        <pc-entity name="toy" position="0 -0.7 0" rotation="0 0 180">
            <pc-gsplat asset="toy"></pc-gsplat>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript Interface

You can programmatically create and manipulate <pc-gsplat> elements using the GSplatComponentElement API.

The component property is the engine GSplatComponent the element adds — null until the element is ready — and everything the attributes do not expose is available on it.

Attributes​

Level of Detail​

Example​

JavaScript Interface​

See Also​

Attributes

Level of Detail

Example

JavaScript Interface

See Also