JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Curtainsjs

    curtains.js is a lightweight vanilla WebGL javascript library that turns HTML elements into interactive textured planes.
    Filed under  › 

    • 🔾36%Overall
    • 594
    • 5.7 days
    • 🕩29
    • 👥4

    What is it ?

    Shaders are the next front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot of very good javascript libraries already handle WebGL but with most of them it's kind of a headache to position your meshes relative to the DOM elements of your web page.

    curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
    You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

    curtains.js demo gif

    Knowledge and technical requirements

    It is easy to use but you will of course have to possess good basics of HTML, CSS and javascript.

    If you've never heard about shaders, you may want to learn a bit more about them on The Book of Shaders for example. You will have to understand what are the vertex and fragment shaders, the use of uniforms as well as the GLSL syntax basics.

    Installation

    In a browser: html <script src="curtains.min.js"></script>
    Using npm: npm i curtainsjs
    Load ES module: javascript import {Curtains} from 'curtainsjs';

    Documentation

    Getting started
    API docs

    Examples

    Basic example

    HTML

    <body>
        <!-- div that will hold our WebGL canvas -->
        <div id="canvas"></div>
    
        <!-- div used to create our plane -->
        <div class="plane">
    
            <!-- image that will be used as texture by our plane -->
            <img src="path/to/my-image.jpg" />
        </div>
    
    </body>
    

    CSS

    body {
        /* make the body fits our viewport */
        position: relative;
        width: 100%;
        height: 100vh;
        margin: 0;
        overflow: hidden;
    }
    #canvas {
        /* make the canvas wrapper fits the document */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .plane {
        /* define the size of your plane */
        width: 80%;
        height: 80vh;
        margin: 10vh auto;
    }
    .plane img {
        /* hide the img element */
        display: none;
    }
    

    Javascript

    window.addEventListener("DOMContentLoaded", function() {
        // set up our WebGL context and append the canvas to our wrapper
        var curtains = new Curtains({
            container: "canvas"
        });
    
        // get our plane element
        var planeElement = document.getElementsByClassName("plane")[0];
    
        // set our initial parameters (basic uniforms)
        var params = {
            vertexShaderID: "plane-vs", // our vertex shader ID
            fragmentShaderID: "plane-fs", // our fragment shader ID
            uniforms: {
                time: {
                    name: "uTime", // uniform name that will be passed to our shaders
                    type: "1f", // this means our uniform is a float
                    value: 0,
                },
            },
        };
    
        // create our plane
        var plane = curtains.addPlane(planeElement, params);
    
        // if our plane has been successfully created
        if(plane) {
            plane.onRender(function() {
                // use the onRender method of our plane fired at each requestAnimationFrame call
                plane.uniforms.time.value++; // update our time uniform value
            });
        }
    
    });
    

    Shaders

    Vertex shader

    <script id="plane-vs" type="x-shader/x-vertex">
        #ifdef GL_ES
        precision mediump float;
        #endif
    
        // those are the mandatory attributes that the lib sets
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;
    
        // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
    
        // our texture matrix that will handle image cover
        uniform mat4 uTextureMatrix0;
    
        // pass your vertex and texture coords to the fragment shader
        varying vec3 vVertexPosition;
        varying vec2 vTextureCoord;
    
        void main() {
            vec3 vertexPosition = aVertexPosition;
    
            gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);
    
            // set the varyings
            // here we use our texture matrix to calculate the accurate texture coords
            vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy;
            vVertexPosition = vertexPosition;
        }
    </script>
    

    Fragment shader

    <script id="plane-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif
    
        // get our varyings
        varying vec3 vVertexPosition;
        varying vec2 vTextureCoord;
    
        // the uniform we declared inside our javascript
        uniform float uTime;
    
        // our texture sampler (default name, to use a different name please refer to the documentation)
        uniform sampler2D uSampler0;
    
        void main() {
            // get our texture coords from our varying
            vec2 textureCoord = vTextureCoord;
    
            // displace our pixels along the X axis based on our time uniform
            // textures coords are ranging from 0.0 to 1.0 on both axis
            textureCoord.x += sin(textureCoord.y * 25.0) * cos(textureCoord.x * 25.0) * (cos(uTime / 50.0)) / 25.0;
    
            // map our texture with the texture matrix coords
            gl_FragColor = texture2D(uSampler0, textureCoord);
        }
    </script>
    
    Show All