The shelf and the opening

A book from four boxes

Back board, spine, page block, front board. The front board sits in its own group, hinged at the spine.

Each book on the shelf is four box geometries. The two boards are 0.045 world units thick and overhang the page block by 0.05, the squares of a real binding. The spine wraps the front. The page block is set in by the squares, and its outer face is the first leaf, the one you see when the cover opens.

The front board is not a child of the book directly. It lives in a small group whose origin is the spine edge, so rotating that group swings the board open on a true hinge.

The name tags are ordinary HTML. Each frame, a point in 3D is projected through the camera and the tag is moved to where it lands. The shelf's labels work the same way.

Cloth and gilt, painted twice

Every face is drawn on a 2D canvas, once in colour and once in a false colour that tells the renderer what is metal.

The spine is a canvas at 420 pixels to the world unit. Its base is a photograph of the real binding's grain, tiled at about a third of a unit; where there is no photograph, a woven cloth is generated from noise and a three-pixel weave. The title is set along its length in the book's own face, with a dark offset beneath and a pale highlight above so the lettering stands up like tooled leaf.

Then the same face is painted again. Green is roughness and blue is metalness. Cloth is rough and dull, so it is painted green. Gold lettering is painted blue, so it turns metallic and catches the light as the sun moves. Pale lettering is stamped pigment rather than leaf, so it is painted matte and does not glint.

Watch the gilt on the spine above as the light circles. The two canvases beneath are exactly what the renderer receives.

The first leaf

Behind the front board is a frontispiece: the author, multiplied onto cream paper.

The page block's outer face is a canvas of cream with a little foxing. The author's portrait is drawn onto it with a multiply blend, so the sketch's white becomes the paper and only its ink is added. Name and dates go beneath in the site's face.

One catch: on the shelf the leaf is lit by ambient light, the sun and the room environment, which together sum to well over one. Left alone, the cream would blow out to white. Its base colour is scaled down until the rendered leaf matches the site's paper, which was measured rather than guessed.

The paste-down inside the board is plain cream, a little darker toward the hinge.

The light

The plates are read under a hard, raking sun. The shelf borrows the same scene and softens it.

There is one scene for the whole site: a paper plane, an ambient light and a directional sun with a shadow map. When the shelf is built it moves the sun in close to the viewing axis, widens the shadow's penumbra from 9 to 30 with three times the blur samples, turns the sun down and the ambient up, and adds a room environment so the gilt has something to reflect.

When a book opens and the shelf is disposed of, every one of those settings is put back for the reading session.

Drag the slider between the two setups. The book, the paper and the camera do not move; only the light does.

The column

Books lie on their backs in one column, spines to the viewer, and the page scrolls down it.

Each book is placed by its format. The column grows downward, one book's thickness and a gap of half a unit at a time. The camera distance is solved from the longest book plus a margin of air, the field of view and the window's aspect, so the widest spine always fits.

The scroll is real: an invisible spacer gives the page a height in proportion to the column, and each frame the focus point slides down the column by however far the page has scrolled. Camera, sun and paper all follow the focus. Nothing else knows scrolling exists.

The label cards are HTML, projected from a point just to the right of each book and kept inside the window's edge.

Hover

A ray from the pointer picks a book. The book eases toward the viewer and tips its board.

Every frame a ray is cast from the pointer through the camera and tested against the books' meshes. The book under the pointer wants a hover value of one, every other book wants zero, and each value eases toward its target so a book comes forward over a few tenths of a second and settles back the same way.

Hover moves the book 0.3 units toward the viewer and tips its front board 0.2 radians, a small nod. The pointer also steers the camera a little, and the camera looks slightly toward the pointer, which is the parallax you feel on the shelf.

Move your pointer over the book above. The maths is the same as the shelf's.

The opening

One number from zero to one drives three overlapping moves, and the camera dollies in as it goes.

Opening a book is a single pose function of a parameter t. Over the first 55 hundredths the book rises from its slot to a spot well in front of the column, with a small sine arc so it lifts before it travels. From a tenth to 65 hundredths it turns from lying on its back to standing face-on, a slerp between two quaternions. From 45 hundredths to the end the cover swings 2.75 radians on its hinge. Each span is eased, so the moves overlap without a jolt.

The camera follows the same clock, dollying from the shelf distance to a fixed distance in front of the open book over the first seven tenths. The whole move takes 1.7 seconds, then lingers 1.6 on the frontispiece.

Then the paper curtain: a page-sized div in the paper colour fades up over half a second. Behind it the shelf is torn down, its lights restored, and the reading session starts on the same canvas. The curtain fades and you are among the plates. Closing runs it all backwards, with the book rebuilt already open so the curtain lifts on the pose you left.

Scrub the opening by hand, or play the whole round trip.