easy WebGL tool to animate images and videos
What is it ?
You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.
Knowledge and technical requirements
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.
- Added the possibility to set/unset depth test for each plane via a enableDepthTest() method. This might be useful to handle transparency problems.
- Added a plane moveToFront() method so that a plane could overlay all other planes.
- Added support for videos as textures.
- Sort planes by their vertices length in order to avoid redundant buffer binding calls during draw loop.
- Refactored and cleaned code.
- WebGL context viewport size now based on drawingBufferWidth and drawingBufferHeight.
- Cleaned and refactored code in order to add support for lost and restored context events.
Todo and improvements
- Tests, tests and more tests.
- Improve performance if possible.
This library is released under the MIT license which means it is free to use for personnal and commercial projects.
All examples video footages were shot by Analogue Production.
Many thanks to webglfundamentals.org tutorials which helped me a lot.