Download

Changelog

Version 7.0

Version 7.0 has been totally rewritten using ES6 class modules to improve readability and maintainability. It will also enable the ability to tree shake the library when packing your production builds (i.e. not including unused classes in your final build).

There are very few breaking changes, however you should still have a look at the migration guide and the updated documentation.

  • Broken into multiple modules. addPlane(), addRenderTarget() and addShaderPass() are deprecated and you should use the class constructors now instead (i.e. new Plane(), new RenderTarget(), new ShaderPass()).
    Following this logic, removePlane(), removeRenderTarget() and removeShaderPass() are also deprecated, you should now use the remove() methods of those classes.
  • Textures have been greatly improved, with the ability to preload medias thanks to the TextureLoader class. You can also set each texture parameters now, like minFilter, magFilter, wrapS, wrapT, premulitplyAlpha, anisotropy, use floating point textures, etc.
  • Introducing math classes for vectors, matrix and quaternion calculations: Vec2, Vec3, Mat4 and Quat classes.
  • Added a few useful extras classes as well: PingPongPlane and FXAAPass. Hopefully there will be more to come.

Version 6.0

Version 6.0 has a totally renewed way to handle perspective using a real perspective camera approach for each plane. Modifying the field of view will now have a much greater impact on the perceived perspective.

  • New way to handle perspective.
  • Improved planes rotation (using Euler angles with "XYZ" as axis order). Also, planes now have a transform origin Z property as well.
  • Introducing face culling for each plane.
  • Planes, shader passes, render targets and textures now have a unique identifier (uuid) property.
  • Fixed moveToFront() method and minor bugs.

Version 5.0

Version 5.0 introduces RenderTarget class. It allows you to render any plane as a texture by setting it a render target. The ShaderPass class now also use that class internally.
It also now uses WebGL2 whenever possible.
As usual, there are no breaking changes so you can update safely to this version.

  • New RenderTarget class.
  • New setFromTexture method to copy a texture into another texture.
  • Planes now have a transform origin property that you can change anytime with the setTransformOrigin method.
  • Possibility to set the alpha and premultiplied alpha WebGL context options on init.
  • A lot of performance improvements by reducing the number of WebGL calls and bugs fixes.

Version 4.0

Version 4.0 introduces optional native scroll handling (planes position are automatically updated when the users scrolls), but it also lets you define if you want to listen to the resize event or use the internal request animation frame loop. With those options you can chose to handle those things by yourself and therefore improve performance by keeping a single resize or request animation frame loop for your websites.
The Curtains object now accepts an object as init params.

  • New Curtains object initial parameters with the ability to define which events you want to listen to.
  • A few new helper methods and event to handle scroll related things.
  • Real frustum culling to draw only the planes that actually need to be render. Comes with a handy drawCheckMargins parameter in case you are displacing vertices positions in your vertex shader.
  • Performance improvements and bugs fixes.

Version 3.0

Version 3.0 introduces post processing effects and a few more helpers.
There are no breaking changes since v2.0 so you can update it safely.

  • Major code refactoring to introduce ShaderPass class by creating a BasePlane class. Usual Plane class now extends BasePlane class, as does ShaderPass class.
  • Added a bunch of new events and methods, like onAfterResize or getBoundingRect.
  • Minor bugs fixes.

Version 2.0

  • Added a Texture class object and introduced texture matrices as well.
  • Code structure refactored and cleaned.
  • Internal maths and object properties have been rewritten for a cleaner and more readable code.
  • Improved performance on both loading and rendering time.
  • Minor bugs fixes.

About

This library is released under the MIT license which means it is free to use for personnal and commercial projects.

All images used in the examples were taken by Marion Bornaz during the Mirage Festival.

All examples video footages were shot by Analogue Production.

Many thanks to webglfundamentals.org tutorials which helped me a lot.

Author of this library is Martin Laxenaire, a french creative front-end developper based in Lyon.
Found a bug ? Have questions ? Do not hesitate to email me, fill an issue on Github or send me a tweet : @webdesign_ml.