How do visual effects (VFX) work?
Film an actor on a rock in front of a green wall, then turn it into a valley with an airship overhead. Key a real green screen, track a shaky camera, stack render passes, roto a leaping stuntman and grow eight extras into a city of thousands, all running live on your graphics card.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- Real footage plus things that were never there. VFX start from the plate, the footage the camera really filmed. A shot then passes through a pipeline: matchmove, layout and animation, FX, lighting and finally compositing. Big films have thousands of these shots: Baahubali 2 had close to 2,500, Avengers: Endgame 2,496.
- Green screen: make one colour see-through. A colour-difference keyer asks how much greener each pixel is than its red and blue, compared with the bare screen. That becomes the matte. Spill from the screen tints the actor, fast motion blurs edges half green, and green costumes vanish, so blue is used for those. Sensors have twice as many green photosites, which makes green the cleanest channel.
- Rebuild the real camera. Trackers follow small markers across the frame. From how near and far points slide (parallax), a camera solve recovers the 3D camera path. It needs at least five to eight good tracks, and the reprojection error should be under about half a pixel. Without a solve, CG slides over the floor.
- A shot is a stack of passes. CG arrives as passes (beauty, shadow, depth) and effects as elements. Each joins the stack with a blend mode: over, add, multiply or screen. A holdout matte lets the actor pass in front. Depth fog from the Z pass, matched black levels and grain make CG look filmed.
- Roto and paint do the invisible work. Without a green screen, artists trace the actor with bezier shapes on keyframes. Wires are painted out with a clean plate, and a luma key plus roto swaps a dull sky. Every keyframe and every frame of paint is artist time, which adds up fast across thousands of shots.
- Build a little, extend the rest. Only what the actors touch is built. Matte paintings on 3D cards, CG cities and crowds of CG agents fill the rest, all through the matchmoved camera. Baahubali's Mahishmati was built partly at Ramoji Film City and extended digitally, and India's animation, VFX and post-production business was about ₹105 billion in 2025.
| Term | Meaning |
|---|---|
| Plate | The original live-action footage a VFX shot is built on. |
| Chroma key | Making one colour, usually green or blue, transparent so another picture shows through. |
| Matte | A black-and-white picture that says how much of each pixel to keep. |
| Spill | Coloured light bouncing off a green or blue screen onto the actor. |
| Matchmove | Recreating the real camera's movement in the computer so CG moves with the plate. |
| Reprojection error | How far, in pixels, solved 3D points land from the real tracks. Under half a pixel is good. |
| Blend mode | The maths used to merge two layers: over, add, multiply, screen and others. |
| Rotoscoping | Drawing shapes round a moving object on keyframes to make a matte. |
| Set extension | Adding painted or CG scenery beyond the part of a set that was really built. |
From a jammed camera in Paris in 1896 to LED walls, digital armies and 2,800-shot epics made in Hyderabad.
- 1896 · A jammed camera makes a bus vanish (Georges Méliès, Paris, France)
- 1902 · A rocket in the Moon's eye (Georges Méliès, Montreuil, near Paris, France)
- 1927 · Mirrors build a giant city (Eugen Schüfftan, for Fritz Lang's Metropolis, Berlin, Germany)
- 1940 · The first bluescreen genie (Larry Butler and team, for The Thief of Bagdad, England and Hollywood, USA)
- 1977 · A camera that remembers its moves (John Dykstra and ILM, for Star Wars, Van Nuys, California, USA)
- 1993 · Dinosaurs that breathe (ILM, Phil Tippett and Stan Winston, for Jurassic Park, California, USA)
- 1999 · Time stops, the camera keeps moving (John Gaeta and team, for The Matrix, Sydney, Australia)
- 2009 · A whole alien world in 3D (James Cameron and Wētā Digital, for Avatar, Wellington, New Zealand, and Los Angeles, USA)
The full story, with 29 moments, charts, people and 50 sources: glassbox.how/e/vfxclear/history. The data lives in history.json.
Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.
| File | What | Size |
|---|---|---|
glassbox/reel.mp4 |
Reel / Short, with captions and soundtrack | 1080×1920 |
glassbox/video.mp4 |
YouTube video, with captions and soundtrack | 1920×1080 |
glassbox/slide-1…10.jpg |
Instagram carousel | 1080×1350 |
glassbox/thumb.jpg |
YouTube thumbnail | 1280×720 |
glassbox/cover.jpg |
Share card and repo social preview | 1200×630 |
glassbox/history-reel.mp4 |
“History in 10 moments” Reel / Short | 1080×1920 |
glassbox/history-slide-*.jpg |
History carousel | 1080×1350 |
glassbox/post.json |
Post copy and schedule used by the publish kit |
This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.
It remembers a few things in your own browser only, and never sends them anywhere:
| Browser storage key | What it holds |
|---|---|
vfxclear.v1 |
Which chapters you have opened, your best quiz scores, and sound on or off. |
Exactly what each one sees is at glassbox.how/privacy.
- Code: MIT. Use it, change it, ship it.
- Explanations, text, images and videos (
glassbox.json,glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/vfxclear”. - Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
- The Glassbox name and logo aren't covered by either licence. See the terms.
Found a mistake? Open an issue. Corrections happen in public.
It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.
python3 -m http.server 8000Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.
Then open http://localhost:8000.
| File | What |
|---|---|
index.html, css/app.css |
The page and its styles |
js/app.js, js/stage.js, js/ui.js, js/kit.js |
The shared Glassbox 3D engine: chapters, 3D stage, controls, quiz, video director |
js/chapters/*.js |
One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes |
js/vfx.js |
VFXClear's compositing pipeline: shot cameras and render layers, HDR passes, the colour-difference keyer with its measured matte, merge and blend-mode shaders, the pinned comp monitor, and the generic actor, studio, airship, robot, crowd and paintings |
glassbox.json |
Title, question, explainer beats, key terms, browser storage and credits shown on glassbox.how |
reel in each chapter |
The storyboard the Glassbox studio records into short videos |
glassbox/ |
The published video, slides, thumbnail and post copy |
fonts/, vendor/three/ |
Self-hosted Geist and Instrument Serif (SIL OFL 1.1) and three.js (MIT) |