GSplat

Gaussian Splats are a new way of capturing and rendering high quality 3D content. They capture the shape and lighting of a scene in a way that produces incredibly high quality results. See the Splat demo for a working example.

Usage

Once you load a Gaussian Splat model, you can use the GSplat component to render it.

splat.jsx


import { GSplat } from '@playcanvas/react/components'
import { useSplat } from '@playcanvas/react/hooks'
 
const Splat = (( src, ...props )) => {
 
    const { asset } = useSplat(src)
 
    if (!asset) return null
 
    return (<Entity {...props}>
        <GSplat asset={asset} />
    </Entity>)
}

Props

The following props are based on the GSplat Component from PlayCanvas version 2.7.3. This documentation is automatically generated from the TypeScript types of the installed PlayCanvas package.

Name	Type	Default
`asset`	`Asset` The asset to use for the GSplat.
`vertex`	`string` The vertex shader to use for the GSplat.
`fragment`	`string` The fragment shader to use for the GSplat.
`customAabb`	`BoundingBox \| null` Sets a custom object space bounding box for visibility culling of the attached gsplat. Gets the custom object space bounding box for visibility culling of the attached gsplat.
`instance`	`GSplatInstance \| null` Sets a GSplatInstance on the component. If not set or loaded, it returns null. Gets the GSplatInstance on the component.
`materialOptions`	`SplatMaterialOptions`
`castShadows`	`boolean` Sets whether gsplat will cast shadows for lights that have shadow casting enabled. Defaults to false. Gets whether gsplat will cast shadows for lights that have shadow casting enabled.
`layers`	`number[]` Sets an array of layer IDs (Layer#id ) to which this gsplat should belong. Don’t push, pop, splice or modify this array. If you want to change it, set a new one instead. Gets the array of layer IDs (Layer#id ) to which this gsplat belongs.
`system`	`ComponentSystem` The ComponentSystem used to create this Component.
`entity`	`Entity` The Entity that this Component is attached to.
`enabled`	`boolean` Sets the enabled state of the component. Gets the enabled state of the component.