Hi everyone,
I’m experiencing an issue when trying to render multiple Gaussian Splatting models using the .sog format within a React application using @playcanvas/react.
The Problem: When I attempt to load and display two different .sog models simultaneously, the textures/points get mixed up or corrupted. It seems like the resources of one model are overwriting the other in the GPU buffers or the internal registry.
Key Observations:
-
Format specific: The issue only happens with
.sogfiles. If I use standard.plyfiles, multiple models render perfectly fine. -
Isolation works: If I load both but only render one (either one), it still fails or shows artifacts. However, if I only load and render a single model (removing the code for the second one entirely), it works perfectly.
-
Editor behavior: I managed to make it work in the PlayCanvas Editor with the same files, but it was inconsistent. I noticed that the loading order in the Editor affected the outcome; otherwise, they would also get “mixed.”
-
Environment: I am using the
useSplathook and the<GSplat />component withunified={false}.
const TwoModels = () => {
const m1 = useSplat('assets/models/bike-high.sog')
const m2 = useSplat('assets/models/posthof.sog.sog')
return (
<>
<Entity rotation={[180, 0, 0]}>
{m1.asset && <GSplat asset={m1.asset} unified={false} />}
</Entity>
<Entity rotation={[180, 0, 0]}>
{m2.asset && <GSplat asset={m2.asset} unified={false} />}
</Entity>
</>
)
}
What I’ve tried:
-
Loading the assets sequentially (waiting for
m1.assetto be ready before callinguseSplatform2). -
Ensuring
unified={false}is set on both components. -
Using different
keyprops for the Entities to force isolation.
Is there a known limitation regarding the .sog parser or resource management when handled via the React wrapper? It feels like a race condition or a global state collision within the SplatResource or the material creation for .sog files.
This is what i see:
The models are taken from the examples.
Any insights would be appreciated. Thanks!