GaussianGalleria

A Next.js-based portfolio website for showcasing interactive 3D scenes using Gaussian Splatting and web viewers.

Demo: Hosted on Vercel

Overview

This Gallery website features:

• Grid-based pages displaying 3D scenes
• Interactive viewer for each scene using Splat technology
• Automatic PlayCanvas-based supersplat viewer for .compressed.ply assets with orbit/reset controls
• Integration with NeonDB for data storage
• S3 storage for 3D assets

Getting Started

Prerequisites

• Node.js
• npm, yarn, pnpm, or bun
• NeonDB account
• AWS S3 bucket for asset storage

Installation

1. Clone the repository
2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Copy environment variables:

cp example.env.local .env.local

4. Start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

5. Open http://localhost:3000 with your browser to see the result.

Database Setup

Using NeonDB

1. Set up environment variables:

   • Ensure DATABASE_URL is configured in .env.local

2. Generate migration files:

npx drizzle-kit generate

3. Run migrations:

npx drizzle-kit migrate

4. Insert dummy data:
   • Use the SQL script located at script/insertSplat.sql
   • Execute the script against your Postgres database in NeonDB

Technical Stack

Viewer Technology

• Primary viewer: antimatter15's Splat Viewer
• Wrapper: drei-vanilla
• Supersplat renderer: PlayCanvas with @playcanvas/react for .compressed.ply scenes, orbit controls, and reset hooks

Asset Storage

• Currently configured for S3 URLs
• Viewer supports any public URL (upcoming feature)
• The database will be storing the S3 keys instead of the full path to support dynamic URL signing and easier migration between storage buckets

S3 Multipart Upload CORS

Multipart uploads rely on reading the ETag from each presigned PUT response. Update your bucket CORS rule to expose that header:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "PUT", "POST"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": ["ETag"]
  }
]

After saving the policy, wait for it to propagate and verify in your browser devtools that each part response now includes the ETag header before calling the completion endpoint.

Framework

• Next.js
• Uses Geist font family via next/font

Deployment

Deploy on Vercel (recommended):

1. Visit the Vercel Platform
2. Follow the deployment steps

For more deployment options, see the Next.js deployment documentation.

Learn More

• Next.js Documentation
• Learn Next.js
• Next.js GitHub repository