From 1e697b397c7b9b55279f328db8b090c245e6c365 Mon Sep 17 00:00:00 2001
From: Noeri Huisman <8823461+mrxz@users.noreply.github.com>
Date: Wed, 16 Jul 2025 18:42:52 +0200
Subject: [PATCH] Use FullScreenQuad instead of custom setup (#121)

---
 src/PackedSplats.ts | 13 +++++--------
 src/Readback.ts     | 13 +++++--------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/PackedSplats.ts b/src/PackedSplats.ts
index f040780..4cc8387 100644
--- a/src/PackedSplats.ts
+++ b/src/PackedSplats.ts
@@ -1,4 +1,5 @@
 import * as THREE from "three";
+import { FullScreenQuad } from "three/addons/postprocessing/Pass.js";
 
 import type { GsplatGenerator } from "./SplatGenerator";
 import { type SplatFileType, SplatLoader, unpackSplats } from "./SplatLoader";
@@ -498,7 +499,7 @@ export class PackedSplats {
 
     // Prepare and update our material we'll use to render the Gsplats
     const material = program.prepareMaterial();
-    PackedSplats.mesh.material = material;
+    PackedSplats.fullScreenQuad.material = material;
     return { program, material };
   }
 
@@ -579,7 +580,7 @@ export class PackedSplats {
       renderer.setRenderTarget(this.target, layer);
       renderer.xr.enabled = false;
       renderer.autoClear = false;
-      renderer.render(PackedSplats.scene, PackedSplats.camera);
+      PackedSplats.fullScreenQuad.render(renderer);
 
       base += SPLAT_TEX_WIDTH * (layerYEnd - layerYStart);
     }
@@ -593,14 +594,10 @@ export class PackedSplats {
   // Cache for GsplatGenerator programs
   static generatorProgram = new Map<GsplatGenerator, DynoProgram>();
 
-  // Static Three.js objects for pseudo-compute shader rendering
-  static geometry = new THREE.PlaneGeometry(2, 2);
-  static mesh = new THREE.Mesh(
-    PackedSplats.geometry,
+  // Static full-screen quad for pseudo-compute shader rendering
+  static fullScreenQuad = new FullScreenQuad(
     new THREE.RawShaderMaterial({ visible: false }),
   );
-  static scene = new THREE.Scene().add(PackedSplats.mesh);
-  static camera = new THREE.Camera();
 }
 
 // You can use a PackedSplats as a dyno block using the function
diff --git a/src/Readback.ts b/src/Readback.ts
index d56c21c..a7a7578 100644
--- a/src/Readback.ts
+++ b/src/Readback.ts
@@ -1,4 +1,5 @@
 import * as THREE from "three";
+import { FullScreenQuad } from "three/addons/postprocessing/Pass.js";
 
 import { SPLAT_TEX_HEIGHT, SPLAT_TEX_WIDTH } from "./defines";
 import { type Dyno, OutputRgba8, dynoBlock } from "./dyno";
@@ -124,7 +125,7 @@ export class Readback {
     }
 
     const material = program.prepareMaterial();
-    Readback.mesh.material = material;
+    Readback.fullScreenQuad.material = material;
     return { program, material };
   }
 
@@ -181,7 +182,7 @@ export class Readback {
       renderer.setRenderTarget(this.target, layer);
       renderer.xr.enabled = false;
       renderer.autoClear = false;
-      renderer.render(Readback.scene, Readback.camera);
+      Readback.fullScreenQuad.render(renderer);
 
       baseIndex += SPLAT_TEX_WIDTH * layerYEnd;
     }
@@ -330,12 +331,8 @@ export class Readback {
   // Cache for Rgba8Readback programs
   static readbackProgram = new Map<Rgba8Readback, DynoProgram>();
 
-  // Static Three.js objects for pseudo-compute shader rendering
-  static geometry = new THREE.PlaneGeometry(2, 2);
-  static mesh = new THREE.Mesh(
-    Readback.geometry,
+  // Static full-screen quad for pseudo-compute shader rendering
+  static fullScreenQuad = new FullScreenQuad(
     new THREE.RawShaderMaterial({ visible: false }),
   );
-  static scene = new THREE.Scene().add(Readback.mesh);
-  static camera = new THREE.Camera();
 }