In this article, we will discuss Curtains Js Lightweight WebGL JavaScript Library for which convert our HTML elements into interactive textured planes. This is open source library, you can use this in your personal or commercial project without any issue.
Curtains.js is a lightweight vanilla WebGL javascript library, It converts HTML elements (images & videos) into 3D WebGL textured planes, allowing you to animate them via shaders. We can define the plane size and position using CSS, that makes it super easy to add WebGL planes into our pages.
You can download Curtains.js from GitHub. Also, found more resources here.
Here’s the basic working example.
More Examples
Images
Vertex coordinates helper
Simple plane
Multiple textures with a displacement shader
Multiple planes
Asynchronous textures loading
AJAX navigation
Videos
Simple video plane
Multiple video textures with a displacement shader
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee