add viewer

viewer/glb-viewer/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

viewer/glb-viewer/README.md

@@ -0,0 +1,83 @@
+# GLB Model Viewer
+
+A web-based GLB model viewer that loads 3D models from Supabase Storage.
+
+## Features
+
+- Load and display GLB/GLTF 3D models from Supabase Storage
+- Interactive 3D controls (orbit, zoom, pan)
+- Grid floor with environment lighting
+- Load models via URL parameters or UI input
+
+## Setup
+
+### 1. Install dependencies
+
+```bash
+npm install
+```
+
+### 2. Configure Supabase
+
+Update `.env.local` with your Supabase credentials:
+
+```env
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+```
+
+You can find these values in your Supabase project dashboard under Settings > API.
+
+### 3. Set up Supabase Storage
+
+1. Go to your Supabase project dashboard
+2. Navigate to Storage
+3. Create a new bucket (e.g., "models")
+4. Upload your GLB files to the bucket
+5. Set the bucket to public if you want models to be accessible without authentication
+
+### 4. Run the development server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view the application.
+
+## Usage
+
+### Via UI
+
+1. Enter the bucket name (e.g., "models")
+2. Enter the file path (e.g., "example.glb" or "folder/model.glb")
+3. Click "Load Model"
+
+### Via URL Parameters
+
+You can directly load a model by passing URL parameters:
+
+```
+http://localhost:3000?bucket=models&file=example.glb
+```
+
+## 3D Controls
+
+- **Left Mouse**: Rotate the view
+- **Right Mouse**: Pan the view
+- **Scroll Wheel**: Zoom in/out
+
+## Build for Production
+
+```bash
+npm run build
+npm run start
+```
+
+## Technologies Used
+
+- Next.js 15
+- React Three Fiber (Three.js React wrapper)
+- @react-three/drei (Three.js helpers)
+- Supabase Client
+- Tailwind CSS
+- TypeScript

viewer/glb-viewer/SUPABASE_SETUP.md

@@ -0,0 +1,50 @@
+# Supabase Configuration Guide
+
+## Important: Anon Key vs Service Key
+
+The GLB viewer runs in the browser (client-side), so it requires the **anon key** for security reasons.
+
+**Never expose your service key in client-side code!**
+
+## Current Configuration
+
+Your Supabase URL has been added to `.env.local`:
+- URL: `https://qmyqfzwhwocufnplhqoe.supabase.co`
+- Bucket: `instantsplat-outputs`
+
+## Getting Your Anon Key
+
+1. Go to your [Supabase Dashboard](https://supabase.com/dashboard)
+2. Select your project
+3. Navigate to **Settings** → **API**
+4. Find the **anon public** key (NOT the service_role key)
+5. Copy the anon key and add it to `.env.local`:
+   ```
+   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
+   ```
+
+## Bucket Configuration
+
+Your bucket `instantsplat-outputs` needs to be configured for public access:
+
+1. Go to **Storage** in your Supabase dashboard
+2. Find the `instantsplat-outputs` bucket
+3. Click on the bucket settings
+4. Ensure it's set to **Public** if you want models accessible without authentication
+
+## Security Notes
+
+- **Anon Key**: Safe for client-side use, provides limited access based on RLS policies
+- **Service Key**: Backend only, bypasses all Row Level Security - NEVER expose this in browser code
+
+## Testing
+
+After adding your anon key, restart the development server:
+```bash
+npm run dev
+```
+
+Then access a model:
+```
+http://localhost:3000?bucket=instantsplat-outputs&file=your-model.glb
+```

viewer/glb-viewer/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

viewer/glb-viewer/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "GLB Model Viewer",
+  description: "View 3D GLB models from Supabase Storage",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

viewer/glb-viewer/app/page.tsx

@@ -0,0 +1,191 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import dynamic from 'next/dynamic'
+import { getSupabaseClient } from '@/lib/supabase'
+
+// Dynamically import the GLBViewer to avoid SSR issues with Three.js
+const GLBViewer = dynamic(() => import('@/components/GLBViewer'), { ssr: false })
+const SimpleGLBViewer = dynamic(() => import('@/components/SimpleGLBViewer'), { ssr: false })
+
+export default function Home() {
+  const [bucketName, setBucketName] = useState(process.env.NEXT_PUBLIC_DEFAULT_BUCKET || 'models')
+  const [filePath, setFilePath] = useState('')
+  const [modelUrl, setModelUrl] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [useSimpleViewer, setUseSimpleViewer] = useState(true) // Use simple viewer by default
+
+  // Check for URL parameters on mount
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const bucket = params.get('bucket')
+    const file = params.get('file')
+
+    if (bucket) setBucketName(bucket)
+    if (file) {
+      setFilePath(file)
+      // Auto-load if both params are present
+      if (bucket && file) {
+        loadModel(bucket, file)
+      }
+    }
+  }, [])
+
+  const loadModel = async (bucket: string, path: string) => {
+    setLoading(true)
+    setError(null)
+
+    try {
+      const supabase = getSupabaseClient()
+
+      if (!supabase) {
+        setError('Supabase is not configured. Please set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY in your .env.local file.')
+        return
+      }
+
+      // Get public URL for the file in Supabase storage
+      const { data } = supabase.storage
+        .from(bucket)
+        .getPublicUrl(path)
+
+      console.log('Supabase URL generated:', data?.publicUrl)
+
+      if (data?.publicUrl) {
+        setModelUrl(data.publicUrl)
+
+        // Test if URL is accessible
+        fetch(data.publicUrl, { method: 'HEAD' })
+          .then(response => {
+            if (!response.ok) {
+              console.error('Model file not accessible:', response.status, response.statusText)
+              setError(`Model file not accessible (${response.status}). Check if the file exists and bucket is public.`)
+            } else {
+              console.log('Model file is accessible')
+            }
+          })
+          .catch(err => {
+            console.error('Failed to verify model URL:', err)
+          })
+      } else {
+        setError('Failed to get public URL for the model')
+      }
+    } catch (err) {
+      setError(`Error loading model: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLoad = () => {
+    if (bucketName && filePath) {
+      loadModel(bucketName, filePath)
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-zinc-900">
+      {/* Control Panel */}
+      <div className="bg-zinc-800 border-b border-zinc-700 p-4">
+        <div className="max-w-6xl mx-auto">
+          <h1 className="text-2xl font-bold text-white mb-4">GLB Model Viewer</h1>
+
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-zinc-300 mb-1">
+                Storage Bucket
+              </label>
+              <input
+                type="text"
+                value={bucketName}
+                onChange={(e) => setBucketName(e.target.value)}
+                placeholder="e.g., models"
+                className="w-full px-3 py-2 bg-zinc-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-zinc-300 mb-1">
+                File Path
+              </label>
+              <input
+                type="text"
+                value={filePath}
+                onChange={(e) => setFilePath(e.target.value)}
+                placeholder="e.g., example.glb or folder/model.glb"
+                className="w-full px-3 py-2 bg-zinc-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div className="flex items-end">
+              <button
+                onClick={handleLoad}
+                disabled={!bucketName || !filePath || loading}
+                className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-zinc-600 disabled:cursor-not-allowed transition-colors"
+              >
+                {loading ? 'Loading...' : 'Load Model'}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <div className="mt-4 p-3 bg-red-900/50 border border-red-700 rounded-md text-red-200">
+              {error}
+            </div>
+          )}
+
+          {modelUrl && (
+            <div className="mt-4 p-3 bg-green-900/50 border border-green-700 rounded-md text-green-200">
+              Model loaded from: {modelUrl}
+            </div>
+          )}
+
+          <div className="mt-4 flex items-center gap-4">
+            <label className="flex items-center gap-2 text-zinc-300 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={useSimpleViewer}
+                onChange={(e) => setUseSimpleViewer(e.target.checked)}
+                className="rounded"
+              />
+              <span>Use Simple Viewer (more stable)</span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {/* 3D Viewer */}
+      <div className="flex-1 relative">
+        {modelUrl ? (
+          useSimpleViewer ? (
+            <SimpleGLBViewer modelUrl={modelUrl} />
+          ) : (
+            <GLBViewer modelUrl={modelUrl} />
+          )
+        ) : (
+          <div className="h-full flex items-center justify-center text-zinc-400">
+            <div className="text-center">
+              <svg
+                className="mx-auto h-12 w-12 mb-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+              </svg>
+              <p className="text-lg">Enter a bucket name and file path to load a GLB model</p>
+              <p className="text-sm mt-2 text-zinc-500">
+                You can also use URL parameters: ?bucket=models&file=example.glb
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

viewer/glb-viewer/components/GLBViewer.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls, PerspectiveCamera, Environment, useGLTF, Center, Grid, Html } from '@react-three/drei'
+import * as THREE from 'three'
+
+interface ModelProps {
+  url: string
+}
+
+function Model({ url }: ModelProps) {
+  const gltf = useGLTF(url)
+
+  // Dispose of the model properly on unmount
+  useEffect(() => {
+    return () => {
+      if (gltf) {
+        gltf.scene.traverse((child) => {
+          if (child instanceof THREE.Mesh) {
+            child.geometry?.dispose()
+            if (child.material) {
+              if (Array.isArray(child.material)) {
+                child.material.forEach(material => material.dispose())
+              } else {
+                child.material.dispose()
+              }
+            }
+          }
+        })
+      }
+    }
+  }, [gltf])
+
+  return (
+    <Center>
+      <primitive object={gltf.scene} />
+    </Center>
+  )
+}
+
+interface GLBViewerProps {
+  modelUrl: string
+}
+
+function LoadingFallback() {
+  return (
+    <Html center>
+      <div className="text-white">Loading model...</div>
+    </Html>
+  )
+}
+
+function ErrorFallback() {
+  return (
+    <Html center>
+      <div className="text-red-500">Failed to load model</div>
+    </Html>
+  )
+}
+
+export default function GLBViewer({ modelUrl }: GLBViewerProps) {
+  const [error, setError] = useState(false)
+  const [contextLost, setContextLost] = useState(false)
+
+  // Handle WebGL context loss
+  const handleCreated = (state: any) => {
+    const gl = state.gl
+    const canvas = gl.domElement
+
+    const handleContextLost = (event: Event) => {
+      event.preventDefault()
+      setContextLost(true)
+      console.log('WebGL context lost - attempting to restore...')
+    }
+
+    const handleContextRestored = () => {
+      setContextLost(false)
+      console.log('WebGL context restored')
+    }
+
+    canvas.addEventListener('webglcontextlost', handleContextLost, false)
+    canvas.addEventListener('webglcontextrestored', handleContextRestored, false)
+
+    return () => {
+      canvas.removeEventListener('webglcontextlost', handleContextLost)
+      canvas.removeEventListener('webglcontextrestored', handleContextRestored)
+    }
+  }
+
+  if (contextLost) {
+    return (
+      <div className="w-full h-full flex items-center justify-center bg-zinc-800">
+        <div className="text-center text-white">
+          <p>WebGL context lost. Please refresh the page.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="mt-4 px-4 py-2 bg-blue-600 rounded hover:bg-blue-700"
+          >
+            Refresh Page
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full h-full">
+      <Canvas
+        shadows
+        onCreated={handleCreated}
+        gl={{
+          antialias: true,
+          alpha: true,
+          powerPreference: "high-performance",
+          preserveDrawingBuffer: true,
+          failIfMajorPerformanceCaveat: false
+        }}
+        onError={() => setError(true)}
+      >
+        <PerspectiveCamera makeDefault position={[5, 5, 5]} fov={50} />
+
+        {/* Lighting */}
+        <ambientLight intensity={0.5} />
+        <directionalLight
+          position={[10, 10, 5]}
+          intensity={1}
+          castShadow
+          shadow-mapSize-width={2048}
+          shadow-mapSize-height={2048}
+        />
+
+        {/* Environment for reflections */}
+        <Environment preset="city" />
+
+        {/* Grid floor */}
+        <Grid
+          args={[10, 10]}
+          cellSize={0.5}
+          cellThickness={0.5}
+          cellColor="#6f6f6f"
+          sectionSize={3}
+          sectionThickness={1}
+          sectionColor="#9d4b4b"
+          fadeDistance={30}
+          fadeStrength={1}
+          followCamera={false}
+          infiniteGrid={true}
+        />
+
+        {/* Model */}
+        <Suspense fallback={<LoadingFallback />}>
+          {!error ? <Model url={modelUrl} /> : <ErrorFallback />}
+        </Suspense>
+
+        {/* Camera Controls */}
+        <OrbitControls
+          enablePan={true}
+          enableZoom={true}
+          enableRotate={true}
+          autoRotate={false}
+          autoRotateSpeed={2}
+        />
+      </Canvas>
+    </div>
+  )
+}

viewer/glb-viewer/components/SimpleGLBViewer.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { Suspense, useRef, useEffect } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { OrbitControls, useGLTF } from '@react-three/drei'
+import * as THREE from 'three'
+
+interface ModelProps {
+  url: string
+}
+
+function Model({ url }: ModelProps) {
+  const { scene } = useGLTF(url)
+  const ref = useRef<THREE.Group>(null)
+
+  // Optional: Auto-rotate the model
+  useFrame((state, delta) => {
+    if (ref.current) {
+      ref.current.rotation.y += delta * 0.2
+    }
+  })
+
+  // Center and scale the model
+  useEffect(() => {
+    if (scene) {
+      const box = new THREE.Box3().setFromObject(scene)
+      const center = box.getCenter(new THREE.Vector3())
+      const size = box.getSize(new THREE.Vector3())
+
+      const maxDim = Math.max(size.x, size.y, size.z)
+      const scale = 5 / maxDim
+
+      scene.scale.set(scale, scale, scale)
+      scene.position.sub(center.multiplyScalar(scale))
+    }
+  }, [scene])
+
+  return <primitive ref={ref} object={scene} />
+}
+
+interface SimpleGLBViewerProps {
+  modelUrl: string
+}
+
+export default function SimpleGLBViewer({ modelUrl }: SimpleGLBViewerProps) {
+  console.log('Loading model from:', modelUrl)
+
+  return (
+    <div className="w-full h-full bg-gradient-to-b from-zinc-800 to-zinc-900">
+      <Canvas
+        camera={{ position: [0, 0, 10], fov: 45 }}
+        gl={{
+          antialias: false,  // Reduce GPU load
+          powerPreference: "default",  // Use default power mode
+          failIfMajorPerformanceCaveat: false
+        }}
+      >
+        <ambientLight intensity={0.5} />
+        <pointLight position={[10, 10, 10]} intensity={1} />
+        <directionalLight position={[-10, 10, 5]} intensity={0.5} />
+
+        <Suspense fallback={null}>
+          <Model url={modelUrl} />
+        </Suspense>
+
+        <OrbitControls
+          enableDamping={true}
+          dampingFactor={0.05}
+          minDistance={3}
+          maxDistance={20}
+        />
+
+        <gridHelper args={[20, 20]} />
+      </Canvas>
+    </div>
+  )
+}

viewer/glb-viewer/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

viewer/glb-viewer/lib/supabase.ts

@@ -0,0 +1,23 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js'
+
+let supabaseClient: SupabaseClient | null = null
+
+export function getSupabaseClient() {
+  if (!supabaseClient) {
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
+    const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+
+    if (!supabaseUrl || !supabaseAnonKey) {
+      return null
+    }
+
+    try {
+      supabaseClient = createClient(supabaseUrl, supabaseAnonKey)
+    } catch (error) {
+      console.error('Failed to create Supabase client:', error)
+      return null
+    }
+  }
+
+  return supabaseClient
+}

viewer/glb-viewer/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

viewer/glb-viewer/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "glb-viewer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.0",
+    "@supabase/supabase-js": "^2.84.0",
+    "next": "16.0.3",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "three": "^0.181.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/three": "^0.181.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

viewer/glb-viewer/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

viewer/glb-viewer/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}