3D Room with Live Web Content

Walk through a room where HTML elements are rendered as live textures on 3D surfaces using the HTML-in-Canvas API

W A S D / ←↑↓→ Move
Mouse Look
Click a form field to type
ESC Exit

1. HTML elements live inside <canvas layoutsubtree> elements

2. drawElementImage() captures live DOM into canvas bitmaps

3. Canvas bitmaps become WebGL textures via Three.js CanvasTexture

4. Walk around and see live-updating HTML on 3D surfaces

This pipeline is impossible without HTML-in-Canvas — previously you needed html2canvas or dom-to-image, which are slow, lossy, and cannot update at 60 fps.

Typing into form — press Esc to release
System Dashboard
00:00:00
CPU
64%
Memory
42%
Network
78%
Disk I/O
31%
Connected — All systems nominal
[--:--:--] OK Canvas texture sync complete
[--:--:--] OK WebGL context acquired
[--:--:--] OK All surfaces rendering
[--:--:--] OK Awaiting input…
Contact En Dash

Drop us
a note

This form is one real HTML element drawn onto the wall via drawElementImage. Aim at a field and click to type.

html-in-canvas.dev · No spam, no third-party tracking
Live CSS Animation
00:00
Thursday, April 10