Steam Deck OLED — Interactive 3D Showcase (Three.js, Dynamic Screen Canvas, Web Audio)

Showcase
, , , , , , ,
1

Steam Deck OLED — Interactive 3D Showcase (Three.js, Dynamic Screen Canvas, Web Audio)

Category: Showcase
Tags: showcase, webgl, react-three-fiber, shaders, audio, 3D

Live Links

Project Overview & Master Walkthrough

Hi everyone!

I wanted to share an interactive 3D WebGL showcase I built dedicated to the Steam Deck OLED. My goal was to go beyond a standard e-commerce 3D product viewer and build an interactive web experience with fluid camera orchestration, dynamic screen textures, tactile HUD controls, and a procedural sound engine.

Everything runs in real time in the browser at a steady 60 FPS on modern hardware.

Key Features & Interactive Scenes

1. Hardware Overview & PBR Realism

  • Cinematic Dolly Flyback: The experience opens from a standby pose in darkness, pulling back with a smooth camera dolly to reveal the entire Steam Deck in full 3D.
  • Physical PBR Fidelity: Modeled and textured in Blender, exported to glTF with physical PBR materials (accurate matte plastic grain, thumbstick rubber grip micro-facets, glass reflections, and anodized aluminum triggers).
  • Interactive Gyro / Orbit: Dynamic tilt tracking reacts to cursor movement and mobile orientation, calculating subtle real-time light glints across the chassis.

2. OLED Darkroom & Live Screen Playback

  • Real-Time Dynamic Screen Canvas: The 7.4" display renders as a live HTML5 Canvas texture mapped directly onto the glTF screen UV mesh, updating at 60 FPS.
  • Interactive Split-Comparison Slider: Drag across the screen in real-time to compare pure OLED contrast ratios (infinite black) against traditional backlight LCD bleed. Quick-reset back to center with the 50/50 SPLIT button.
  • 7.0" LCD Bezel Comparison Overlay: Toggle BEZELS to inspect the difference between the legacy 7.0" LCD thick borders and the new 7.4" edge-to-edge OLED panel.
  • Live Reel Switching: Switch between live video streams of Resident Evil 2, Ori and the Will of the Wisps, Alien: Isolation, and Diablo IV with reactive ambilight halo reflections.

3. Sci-Fi Aperture Portal & Game Library Galaxy

  • Mechanical Blade Shutter & Aperture Transition: Procedural geometric shutter wipe with multi-blade aperture animation and tactile pneumatic SFX.
  • 120-Game Planet Mosaic & Orbiting Ring: A rotating spherical galaxy displaying 120 game covers mapped onto spherical UV coordinates, surrounded by an orbiting carousel of verified titles with interactive raycasting, drag physics, and momentum inertia.

4. Performance Architecture & Deep Specs Roadmap

  • Smooth Crystal Dive: Unaccelerated, cinematic camera flight unspooling the game ring into a wave and diving through crystal particles into the hardware architecture.
  • Hardware Roadmap: Interactive technical specifications roadmap of the console.

Tech Stack & Engineering Highlights

  • Rendering Engine: Three.js + React Three Fiber / @react-three/drei
  • Application Framework: Next.js 16 (App Router, Static Export) + React 19 + TypeScript
  • Animation & Transitions: GSAP for timeline sequencing + custom requestAnimationFrame camera interpolations
  • Audio Engine: Web Audio API with programmatic synthesis (haptic clicks, pneumatic shutter sounds, sub-bass transitions, and telemetry chirps)
  • Styling: Tailwind CSS with custom HUD design tokens & SVG overlays

Challenges & Solutions

  1. UV Mapping onto glTF Screen Geometry:
    Mapping an interactive 2D canvas texture onto a curved 3D handheld screen without distortion required custom UV normalization bounds and dynamic aspect-ratio compensation.
  2. WebGL Memory Management & Clean Disposals:
    To prevent memory leaks across rapid scene transitions, all video elements, render targets, textures, and geometry buffers are rigorously disposed of on unmount.
  3. Asset Streaming & Fast First Contentful Paint:
    Heavy video assets for the 120-game sphere and gameplay reels are lazy-loaded with poster fallbacks, keeping the initial payload lightweight.

Feedback & Discussion

I would love to hear feedback from the Three.js community on:

  • WebGL / Three.js performance optimizations or shader improvements you would recommend.
  • Experience on different mobile GPUs / browsers.
  • Ideas for further interactive mechanics!

Special thanks to the Three.js contributors and community for making such an incredible ecosystem!

cc @moderators (thank you for reviewing and approving the showcase!)

Legal Disclaimer

This project is an independent, non-commercial fan concept and interactive 3D showcase created solely for design, technical demonstration, and WebGL study purposes. It is not affiliated with, endorsed by, sponsored by, or connected to Valve Corporation. Steam Deck, SteamOS, Valve, and their respective logos are registered trademarks of Valve Corporation.