MediaPipe HTML-in-Canvas

Cubic Perspective Portal

A 3D laptop-like portal where MediaPipe face landmarks steer the camera, surrounding cubes, and the scroll position of a real HTML document mounted inside the Three.js canvas.

left wall · gallery · 06

01 FIGURE01/06
02 STUDY02/06
03 DETAIL03/06
04 MOTION04/06
05 FORM05/06
06 CLOSE06/06

Another Boring Website

(click?)

right wall · gallery · 06

01 STRUCTURE01/06
02 PASSAGE02/06
03 GRID03/06
04 SPACE04/06
05 THRESHOLD05/06
06 DEPTH06/06
camera: idlemediapipe: waiting for camerahtml-in-canvas: drawElementImage
This route uses the experimental WICG API: a direct child of the canvas is painted with drawElementImage(). Enable chrome://flags/#canvas-draw-element in Chromium Canary.