Siphon Part I (Of the Siphon Quadrilogy)

A 3D world of rudimentary, but sharp graphically nature - featuring smooth, glossy shapes in a pastel candy-colored landscape.

Features

• WebGPU rendering - Modern GPU API for high-performance 3D graphics
• WebGPU required - No WebGL fallback; unsupported browsers get a diagnostics screen (docs/webgl-fallback.md)
• Smooth, glossy graphics - Rounded organic shapes with specular highlights
• Nature-themed candy world - Trees, mushrooms with faces, and clouds
• Pastel color palette - Soft greens, pinks, purples, and oranges inspired by candy aesthetics
• First-person controls - Pointer lock mouse look, WASD movement, and movement abilities
• Animated elements - Mushrooms bounce and clouds drift across the sky
• 3D perspective - Proper depth rendering with WebGPU
• npm buildable - Modern build system with Vite

Visual Style

The world features:

• Mushroom-style trees with rounded caps and brown trunks
• Smooth rocks in pastel purple and pink tones
• Colorful mushrooms with soft caps
• Floating clouds in the cream-colored sky
• Decorative spheres scattered throughout
• Glossy shading with specular highlights for a polished look

Inspired by low-poly nature scenes with a candy twist!

Building visuals? Start with grok.md (5-minute quick-start) and the Candy Material Cookbook — reusable glossy-material recipes, copy-paste TSL snippets, and an "adding a reactive plant" tutorial.

Roadmap: Part I scaffolds (Sky Islands, fauna, opt-in presence, awakened flora) are landing. The capstone epic (#1492) shipped Presence productization + Subterranean Sugar Caves as the Part II door — descend from Melody Lake after awakening flora. See docs/CAPSTONE_ROADMAP.md and docs/SUGAR_CAVES_SHIP.md.

How to Run

Note: For detailed setup instructions including native module compilation with Emscripten, see SETUP_GUIDE.md

Development

1. Install dependencies:

   npm install

   CI installs with pnpm install --frozen-lockfile (pnpm-lock.yaml is the source of truth for exact versions), but npm install is supported too and is built on every PR by the npm install build workflow. Don't put a version pin only in pnpm-workspace.yaml or the pnpm field of package.json, because npm ignores both.

2. Start the development server:

   npm run dev

3. Open your browser to http://localhost:5173

   Quick dev boot

   • Default: npm run dev → click Enter (Play path)
   • Instant: npm run dev:fast → auto-enters spawn chunk
   • Full world QA: ?boot=explore or BOOT_PATH=explore npm run test:world

   WebGPU is required — ?renderer=webgl is ignored. See docs/webgl-fallback.md.

   Graphics quality lives in Settings (save menu). It applies the next time you enter.

Production Build

Build the project for production:

npm run build

The built files will be in the dist/ directory. You can preview the production build with:

npm run preview

Requirements

• Node.js 16+ and npm
• A modern browser with WebGPU (Chrome/Edge 113+, Firefox ≥141, Safari ≥26). There is no WebGL fallback: without a working WebGPU adapter, boot stops at a diagnostics screen
• COOP/COEP: dev/preview servers emit cross-origin isolation headers for SharedArrayBuffer / libopenmpt — check window.crossOriginIsolated if audio pthreads fail

Controls

First-person

• Click / Mouse - Enter pointer-lock and look around in first-person
• W / A / S / D - Move
• Shift - Sprint
• Space - Jump (double-jump supported)
• E / F / Z - Dash / Jitter Mine / Phase Shift
• Esc - Pause and release cursor

Cinematic Explore / Wander

• Tab (hold) - Temporary orbit camera (release Tab to return to first-person)
• Pause menu → Explore Mode or ?explore=1 - Toggle persistent explore (saved in localStorage)
• ?explore=hybrid - First-person with right-mouse orbit + WASD pan while orbiting
• Drag / scroll - Orbit and zoom while exploring
• Enter / click - Exit explore at current view (ground-snapped spawn)

Technical Details

• Built with Three.js ^0.171 (three/webgpu + three/tsl) on a single probed WebGPU device
• WebGPU only: Three's automatic WebGL2 backend fallback is disabled (see docs/WEBGPU_CONTEXT.md)
• Advanced materials:
  • MeshPhysicalMaterial with clearcoat for candy surfaces
  • MeshStandardMaterial for ground and other elements
  • Transparent materials for clouds
• Procedurally generated geometry:
  • Smooth spheres for tree canopies and mushroom faces
  • Domed caps (hemisphere geometry) for mushroom caps
  • Cylinders for tree and mushroom stems
  • Rolling hills with sine wave displacement
• 30 trees, 20 animated mushrooms with faces, and 15 floating clouds
• 300x300 unit terrain with fog effects
• PointerLockControls for immersive first-person camera movement
• Vite build system for fast development and optimized production builds

Enjoy wandering through this memorable 3D candy nature world!