I made a page where you enter through the mouth or nose, as a piece of food or a capsule endoscope, and travel in 3D through the throat, esophagus, stomach, small and large intestine, or down the windpipe into the lungs. Along the way, stomach acid changes the color and the gates (sphincters) open and close. The view uses Three.js; the tube drawing and the body's calculations are my own.
https://sishiya.github.io/manabi-lab/body-dive/?lang=en
This post covers how the tubes are drawn, the hardest part (where tubes meet), collision, and how time runs inside the body.
A tube = a center line + a radius
Every path in the body is a center line with a radius. Each point is [x, y, z, radius, region], in centimeters. Tube widths are roughly life-size, but the small and large intestines are heavily shortened.
prepTube() resamples the center line evenly and gives each sample a radius, region and a parallel-transport frame (N/B/T). The mesh is built from that, and each vertex also carries the type of fold for its region:
- nasal turbinates, tongue, cartilage rings of the windpipe, stomach folds, circular folds of the small intestine, haustra of the colon...
We look from the inside, so tubes are drawn double-sided with normals flipped toward the viewer.
Moving things in the shader
The stomach swelling and shrinking, gates tightening, and peristaltic waves are done in the vertex shader by changing the tube radius. The fragment shader handles holes, noise bumps, lighting and fog.
The hardest part: where tubes meet
In the throat, the path from the nose and the path from the mouth merge, and then split into the windpipe and esophagus. If you simply overlap separate tubes, one tube's wall stands in the way inside the other.
So each tube's shader receives the other tube's shape as a list of capsules (segment + radius), and discards any of its own wall that lies inside the other tube, cutting a hole.
- Capsules are only near the junction (with a quick sphere test first)
- Folds are removed near the junction; otherwise the hole's edge shifts and you can see the darkness outside
That led to a rule: never put a gate that changes width, or the swelling stomach, at a junction. The hole is static, so if the tube moves, a gap appears.
Because the shape is approximated with capsules, a thin gap can still show at the hole's edge (a known issue).
Collision
You can move within radius × factor − 0.1 cm of each segment (every third sample of the center line), leaving 0.1 cm from the wall.
A bigger margin looks safer, but then you cannot pass through junctions. Once, I could no longer get from the mouth into the throat. After any change, I check that all three entrances (mouth, nose, anus) can be traveled through.
When a gate is closed, its segments get a negative radius and are dropped. On top of that, crossesClosed() cancels any move that crosses a gate. That double guard keeps you from jumping through a thin gate in a single frame.
Time inside the body
Food takes hours to pass the stomach, so the time speed-up differs by region:
| Region | Speed-up |
|---|---|
| Mouth, esophagus | ×1 |
| Stomach, small intestine | ×60 |
| Large intestine | ×240 |
The body calculation simStep(minutes, region) advances things like:
- Stomach: acid changes color and breaks food down. The pylorus opens only when contents become a paste, or during the strong fasting contraction (MMC phase III)
- Small intestine: bile turns it yellow. The ileocecal valve opens after 150 minutes in the small intestine
- Large intestine: bacterial fermentation, water absorption, browning. It stops in the sigmoid colon and moves to the rectum with a mass movement
- Stool form (Bristol scale) is decided from water content
If you choose sake, blood alcohol is computed too (Widmark formula: 60 kg body, 42 L distribution volume, 6.5 g/hour elimination).
The third-person camera
There is also a third-person camera that shows you (the food, capsule, etc.) from behind. At first it sat directly behind you, but near walls it had nowhere to go, moved into the body and flickered. Now the camera is placed behind you along the tube's center line.
Estimates and effects
Shortened lengths, transit times, color changes and so on are "estimates" or "effects". The start screen's "About this app" separates what is established from what is estimated.
For example, the app says the small intestine is "about 3 m in the living body". The often-quoted 6 m is the length after death (OpenStax).
Main sources
- J. G. Betts et al. (2022) Anatomy and Physiology 2e, OpenStax
- StatPearls (chapters on the esophagus, stomach, duodenum and rectum)
- S. J. Lewis, K. W. Heaton (1997) (Bristol stool scale)
- MEXT, Standard Tables of Food Composition in Japan (8th edition, 2023 supplement)
The other sources (18 in all) are in the app.
This page is part of Manabi Lab, a series of small learning apps that run in the browser (English and Japanese). The code and this post were written together with AI (Claude).
Top comments (0)