NeoTokyo 3D

Interactive 3D WebGL cyberpunk metropolis featuring 70+ procedural skyscrapers, flying aerocar traffic, 4 dynamic camera modes (Orbit, Chase-Cam, Drone, Rooftop), and Web Audio synthwave resonance.

Comment

📌 1. Inspiration & Concept

Most web experiences are flat, rigid, and 2D. We set out to build an experience that makes users stop scrolling and says "Wow."

Inspired by the visual aesthetics of Blade Runner 2049, Cyberpunk 2077, and futuristic anime nightscapes, NeoTokyo 3D brings a living, breathing cyberpunk megacity into the browser with zero heavy asset downloads, utilizing optimized procedural geometries and hardware-accelerated WebGL shaders for silky smooth 60+ FPS across mobile and desktop devices.

🌟 2. Key Features

  1. Procedural 3D WebGL Metropolis & Skyscraper Spires: 70+ dynamically generated skyscrapers with glowing neon edge wireframes, illuminated window patterns, and rooftop antenna beacons.
  2. Flying Aerocar Traffic Matrix: Up to 30 autonomous flying aerocars weaving along multi-level aerial sky-lanes with dual glowing ion thrusters.
  3. 4 Interactive 3D Camera Modes:
    • 🕹ī¸ Free Orbit Inspection Mode: 360° pan, drag, and mouse-wheel zoom with smooth spherical inertia physics.
    • 🏎ī¸ Hovercar Chase-Cam Mode: Locks the camera directly behind a flying aerocar cruising through neon spires with real-time vector lerping!
    • 🚁 Cinematic Drone Flyover Mode: Panoramic 360° automated camera orbiting over the city skyline.
    • đŸ—ŧ Rooftop Cyberdeck View: First-person viewpoint from a towering penthouse looking down over traffic.
  4. Real-Time Shaders & Weather Customizer:
    • 4 Neon Lighting Matrices: Cyberpunk Neon (Cyan/Pink), Matrix Code Green, Synthwave Sunset, and Ghost Purple.
    • Live Cyber Rain Particle Simulator (2,500 falling streaks with ground splash physics).
    • Sliders for Volumetric Fog, Traffic Density, and Holographic Wireframe Mode.
  5. Built-In Web Audio Synthwave Engine: Zero-dependency browser synthesizer generating low-pass filtered retro-futuristic bass drones and thruster frequencies using the Web Audio API (AudioContext, OscillatorNode, BiquadFilterNode).
  6. Raycasting Sector Telemetry HUD & Snapshot Exporter: Click any 3D skyscraper to inspect corporate faction owners (Arasaka Heavy Cybernetics, Kiroshi Optics, Megatech Quantum Labs), spire height, and power grid status.

🛠ī¸ 3. Technologies Used

  • 3D Graphics Engine: Three.js (r128+) & WebGL
  • Frontend & UI: React 19, TypeScript, Vite 6, Tailwind CSS 3.4
  • Audio Synthesizer: Web Audio API (AudioContext, BiquadFilterNode, GainNode)
  • Visual Effects: Canvas-Confetti + Lucide Icons
  • License: MIT Open-Source License

Built With

Share this project:

Updates

Submission history