How does a submarine work?
A submarine sinks on purpose and comes back up on purpose. Open its vents, blow its tanks, squeeze its hull at 6,000 m and run it on batteries, all in 3D, and see how a steel tube full of people hovers in the dark sea.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- A strong tube inside a smooth skin. The crew live inside a thick steel pressure hull at ordinary air pressure. Between it and the smooth outer hull sit the main ballast tanks, with vents on top and open flood holes underneath. Trim tanks, air flasks, diving planes, a rudder, a propeller and a sail with periscope and snorkel do the rest.
- Dive by getting heavier. Surfaced, a medium submarine weighs about 1,615 tonnes but its hull, fully under, would push aside 1,775 tonnes of sea. Open the vents and about 160 tonnes of water floods in: now it weighs exactly as much as the water it displaces and hovers. To surface, compressed air blows the water out.
- Deep air is squeezed air. At 100 m the pressure is about 11 times the surface's, so blowing a tank empty there takes 11 times as much air. As the boat rises the air swells and pushes out more water. Warm, light water on top and denser water below the thermocline mean the crew keep trimming.
- Round shapes resist the squeeze. Every 10 m of sea adds about one bar; at 6,000 m it is about 600 bar. A sphere's wall carries half the stress of a tube's, so deep craft like Trieste and India's Matsya 6000, with its 2.1 m titanium sphere, carry their crews in spheres.
- Batteries and chemistry below. Diesels need air, so a diesel-electric boat charges its batteries at snorkel depth and runs on electricity below. Power grows with the cube of speed. Scrubbers remove the kilogram of carbon dioxide each person breathes out every day, and oxygen comes from tanks, candles or electrolysis.
- Seeing by sound, and India's story. Sound travels about 1,500 m/s in sea water, so a 2-second echo means 1,500 m to the seabed. India's first submarine, INS Kalvari, was commissioned on 8 December 1967, now Submarine Day; Matsya 6000 began harbour trials in 2025 for the Samudrayaan mission.
| Term | Meaning |
|---|---|
| Pressure hull | The thick watertight tube or sphere that keeps the crew at normal air pressure. |
| Main ballast tank | A tank flooded with sea water to dive and blown full of air to surface. |
| Neutral buoyancy | Weighing exactly as much as the water you push aside, so you neither rise nor sink. |
| Trim | Fine-tuning a boat's weight and tilt by moving a few tonnes of water between small tanks. |
| Diving planes | Small wings that use the flowing water to push a moving submarine up or down. |
| Thermocline | A layer where the sea cools quickly with depth, so the water below is denser. |
| Hoop stress | The stress in a curved wall holding back pressure: P r ÷ t for a tube, P r ÷ 2t for a sphere. |
| Diesel-electric | Diesels charge batteries; an electric motor turns the propeller, so the boat can run without air. |
| Sonar | Finding things under water with sound, by listening or by timing echoes. |
Four hundred years from a rowing boat under the Thames to a titanium sphere bound for 6,000 m.
- 1620 · Rowing under the Thames (Cornelis Drebbel, London, England)
- 1775 · The Turtle: one person, two hand cranks (David Bushnell, Connecticut, America)
- 1900 · Petrol on top, batteries below (John Philip Holland, Newport, Rhode Island)
- 1954 · The first nuclear-powered submarine (US Navy, Groton, Connecticut)
- 1960 · Trieste reaches the deepest point of the ocean (Jacques Piccard and Don Walsh, Challenger Deep, Mariana Trench)
- 1967 · INS Kalvari: India's first submarine (Indian Navy, Riga, then in the USSR)
- 1992 · INS Shalki: the first submarine built in India (Mazagon Dock, Mumbai, Maharashtra)
- 2012 · Alone to the bottom (James Cameron, Challenger Deep, Mariana Trench)
The full story, with 23 moments, charts, people and 27 sources: glassbox.how/e/submarineclear/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 |
|---|---|
submarineclear.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/submarineclear”. - 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/sub.js |
The generic submarine and deep-sea submersible models, sea pressure and density, chart boards and framing helpers |
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) |