Visual flash when swapping SplatMesh objects in the same scene

[yosun]

Summary

When building an application that switches between multiple SplatMesh objects in the same scene/renderer, there's a brief visual flash where the previous mesh is visible before the new mesh appears. This happens even when following best practices of hiding meshes, clearing the renderer, and forcing renders.

Use Case

I'm building a application where users can switch between different Gaussian splat worlds by clicking through a story. The app pre-loads multiple .spz files as SplatMesh objects and swaps their visibility to transition between worlds.

Current Implementation

// Hide all meshes
splatMeshes.forEach((mesh) => {
    mesh.visible = false;
});

// Clear and render empty scene
renderer.clear();
renderer.render(scene, camera);

// Show new mesh
newMesh.visible = true;

// Clear and render new scene
renderer.clear();
renderer.render(scene, camera);
renderer.render(scene, camera);

// Show container
container.classList.add('active');

Expected Behavior

When swapping between pre-loaded SplatMesh objects, the transition should be seamless without showing the previous mesh.

Actual Behavior

There's a brief flash (< 100ms) where the previous mesh is visible before the new mesh appears, especially when returning to a previously displayed mesh.

Environment

• Spark.js version: v0.1.10
• Three.js version: v0.170.0
• Browser: Chrome/Safari (tested on both)
• Platform: macOS

Reproduction Steps

1. Create a scene with a renderer and camera
2. Load multiple SplatMesh objects (e.g., 2-3 different .spz files)
3. Add one mesh to the scene, make it visible
4. Implement a function to swap meshes:
   • Hide all meshes
   • Show a different mesh
   • Render the scene
5. Call the swap function multiple times between different meshes
6. Observe the brief flash of the previous mesh during transitions

Feature Request

It would be helpful to have one or more of the following:

1. Built-in mesh swapping API: A method like SparkRenderer.swapMesh(oldMesh, newMesh) that handles the transition cleanly
2. Explicit buffer clearing: A SparkRenderer.clearBuffer() or SplatMesh.clear() method to ensure the canvas is fully cleared
3. Documentation: Best practices guide for applications that need to switch between multiple splats dynamically
4. Transition callbacks: Events or promises that fire when a mesh is fully rendered and ready to display

Workarounds Tried

• Pausing the animation loop during transitions
• Multiple calls to renderer.clear() and renderer.render()
• Using requestAnimationFrame to wait for render completion
• Hiding the container until after forced renders
• Setting mesh.visible = false before showing new mesh

All of these reduce the flash but don't eliminate it completely.

Additional Context

This is likely a timing issue with WebGL/Three.js rendering where the canvas retains the last frame until a new one is drawn. However, official guidance or built-in support from Spark.js would be valuable for developers building multi-splat applications.

---

Would appreciate any guidance or suggestions for eliminating this visual artifact!

[dmarcos]

Can you share full runnable test code to reproduce? I recommend https://stackblitz.com/edit/spark?file=index.html

Thanks!