WebGL Overlay

This example demonstrates a technique for rendering three.js canvases that integrate with scrollable HTML content. 3D elements can appear both in front of and behind HTML elements.

How It Works

The overlay system uses two separate WebGL renderers: one positioned behind the HTML content (background) and one in front (foreground). By adjusting the camera's near and far clipping planes for each render pass, objects closer than a threshold depth render in the foreground, while objects further away render in the background.

The camera position is synchronized with the scroll position of the page, creating the illusion that the 3D scene exists in the same coordinate space as the HTML document. A forced pixels-per-meter calculation ensures consistent sizing across different viewport dimensions.

Element Mapping

HTML elements can be mapped to 3D representations. In this demo, paragraph elements are visualized as wireframe boxes in 3D space, allowing for potential interaction between 3D objects and page content.

Applications

This technique enables creative web experiences where 3D graphics seamlessly blend with traditional HTML layouts. Use cases include decorative page elements, interactive visualizations embedded in articles, and immersive scrolling experiences.

Scroll to see 3D elements interact with the page.