Blood Vessel Voyage

Human red blood cells are about three ten-thousandths of an inch across (no big deal!), and they're coursing through our veins at a relatively speedy three miles per hour, crashing into each other like bike messengers delivering oxygen.

Thanks to modern technology, you can now float down a peaceful river of blood cells right here in your browser. It's like teeny tiny red river rafting, without the added risks of actually being shrunk down to that size (stepped on by cats, eaten by an earwig, etc.)

Creative Technologist Christian Kastner built this demo using the ThreeJS libraries React Three Fiber and Drei. He took it one step further by using the Rapier physics engine and linear algebra to demonstrate the cells colliding, clotting, and jostling downstream, as well as letting you interact with them. Director of 3D Animation Sehzat Oner created the blood cell model in Blender.

Displacing the vessels with the users' mouse was a particularly difficult challenge. Your mouse moves an invisible object that blocks the cells' path. Both this object and the camera through which you view the experience, like Spiritualized, are floating somewhere in space. How do you tell the object where to go, while getting it and the camera to look at each other? Easy:

That's right, it's quaternions: a particularly confusing mathematical way of computing transformations in 3-dimensions. After days of testing, we found an elegant solution in hiding another invisible object in the scene and using its built-in functionality to transform the relatively straightforward Euler rotations into quaternions. And voila, your mouse now has physics, and the experience an added dose of realism. It's not always easy being real, but it's the only way for us to be.