Since the version 7.0 the whole library has been rewritten and broken into multiple class modules to improve the readability and maintainability of the code. Since curtains.js is a high-level API library, most of those classes are used internally only. Even tho they are listed here you won't ever need to use them.
If you're coming from a previous version of the library, have a look at the migration guide.
Main classes needed to create basic scenes.
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.
The Renderer class is handling everything related to the WebGL context (creation and restoration, extensions, WebGL commands, etc).
The Scene class is created by the Renderer. It manages the render order of every WebGL objects (planes, render targets and shader passes) added.
Read more about how the library draws the different objects.
The CacheManager caches already compiled shaders, vertices and UVs arrays and images textures in order to reuse them whenever possible and avoid extra heavy computations.
The CallbackQueueManager is used to execute callbacks on the next animation frame call.
The ScrollManager class adds a scroll event listener if needed and handles the update of the scroll values.
The Plane class creates a WebGL plane that is bound to a HTML element and that will be rendered at the sizes and positions of this HTML element.
It extends the DOMMesh class.
The DOMMesh class extends the Mesh class by adding a few helper methods that relies on the associated HTML element used to create the Mesh.
The Mesh class creates a WebGL mesh, i.e. creates a Geometry, a Program, the Mesh's uniforms and handles Textures creation.
The Geometry class creates and binds the vertices and texture coordinates attributes buffers and draw the mesh.
The Program class compiles the shaders and creates a WebGL program used by the Mesh.
The Uniforms class creates and updates the Mesh's uniforms.
The Camera class creates a perspective camera used to compute the plane's projection matrix.
The Texture class is used to create WebGL textures.
Frame Buffer Objects
Those classes are generally used to add post-processing effects to your planes.
The RenderTarget class is a Frame Buffer Object used internally to create shader passes. It allows you to render one or multiple planes as a texture that you can then use in another plane or shader pass.
The ShaderPass class extends the DOMMesh class.
ShaderPass elements are used to add post-processing effects. 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 a bunch of planes or to your whole WebGL scene.
You can add multiple shader passes and they will be applied one after the other in their creation order.
Useful to create WebGL textures based on HTML media elements
The TextureLoader class loads images, videos and canvases and creates Textures using those HTML elements as sources.
The PlaneTextureLoader class extends the TextureLoader class. Used internally by planes and shader passes to load medias, use the resulting textures and fire the onLoading and onReady callbacks.
Math classes used for 3D vectors and matrices calculations. Highly based on three.js and glMatrix maths classes.
Note that at the moment those classes are still not complete and implement only the methods needed internally by the library.
The Vec2 class handles 2 dimensions vectors calculations.
The Vec3 class handles 3 dimensions vectors calculations.
The Mat4 class handles 4 dimensions matrices calculations.
The Quat class handles quaternions calculations.
Extra classes are often used additional classes built using the other classes above that can help you save some time.
The PingPongPlane class extends the Plane class by adding 2 read and write render targets that will be swapped during render and a method to get the resulting texture. Allows fluid effects, flowmaps, etc.
FXAAPass v7.0updated in v8.0
The FXAAPass class extends the ShaderPass class by creating a Fast Approximate Anti-Aliasing pass. If you're using render targets or shader passes in your code, just use this pass as the last pass to add an anti-aliasing effect.
- CSS Tricks tutorial
- Codrops WebGL Video Transitions with Curtains.js
- Creating WebGL Effects with CurtainsJS on CSS Tricks
- WebGL drag slider complete step-by-step tutorial on CodePen: part 1: creating the slider, part 2: adding the WebGL, part 3: improving performance
- CodePen curtains.js collection