One texture

No. 37 · Early example

A pocket: one level, half the lastA loupe: one paneIts base: the window it readsThe pane’s own boxI’ve built the texture as a tray. The print in the slot at the back is the <img>, 2400 × 1500; hang() uploads it once with texImage2D, flipped in Y, and generateMipmap fills the other eleven pockets, each half the last, down to the 1 × 1 pit. Packed this way the twelve hold 4,799,605 texels, a third more than the picture. A dot is 75 × 75 texels of its level, and the lamps count the levels. Each loupe is a pane standing on the window it reads: its own box, dotted, plus the reach of its bend and blur, 89 px clear and 100 px frost. In a 1200 × 750 box on a 2× screen the clear panes draw at device pixels and read level 0; the frosted one draws at half scale, a quarter of the pixels each way, so its level is 1.99991 and it reads level 2. A new src is one upload, written from the bottom row up, and every pocket and lens follows.

A tray holding one uploaded picture and its packed chain of twelve mip levels, read through three loupes at the sizes they need.

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL.

Install

npm install anatomy-figures

In your code

page.tsx

import { OneTexture } from "anatomy-figures";

<OneTexture theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import OneTexture from "anatomy-figures/one-texture";

Theme it

Early examples keep their own light and dark palettes: theme picks one, and --anatomy-card sets the ground.

page.tsx

<OneTexture
  theme="dark"
  tokens={{ "--anatomy-card": "#000000" }}
/>

Without React

It still draws with React inside, so install react and react-dom next to it.

index.html

import { define } from "anatomy-figures/element/one-texture";

define();

<anatomy-one-texture theme="light"></anatomy-one-texture>