0 min left
Modelling the eye: The cornea

Modelling the eye: The cornea

We start at the very front of the eye. What shape is the cornea, why isn't it a simple sphere, and how do we build it in WebGL?

Ask a graphics programmer to model an eyeball and the first instinct is usually a glass sphere. It renders fast and looks clean. The problem is that a real eye shaped like a perfect sphere would turn every night-time streetlight into a glowing smear.

The clear dome at the front of the eye, the cornea, is a more interesting shape than a sphere, and it does most of the focusing. Of the eye’s roughly 60 diopters of optical power, the cornea supplies about 43. The famous crystalline lens inside handles the rest and does the fine-tuning. But how do we know it is not just a solid dome of biological glass? When Antonie van Leeuwenhoek first looked at corneal tissue through his homemade microscopes in the 1680s, he found it was not glass at all, but a tightly woven fabric of living fibers.

In this series we build the eye one part at a time in WebGL. Each section below has a live 3D view, and a Code tab with the full source. Let us start at the front.

The spherical cap: a first approximation

Before hospital scanners existed, people measured the eye with clever tricks. In 1619 Christoph Scheiner held glass marbles of known size next to a person’s eye and matched the reflections until the curvatures agreed. Two centuries of refinement later, we have the number every optometrist still uses: the front of the cornea has a radius of curvature of about R≈7.8 mmR \approx 7.8\ \text{mm}.

The visible cornea is a slightly oval window, roughly 11.7 mm11.7\ \text{mm} wide and 10.6 mm10.6\ \text{mm} tall, because the white of the eye overlaps it top and bottom. For a first WebGL model we ignore that and slice a clean cap off a sphere.

In Three.js a sphere already knows how to draw itself. We just tell it to keep only the front cap by limiting the vertical sweep angle:

// A cornea, roughly, is a cap sliced off the front of a sphere.
// The last two arguments keep only the top slice instead of the whole ball.
const geometry = new THREE.SphereGeometry(
  1,               // radius
  64, 64,          // horizontal and vertical smoothness
  0, Math.PI * 2,  // sweep the full circle around
  0, Math.PI / 4   // but only 45 degrees down from the top: the cap
);

So why is a sphere a bad lens? Light rays hitting the steep edge of a sphere bend more sharply than rays near the center, so they focus at slightly different points. The result is spherical aberration: a bright point of light spreads into a soft halo instead of a crisp dot. To see well at night, the eye had to abandon the sphere.

The aspheric cornea: flattening the edges (the Q value)

Nature fixes spherical aberration by gently flattening the cornea toward its edges while keeping the center steep. Optical engineers describe this shape mathematically using conic sections (like ellipses or parabolas), governed by a single number: the conic constant QQ. The height of the surface (called the sag, zz) at a distance rr from the center is defined as:

z(r)=c r21+1−(1+Q) c2r2z(r) = \frac{c\, r^2}{1 + \sqrt{1 - (1+Q)\, c^2 r^2}}

Here c=1/Rc = 1/R is the curvature at the very center. The value of QQ changes the shape:

  • Q=0Q = 0 (sphere): constant curvature everywhere. Strong halos around night lights.
  • Q<0Q < 0 (prolate): steeper center, flatter edges. The healthy human cornea sits near Q≈−0.26Q \approx -0.26.
  • Q>0Q > 0 (oblate): flatter center, steeper edges. Common after laser surgery, and it makes night glare worse.

Interestingly, the human cornea does not flatten all the way to the value that would cancel spherical aberration completely (about −0.53-0.53). It leaves a little behind on purpose, because the lens deeper in the eye bends light the opposite way and cancels most of what is left. The two roughly balance out in a young, healthy eye.

Translating the sag formula into code is almost a direct copy:

const c = 1 / R;                 // curvature at the apex
for (let r = 0; r <= maxR; r += step) {
  const root = 1 - (1 + Q) * c * c * r * r;
  const z = (c * r * r) / (1 + Math.sqrt(root)); // surface height at radius r
  // ...place a ring of vertices at this height
}

Use the buttons below to switch between the healthy human cornea, a perfect sphere, and a post-surgery oblate shape. The color runs from green at the center to the shape’s color at the rim, so you can see where each one bends light differently.

Asphericity (Q)
Conic constant Q-0.26
Prolate: steep center, flatter edges. Cancels most spherical aberration.
perfect sphere reference

Astigmatism: a cornea shaped like a rugby ball

A perfect cornea is equally curved in every direction, like a slice of a basketball. An astigmatic cornea is curved more in one direction than another, like the back of a spoon or a rugby ball. This is regular astigmatism, and Thomas Young first measured it on his own eyes in 1801.

We model it by giving the two axes their own curvatures instead of sharing one. This is called a toric surface. In code it is the same sag formula as before, but with a separate curvature for xx and for yy:

// One curvature is no longer enough: cx along X, cy along Y.
const root = 1 - (1 + Q) * (cx*cx*x*x + cy*cy*y*y);
const z = (cx*x*x + cy*y*y) / (1 + Math.sqrt(root));

The two directions of maximum and minimum curvature are called the meridians. In the view below the flat meridian is drawn in blue and the steep one in red. Because the two meridians focus at different distances, an astigmatic eye never forms a single sharp point. Light collapses into two short focal lines with a zone of “least blur” between them, a shape optics calls Sturm’s conoid.

Toric Cornea
X axis: flat meridian (Rx = 7.8 mm)
Y axis: steep meridian (Ry = 6.0 mm)
Z axis: surface height
CurvatureSteep
Flat

Inside the cornea: six layers

Up close the cornea is not one clear sheet but six stacked layers, all packed into about half a millimeter (the average central thickness is roughly 540 μm540\ \mu\text{m}):

LayerThicknessRefractive indexRole
1. Epithelium≈50 μm\approx 50\ \mu\text{m}1.4011.401Renewing outer cells; gives tears a smooth surface.
2. Bowman’s layer≈10 μm\approx 10\ \mu\text{m}1.3801.380Tough collagen sheet; protects against scratches.
3. Stroma≈452 μm\approx 452\ \mu\text{m}1.3761.37690% of the thickness; hundreds of ordered collagen sheets.
4. Dua’s layer≈15 μm\approx 15\ \mu\text{m}1.3761.376Thin but very strong pre-Descemet layer.
5. Descemet’s membrane≈8 μm\approx 8\ \mu\text{m}1.3581.358Elastic base that the endothelium sits on.
6. Endothelium≈5 μm\approx 5\ \mu\text{m}1.3351.335Single sheet of cells that pump water out.

Why is it clear? The stroma is made of collagen, the same protein as a white, opaque tendon. The trick is spacing: the collagen fibers are packed closer together than half a wavelength of light, so the light they scatter cancels out sideways and only forward-travelling light survives (Benedek, 1971). If the endothelial pumps fail and water floods in, the fibers drift apart, the cancellation breaks, and the cornea turns cloudy white.

A recent anatomical debate. For over a century, textbooks firmly listed five layers. Then, in 2013, researchers proposed a controversial sixth layer (Dua’s layer), a thin and unusually tough sheet just in front of Descemet’s membrane. While many anatomists still debate whether it is truly a novel layer or just the dense posterior edge of the stroma, its discovery helped explain why a surgical technique that injects an air bubble to separate corneal tissue splits it exactly where it does.

The model below is an anatomic cross-section drawn to scale, so you can see just how much of the cornea is stroma. The stroma’s collagen sheets are shown as fibers whose direction rotates from one sheet to the next (like plywood, which is where the strength comes from), and the endothelium is drawn as its real hexagonal mosaic. Press the button to pull the layers apart.

Corneal Layers (to scale)
1. Epithelium
50 µm
2. Bowman's Layer
10 µm
3. Stroma
452 µm
4. Dua's Layer
15 µm
5. Descemet's Membrane
8 µm
6. Endothelium
5 µm

The tear film and its oil-slick colors

The very first thing light meets is not cells but tears. A film only 33 to 5 μm5\ \mu\text{m} thick coats the cornea, and its outermost skin is a layer of oil just 4040 to 100 nm100\ \text{nm} thick, spread there by glands in the eyelids to slow evaporation.

That oil layer is thinner than a wavelength of light, which is exactly the condition for thin-film interference, the same effect that paints rainbows on soap bubbles and puddles. Light reflecting off the top of the film and light reflecting off the bottom travel slightly different distances, so some colors reinforce and others cancel. The colors that shine brightest satisfy:

2 n dcos⁡θ=(m−12)λ,m=1,2,3,…2\, n\, d \cos\theta = \left(m - \tfrac{1}{2}\right)\lambda, \quad m = 1, 2, 3, \dots

where nn is the oil’s refractive index, dd its thickness, θ\theta the angle of the light inside the film, λ\lambda the wavelength, and mm is the integer order of interference. Drag the model to catch the faint sheen shifting across the surface.

Tear Film: Thin Film Interference
A wafer-thin oil layer floating on the watery tears. As its thickness drifts, different colors cancel and reinforce, giving the faint oil-slick sheen.

When it goes wrong: keratoconus

If the collagen in the stroma weakens, normal eye pressure can push the cornea outward into a cone. This is keratoconus, and the bulge usually forms low and slightly off-center rather than at the apex.

Biomechanically, keratoconus involves a dangerous thinning of the tissue. But to approximate it purely visually in our shader, we can do the opposite: start from a healthy sphere and add a small Gaussian bump below the center.

let z = Math.sqrt(R*R - rho*rho) - R;   // healthy spherical cornea
const dist = Math.hypot(x, y + 1.5);    // cone centered 1.5 mm below apex
z += 1.5 * Math.exp(-(dist * dist) / 2); // add a forward bulge

The effect on vision is worse than plain short-sightedness. The cone is not symmetric, so it does not just shift the focus, it distorts it. A single streetlight smears into a comet-like streak (opticians call this coma), and the irregular shape cannot be corrected by ordinary glasses, only by rigid contact lenses or surgery that reshapes or reinforces the tissue. Drag the model to see the cone in profile.

Keratoconus
A thinned cornea bulging forward into a cone, low and off-center. Drag to rotate and see the profile.
↓ Inferior (cone forms here)

Measuring the shape: Placido rings

How does an optician measure these tiny bumps without touching the eye? By watching reflections. In 1880 António Plácido projected a target of concentric black and white rings onto the cornea and looked at the reflection. On a smooth cornea the rings reflect back as clean circles. Where the cornea is steeper, the reflected rings bunch closer together; where it is flatter, they spread apart. A distorted cornea gives distorted rings, like looking through warped glass. Modern computer topographers still work exactly this way.

Topography
Steeper = redder
The rings on the right reflect off this same surface. They crowd together where the cornea steepens (red), just like a real topographer.
Placido Reflex

Putting it together

The final model combines everything above: the six layers, a toric shape with its two curvatures shown in clinical diopters (K=337.5/RK = 337.5 / R in mm), the aspheric QQ flattening, and adjustable thickness. The light rays are a simplified trace through the front surface only. They show how astigmatism and asphericity smear a focus, without pretending to be a full optical simulation.

Simulated Vision

A hyperrealistic finish

The models above are built to explain, so they favor clear colors and diagrams over looking real. To close the loop, here is just the cornea dressed for realism: the same aspheric shape, now a clear meniscus dome (an aspheric front surface with a steeper back surface) made of a glassy transmission material with a clearcoat, refracting a synthetic studio environment. The bright highlight riding on the surface is the corneal reflection an optician calls Purkinje image P1, the same reflection Placido rings rely on. Drag to move it around the dome.

Hyperrealistic Cornea
Built to average anatomy: Rant 7.8 mm, Rpost 6.5 mm, Q −0.26, thickness 0.55 mm. Glassy transmission with dispersion, a drifting tear-film sheen, and reflections. Drag to orbit.

That gives us a solid front surface for the eye.

References

  1. Young, T. (1801). On the Mechanism of the Eye. Philosophical Transactions of the Royal Society of London, 91, 23-88.
  2. Helmholtz, H. von (1854). Ueber die Accommodation des Auges. Graefes Archiv für Ophthalmologie, 1(2), 1-74.
  3. Atchison, D. A., & Smith, G. (2000). Optics of the Human Eye. Butterworth-Heinemann, Oxford, Chapter 2.
  4. Maurice, D. M. (1957). The structure and transparency of the cornea. Journal of Physiology, 136(2), 263-286.
  5. Benedek, G. B. (1971). Theory of transparency of the eye. Applied Optics, 10(3), 459-473.
  6. Dua, H. S., Faraj, L. A., Said, D. G., Gray, T., & Lowe, J. (2013). Human Corneal Anatomy Redefined: A Novel Layer (Dua’s Layer). Ophthalmology, 120(9), 1778-1785.
  7. Plácido, A. (1880). Novo instrumento para analyse da curvatura da cornea. Periodico Ophthalmologico, 2(5), 44-49, Lisbon.