Basic concept

The library is built around 3 main classes that will handle respectively the canvas and its WebGL context, the planes that will be displayed and their textures.

  • Curtains Class v1.0

    The Curtains class is responsible for the canvas and WebGL context and therefore creates a WebGL scene. It also creates a requestAnimationFrame loop and will draw every Plane elements that you've created.

  • BasePlane Class v3.0

    The BasePlane class is used internally to create a WebGL plane mesh element. It will set up its program and shaders, buffers and attributes, vertices and texture coordinates and uniforms.
    It will also set up basic events and callbacks and all the source loading methods to create textures.

    • Plane Class v1.0

      The Plane class extends the BasePlane class.
      A Plane is bound to a HTML element and will copy its sizes and positions thanks to the projection and model view matrices.
      It adds a few methods to keep your WebGL element in sync with its associated HTML element like planeResize and updatePosition.

    • ShaderPass Class v3.0

      The ShaderPass class also extends the BasePlane class.
      ShaderPass elements are used to add post-processing to your scene. Think of it as an additional plane that will be bound to your WebGL canvas container. This way you will be able to apply shaders to your whole WebGL scene.
      You can add multiple shader passes and they will be applied one after the other in their creation order.

  • Texture Class v2.0

    The Texture class is used to create WebGL textures from a source (either an image, a video or a canvas) and binds them to a plane.

Additional ressources

  1. Github
  2. CSS Tricks tutorial
  3. WebGL drag slider complete step-by-step tutorial on CodePen: part 1: creating the slider, part 2: adding the WebGL, part 3: improving performance
  4. CodePen curtains.js collection