SpongeBob 3D World (Three.js)

# SpongeBob 3D World - AI Coding Benchmark Prompt

## Purpose

Test AI coding models on their ability to generate a visually stunning, interactive 3D SpongeBob SquarePants underwater world in a single self-contained HTML file using Three.js. Inspired by viral AI benchmarks like "bouncing balls in spinning hexagon" and "3D black hole visualization".

## The Prompt

---

<role>
You are a senior Three.js developer and 3D graphics artist with 12+ years of experience building immersive browser-based 3D experiences. You specialize in creating visually stunning scenes using only Three.js geometry primitives — no external 3D models, no textures files, no assets. You are known for pushing the limits of what's possible in a single HTML file, creating scenes that look like they belong in a AAA game studio portfolio. You treat every pixel as art.
</role>

<instructions>
Create a complete, self-contained, single HTML file that renders an interactive 3D recreation of Bikini Bottom from SpongeBob SquarePants using Three.js (loaded via CDN).

This must be a SINGLE HTML file. No external files, no images, no textures, no model files. Everything — geometry, materials, shaders, lighting, animation, post-processing — must be defined inline. The result should be the most visually impressive underwater 3D scene achievable in a browser.

Be thorough. Don't hold back on complexity. Push the visual quality to its absolute maximum.

## Scene Requirements

### Environment
- Sandy ocean floor with subtle terrain variation (not flat)
- Underwater fog that fades distant objects into deep blue
- Caustic light patterns dancing on the ocean floor (shader-based)
- God rays streaming down from the surface above
- Floating particles: tiny bubbles rising slowly, plankton specks drifting
- Coral formations, kelp/seaweed swaying gently, rocks scattered around
- Distant background suggesting open ocean depth

### Bikini Bottom Landmarks (built entirely from Three.js primitives)
- **SpongeBob's Pineapple House**: Recognizable pineapple shape with door, windows, chimney. Textured leaf crown on top. Warm orange/green colors
- **Squidward's Easter Island House**: Moai/tiki head shape with a blue-gray tone, rectangular door, round windows as eyes
- **Patrick's Rock**: A dome/rock shape that looks like it could be lifted. Sits on sand with a subtle shadow
- **The Krusty Krab**: A building shaped like a lobster trap / treasure chest with a sign, anchor decor, nautical theme, recognizable shape
- Place the buildings on a curved "street" with a path between them

### Characters (built from primitive geometry — boxes, spheres, cylinders, cones)
- **SpongeBob**: Yellow rectangular body, big blue eyes, buck teeth smile, brown pants, red tie, white shirt, black shoes. Iconic silhouette. Idle animation: subtle breathing/bouncing
- **Patrick**: Pink star shape/cone body, green shorts with purple flowers, big dopey smile. Idle animation: slow swaying
- **Squidward**: Teal/blue body, large oval head, prominent nose, brown shirt, standing with arms crossed. Idle animation: annoyed head shake
- **Gary**: Small blue snail with pink spiral shell, googly eyes on stalks. Idle animation: slow crawl movement
- **Jellyfish**: 2-3 translucent pink jellyfish floating above the scene with trailing tentacles, gentle bobbing animation

### Lighting & Atmosphere
- Primary directional light from above (sunlight through water) — soft warm tone
- Ambient light with blue-green underwater tint
- Point lights inside house windows (warm yellow glow)
- Subtle volumetric/god ray effect from surface
- Caustic light patterns projected on the ocean floor

### Camera & Interaction
- Orbit controls: click-drag to rotate around Bikini Bottom, scroll to zoom
- Camera starts at a cinematic angle showing the full scene
- Smooth camera movement with damping
- Optional: slow auto-rotate when user isn't interacting

### Animation
- All characters have idle animations (breathing, swaying, etc.)
- Seaweed/kelp sways in underwater current
- Bubbles continuously rise from various points
- Jellyfish bob and drift lazily
- Caustic light patterns animate on the floor
- Particle system for ambient underwater debris

### Visual Quality Targets
- Underwater color palette: deep blues, teals, sandy yellows, coral pinks
- Materials: use MeshStandardMaterial or MeshPhysicalMaterial for realistic lighting
- Post-processing: underwater color grading, subtle bloom on light sources, chromatic aberration
- Smooth 60fps animation performance
- Anti-aliased rendering
- Responsive: fill the entire browser window, handle resize

### Technical Constraints
- ONE single HTML file — everything inline
- Three.js loaded via CDN (use latest stable version from unpkg or cdnjs)
- OrbitControls loaded via CDN
- Post-processing libraries loaded via CDN if needed (EffectComposer, UnrealBloomPass, etc.)
- No images, no external textures, no .glb/.gltf files
- All textures must be procedurally generated (canvas textures, shader textures, or vertex colors)
- Must work in modern browsers (Chrome, Firefox, Safari)
</instructions>

<context>
This prompt is used as a benchmark to test AI coding model capabilities. The best results will:
1. Create immediately recognizable SpongeBob characters and buildings from only geometric primitives
2. Achieve a genuinely impressive underwater atmosphere that makes viewers say "wow, this is from a single HTML file?"
3. Run smoothly at 60fps with no visual glitches
4. Show mastery of Three.js: custom shaders, post-processing, procedural textures, particle systems, animation systems
5. Demonstrate creative problem-solving in representing complex cartoon shapes using only basic 3D primitives

The viral AI benchmarks that inspired this (bouncing balls in hexagon, black hole visualization) succeeded because they produced visually stunning results from a simple prompt. This prompt should produce something even more impressive — a complete, living 3D world.
</context>

<thinking>
Before writing the code, plan your approach:
1. Scene architecture: How will you organize the scene graph for optimal performance?
2. Character construction: How will you combine primitives to create recognizable characters?
3. Building design: What primitive combinations best represent each iconic building?
4. Underwater atmosphere: What combination of fog, particles, lighting, and post-processing creates the most convincing underwater feel?
5. Animation system: How will you manage multiple concurrent animations efficiently?
6. Shader strategy: Where will custom shaders have the most visual impact? (caustics, god rays, water effects)
7. Performance: How will you maintain 60fps with all these elements active?
8. Color palette: What exact color values capture the SpongeBob aesthetic while feeling underwater?
</thinking>

<output-format>
Respond with ONLY the complete HTML file. No explanations before or after.
The file should start with `<!DOCTYPE html>` and end with `</html>`.
Include all JavaScript inline within `<script>` tags.
Include all CSS inline within `<style>` tags.
The code should be clean, well-organized, and demonstrate expert-level Three.js knowledge.
</output-format>

---