Map DOM elements to WebGL planes with texture loading and cover UV scaling.
npx skills add https://github.com/BamoJ/playfight-2k26 --skill webgl-dom-page
Please help me install this Agent Skill. Skill: webgl-dom-page Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/webgl-dom-page Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill webgl-dom-page
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.
object-fit: cover behavior within the WebGL shader.position: fixed elements within transformed containers.Use the webgl-dom-page skill to create a new WebGL page that maps DOM elements to WebGL planes.
High-intent search queries and answers about installing and using this skill.
Mapping DOM elements to WebGL planes involves rendering 2D elements as 3D objects with accurate sizing and positioning. This pattern manages texture loading synchronization and cover UV scaling to replicate CSS object-fit behavior within shaders.
Position fixed elements break because transformed containers create new containing blocks. The portal pattern solves this by managing fixed elements within transformed containers, ensuring correct visual positioning during WebGL interactions.
Handling WebGL texture loading requires managing CORS restrictions and synchronizing DOM image visibility. This pattern ensures correct DOM image visibility for accurate rendering and handles image loading deduplication.
Replicating CSS object-fit cover in WebGL shaders is achieved through cover UV scaling. This technique adjusts texture coordinates within the shader program to match the visual behavior of the CSS property.
The Page and View orchestrator pattern structures WebGL page transitions by managing texture loading, template scoping, and interaction layers. It ensures seamless synchronization between DOM elements and WebGL planes during navigation.
Managing template scoping is necessary when integrating WebGL with DOM elements to ensure correct rendering contexts. This pattern handles template scoping to isolate visual layers and maintain accurate DOM image visibility.
MCERQUAEmbed interactive HTML onto named mesh objects in Three.js scenes.
Logisoft-webImplement shaders, physics-based animations, and cinematic transitions with WebGL, CSS, and JavaScript.
adamhjkCreate custom shaders and filters for PixiJS v8 with WebGL and WebGPU.
ayofemiadeCreate scroll-driven web animations with GSAP and ScrollTrigger.