Nano Banana Pro
Agent skill for nano-banana-pro
The project displays 3D Gaussian Splatting scenes in the browser. A React-based
Sign in to like and favorite skills
The project displays 3D Gaussian Splatting scenes in the browser. A React-based latent grid selects the model to show. PlayCanvas handles rendering via web components. The viewer is optimized for quick scrubbing and small bundles.
<pc-app> and <pc-splat> create the scene. Helpers
(camera-controls, xr-controllers, xr-navigation) are ES modules
registered with pc.registerScript once the app is ready.public is the root. Production builds disable source maps
and comments. package.json marks sideEffects: false for tree shaking.VITE_DATA_ROOT must point to a folder containing the 16×16
model grid (model_c## _r##). scripts/gen-meta.js generates
latent-viewer-meta.json with byte sizes. scripts/get-test-data.js downloads
the demo data in parallel.LatentGrid.tsx uses react-konva. It tracks cached cells
in localStorage and issues a single debounced load request. A bulk download
button can pre-cache everything and is cancelable.public/main.ts)The loader evolved across commits
fd7e0a3, 97e4ba5, a95df4f and now
ensures smooth transitions:
currentToken per request and abort stale async stages.liveEnt and pendingEnt. Older pending entities are
destroyed immediately.gsplat.instance.sorter.once('updated') before considering the new
model ready.app.on('frameend') so a model is always visible.app.renderNextFrame?.() after the swap to wake Safari.This keeps memory usage bounded and avoids flicker when scrubbing the grid.
The page should support both loading from it being the root site, but also should support being included in a iframe in another page. An example is in the root dir, in index.html, which includes the dist/index.html. It's important that the paths (both for model loading and for loading the assets JS code) work for both of these cases.
npm run dev starts Vite; npm run build checks types and builds.modelSwitch.test.ts).