Build notes · 2026

WebGL-Letter-Generator

A small graphics experiment about turning ordinary browser text into a responsive 3D object without a scene library.

  • React
  • TypeScript
  • WebGL2
Colorful voxel letters M and B on a dark grid

From text to voxels

The browser first draws the entered text onto an off-screen canvas. I sample that bitmap into a coarse grid and keep every cell with enough visible pixels. The result is a compact set of coordinates that still preserves the shape of the original letters.

Each occupied cell becomes a shallow cube. Faces shared by neighboring cells are omitted, which keeps the geometry smaller and avoids drawing surfaces nobody can see.

Rendering and interaction

The remaining faces are uploaded to WebGL2 as position and color buffers. A small vertex shader handles the projection and rotation, while the fragment shader paints the directional face colors.

Pointer movement sets a target rotation rather than changing the model directly. Interpolating toward that target on every animation frame gives the letters their smooth, weighty response.