webgl-dom-page

What problem does it solve?

This Skill provides a robust pattern for creating WebGL-enhanced web pages where 2D DOM elements are seamlessly integrated with 3D WebGL planes, offering advanced visual effects and interactions.

Core Features & Use Cases

• DOM-to-WebGL Mapping: Renders DOM elements as WebGL planes with accurate sizing and positioning.
• Texture Loading & Management: Handles image loading, deduplication, and synchronization with DOM elements.
• Cover UV Scaling: Replicates CSS object-fit: cover behavior within the WebGL shader.
• Portal Pattern: Solves issues with position: fixed elements within transformed containers.
• Use Case: Building a portfolio website where product images are displayed as interactive WebGL planes that respond to scroll and hover effects, while maintaining a smooth transition between pages.

Quick Start

Use the webgl-dom-page skill to create a new WebGL page that maps DOM elements to WebGL planes.