WICG HTML-in-Canvas polyfill

HTML,
as a canvas texture.

three-html-render brings the HTMLCanvasElement API extensions from the W3C draft (requestPaint, texElementImage2D, captureElementImage) to every modern browser, plus the three.js helpers to drop live HTML into a WebGL or WebGPU scene — interactive, not a screenshot.

GitHub → npm WICG spec

One-liner
drop into any page

<script src="https://cdn.jsdelivr.net/npm/three-html-render/dist/polyfill.js"></script>
// HTML-in-Canvas API is now patched onto every <canvas layoutsubtree>.

npm

npm install three-html-render

Use

import { installHtmlInCanvasPolyfill } from 'three-html-render/polyfill'
import { HTMLTexture, InteractionManager } from 'three-html-render'

installHtmlInCanvasPolyfill()     // patches requestPaint, onpaint, ...
material.map = new HTMLTexture(element)
new InteractionManager().connect(renderer, camera).add(mesh)

three.js · glass

Dragon + glass panel

A scrollable HTML page rendered behind a transmissive glass dragon. Hover, type, follow links — all inside the canvas.

Open demo →

Examples

Everything below runs through the polyfill. Source in examples/.

three.js — upstream-compatible API

three.js · webgl

three-html

Direct port of three.js's webgl_materials_texture_html example. HTMLTexture + InteractionManager from three.js 0.184.

three.js · raycast

three-html-raycast

Same cube, but one DOM element translates to the pointer via raycast UV — every face is interactive on a single element. Drag the background to orbit.

three.js · webgpu