File

honey.html

A jar of honey you can stir. Drag the dipper through it and the honey follows — thick, slow, lit like the real thing, and finite: keep dipping and the jar runs dry.

226 KB · Three.js r170 · WebGL 2 · Needs a connection
Download honey.html

Save it, double-click it, it runs in your browser. Give it a moment on first start — it has shaders to compile and maps to fetch.

This started as a question of whether a browser could do honey. Not water, not smoke — something that pours slowly, clings to the dipper, tents up when you lift the head out, and eventually runs out. The answer turned out to be one HTML file.

How it works

Under the picture is a small deterministic simulation that knows nothing about the screen. Every bit of honey lives in exactly one account of a ledger — the pool in the jar, the film on the dipper, the thread falling off it, the puddle on the table — and the only way it moves is a transfer between two accounts, so none of it is ever created or lost by accident. The pool, the film draining down the dipper, the thread and the bridge that forms when you lift the head off its own mound are separate little sims passing volume between each other. The pour is finite on purpose: every dip carries a fraction of the film out for good, and the jar empties dip by dip.

The rendering sits on top of that. Glass and honey are transmissive physically based materials — refraction, thickness, attenuation, a little dispersion — lit by an HDRI from Poly Haven, with bloom and a real depth-of-field pass: the DoF button cycles f-stops, and the focus can be pulled between the rim, the honey and the dipper.

Controls

  • Drag the dipper to stir. Shift-drag or right-drag moves it closer or further, the wheel changes its depth, Q / E tilt it.
  • Drag empty space to orbit. Space drops the dipper in, H brings it home, R resets the jar.
  • F cycles focus, M toggles sound, X goes fullscreen. The buttons along the bottom do the same, plus Pour for a hands-free pour, a quality switch and a choice of lights.

What it needs

  • A browser with WebGL 2 — any current desktop browser.
  • An internet connection. Three.js comes from jsDelivr and the HDRI maps and table textures from Poly Haven; nothing is bundled into the file.
  • Patience on first start. It compiles a lot of shaders and downloads a few megabytes of maps; later starts are quicker once your browser has cached them.

Other files