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
• 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

Asset Storage

• Currently configured for S3 URLs
• Viewer supports any public URL (upcoming feature)

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