CodeBriefly
Tech Magazine

Curtains Js Lightweight WebGL JavaScript Library

0 1,027

Get real time updates directly on you device, subscribe now.

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

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More