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
-
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.
-
Start the development server:
npm run dev
-
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.186 (
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!
