How I Built an IMAX Cinema Inside My Browser 🍿

By Susant (@susantedit) • 8 min read • 🔗 GitHub Repository

"This isn't a movie theatre. It's a browser tab."
"What if your laptop could become a full 3D IMAX cinema — with one command?"
"I typed one line into my terminal. My bedroom became a movie theatre."

🌧️ The Flat-Screen Frustration

It was a cold, rainy Friday night. The rain was beating rhythmically against my window pane, and I had prepared what was supposed to be the ultimate home movie marathon: popcorn freshly popped, room lights switched off, and my favorite high-bitrate sci-fi blockbuster queued up on my PC.

I double-clicked the video file, entered fullscreen, and hit play.

And then... a sudden wave of disappointment hit me.

There it was—a flat, rectangular HTML <video> player floating in a sea of black browser pixels. Sure, the screen resolution was crisp 4K, but the feeling of being in a real cinema was completely non-existent.

Where was the sense of scale? Where was the towering curved 70mm screen wrapping around my peripheral vision? Where were the dark velvet seats, the stadium lighting, and the warm atmospheric bloom bouncing off auditorium walls during explosions? Most importantly, where was the physical 5.1 surround sound that makes your chest vibrate when a spaceship thunders past from behind your left shoulder?

I wasn't experiencing a movie—I was just watching a digital file on a computer monitor.

That was the exact moment the spark ignited. I asked myself:

"Why should web video players stay flat? What if your browser tab didn't just play the video... what if it built the entire IMAX Auditorium around you?"

⚡ The Blueprint of IMAX-FEEL-IN-PC

At 11:30 PM, I opened my editor and created the open-source repository: susantedit/IMAX-FEEL-IN-PC.

No app to install. No monthly subscriptions. Just a single terminal command that turns your laptop into a full 3D cinema running completely locally.

To bring a true IMAX experience to standard web browsers without forcing users to re-encode video files, I architected a high-performance 3-tier engine:

graph TD
    subgraph Frontend ["BROWSER FRONTEND"]
        direction LR
        subgraph ThreeJS ["Three.js 3D Engine"]
            T1["Curved IMAX Screen"]
            T2["Stadium Seating"]
            T3["Dynamic Lighting"]
        end
        
        subgraph AudioEngine ["Web Audio 5.1 Engine"]
            A1["Center / Dialog Channel"]
            A2["FL/FR & RL/RR Channels"]
            A3["Spatial PannerNodes"]
        end
        
        subgraph UILayer ["Dynamic UI Layer"]
            U1["Track Switcher"]
            U2["Subtitles VTT"]
            U3["Cinema Controls"]
        end
    end

    subgraph Backend ["BACKEND NODE.JS SERVER (server.js)"]
        B1["FFmpeg / FFprobe Live Stream Parser"]
        B2["Dynamic 5.1 Audio Extraction<br><code>/api/movies/:file/audio/:track</code>"]
        B3["Dynamic WebVTT Subtitle Extraction<br><code>/api/movies/:file/subtitles/:track</code>"]
        B4["Local Media Directory Scanner<br><code>/movies/</code>"]
    end

    Backend -->|"Video Texture"| ThreeJS
    Backend -->|"Audio Streams"| AudioEngine
    Backend -->|"Metadata & VTT Subtitles"| UILayer

📐 Deep-Dive 1: Curving the 70mm Screen

Flat planes look fake in 3D space. Real IMAX auditoriums utilize a cylindrical high-gain screen curved inward toward the viewer to maximize field of view and prevent optical distortion.

In js/screen.js, I engineered a curved cylinder mesh in Three.js:

// Constructing the curved IMAX screen geometry
const radius = 25;              // Screen curve radius
const height = 12;              // Vertical screen height
const segments = 64;            // Smooth radial curvature
const arcAngle = Math.PI / 3.5; // ~51-degree curved viewing field

const geometry = new THREE.CylinderGeometry(
    radius, radius, height,
    segments, 1, true,
    -arcAngle / 2, arcAngle
);

// Stream the video directly to GPU texture memory at 60 FPS
const videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

const material = new THREE.MeshBasicMaterial({ map: videoTexture, side: THREE.DoubleSide });
const imaxScreen = new THREE.Mesh(geometry, material);
scene.add(imaxScreen);

By streaming the video element directly onto GPU memory via THREE.VideoTexture, every frame renders smoothly without taxing the CPU!

💡 Deep-Dive 2: Dynamic Screen Bloom & Room Reflection

In a real movie theater, bright scenes light up the room. When an explosion detonates, the walls, ceiling, and velvet seats flash with warm light; when the camera cuts to deep space, the auditorium dips into darkness.

To achieve this in js/lighting.js, I built a real-time canvas frame-sampling algorithm:

1. A hidden background canvas samples low-resolution frames of the playing video.
2. The algorithm calculates the dominant RGB colors of the current scene.
3. Three.js PointLight objects smoothly illuminate the 3D seating rows and ceiling beams in real-time.

🔊 Deep-Dive 3: Real 5.1 Surround Sound in 3D Space

Stereo (Left/Right) audio flattens sound. Movies are mixed in 5.1 Surround Sound—separate channels for Center (dialogue), Front Left/Right (effects/music), and Rear Surround (ambient atmospheric cues).

Using the Web Audio API in js/audioManager.js, I instantiated 3D spatial PannerNode sound sources positioned throughout the virtual auditorium:

// Web Audio Context initialization
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// Center Speaker: Dialogue locked directly behind the 3D screen center
const centerPanner = audioCtx.createPanner();
centerPanner.panningModel = 'HRTF'; // Head-Related Transfer Function
centerPanner.setPosition(0, 0, -25);

// Rear Left Surround Speaker: Anchored behind the viewer's left shoulder
const rearLeftPanner = audioCtx.createPanner();
rearLeftPanner.panningModel = 'HRTF';
rearLeftPanner.setPosition(-15, 2, 5);

// Connect 5.1 audio channels to spatial panner nodes
mediaStreamSource.connect(centerPanner, 2); // Connect Center channel
centerPanner.connect(audioCtx.destination);

Dialogue stays locked to actors on screen, while surround sound reverberates around your head in true 3D space!

⚙️ Deep-Dive 4: On-The-Fly FFmpeg Subtitle & Audio Extraction

Movie files (.mkv) often contain multiple dubbed audio tracks (English, Hindi, Spanish) and soft embedded subtitles. Browser <video> tags cannot read embedded .mkv tracks natively.

In server.js, I bundled fluent-ffmpeg, ffmpeg-static, and ffprobe-static:

• Stream Inspection: ffprobe scans the file to list all audio and subtitle streams.
• Live WebVTT Subtitle Stream: When a user selects a subtitle track, Node extracts and streams it as WebVTT on demand:

  app.get('/api/movies/:file/subtitles/:track', (req, res) => {
      ffmpeg(moviePath)
          .outputOptions([`-map 0:s:${req.params.track}`])
          .format('webvtt')
          .pipe(res);
  });
  

• Seamless Audio Switching: Switch dubbed audio languages mid-scene with zero stutter!

🍿 The 4:00 AM Screening

By 4:00 AM, everything came together. I booted the server:

node server.js

🍿 IMAX Media Server running at http://localhost:3000

I opened http://localhost:3000, picked a movie, pressed L to dim the lights, and hit Space.

The lights faded. The curved 70mm screen ignited. Dynamic light spilled across detailed stadium seats, and 3D spatial surround sound echoed through my headphones. Dragging my mouse let me look around the entire room—I was sitting in my own private IMAX theater.

🛠️ Complete Setup Guide (Get Started in 2 Minutes)

Want to turn your PC into an IMAX theater tonight? Follow this simple setup guide:

1. Prerequisites

• Node.js: Version 16.0 or higher (Download Node.js)
• Browser: Google Chrome, Microsoft Edge, or Brave

2. Clone the Repository

Open your terminal and run:

git clone https://github.com/susantedit/IMAX-FEEL-IN-PC.git
cd IMAX-FEEL-IN-PC

3. Install Dependencies

Install packages (FFmpeg binaries are auto-installed!):

npm install

4. Add Your Movies

Place your .mkv, .mp4, or .webm movie files inside the movies/ directory:

IMAX-FEEL-IN-PC/
├── movies/
│   ├── Dune_Part_Two.mkv
│   └── Interstellar.mp4
├── server.js
└── index.html

5. Launch the Theater

Start the local server:

node server.js

6. Sit Back & Enjoy

Open http://localhost:3000 in your browser!

🎮 Controls & Shortcuts

🎥 Video Preview

Check out the full video preview of the 3D IMAX Web Theater experience below (Shorts / Video format):

📸 Tag Me On Instagram!

Movie night just got an upgrade. It's free, open source, and linked below.

Build your own theatre, clone the repo, and show me on Instagram — don't forget to tag @susantedit! I want to see your setup!

• GitHub Repository: https://github.com/susantedit/IMAX-FEEL-IN-PC
• Creator: @susantedit