Basic setup example
The HTML set up is pretty easy. Just create a div that will hold your canvas and a div that will hold your images.
The CSS is also very easy. Make sure the div that will wrap the canvas fits the document, and apply any size you want to your plane div element.
Here are some basic vertex and fragment shaders. Just put it inside your body tag, right before you include the library.
Et voilà !
Textures uniforms matrices and sampler names
Let's say you want to build a slideshow with 3 images and a displacement image to create a nice transition effect.
By default, the textures uniforms matrices and sampler will be named upon their indexes inside your plane element. If you got something like that :
Then, in your shaders, your textures matrices and samplers would have to be declared that way :
It is handy but you could also get easily confused.
By using a data-sampler attribute on the <img /> tag, you could specify custom uniforms matrices and samplers names to use in your shaders. With the example above, this would become :
Using videos as textures
Yes, videos as textures are supported ! However there are a few downsides you need to know.
First, we can't autoplay videos without a user gesture on most mobile devices. Unless you don't care about mobile users, you will have to start the videos playback after a user interaction like a click event.
Also, please note that videos tend to use a lot of memory and could have a significant impact on performance, so try to keep them small.
Besides that, videos are really easy to use (and can be mixed with images as well). Let's see how we can handle them :
Like with images, you can use a data-sampler attribute to set a uniform sampler name. You can use one or more videos, or mixed them with images if you want :
And that's it. Check the video examples (and source codes) if you want to see what's possible.
Using canvas as texture
You can use multiple canvases and data-sampler attributes as well, like you'd do with images or videos.
You can add post-processing to your scene by using the addShaderPass method of your Curtains object. It uses FBO (short for Frame Buffer Objects) under the hood and allows some really cool effects.
Post-processing shaders are a bit different than plane shaders. They do not have any projection or model view matrix and they also silently create a render texture that will hold our scene (called uRenderTexture in our fragment shader).
Here are some very basic vertex and fragment shaders example, that will use the same effect as our basic plane example seen above.
Post processing vertex shader
Post processing fragment shader
You can also load images, videos or canvases into your shader pass, as you'd do with a regular plane.
- Plane's canvases textures are updated at each frame (videos are updated at 30FPS), which has a significant impact on performance. When those textures are not visible (if they are hidden by another texture, or if you have finished drawing on your canvas...), you should set those textures shouldUpdate property to false, and switch it back to true before displaying them again.
- Large images have a bigger impact on performance. Try to scale your images so they will fit your plane maximum size. It goes the same for videos of course: try to keep them as light as possible.
Do not hesitate to check their source code as they are all fully commented:
Vertex coordinates helper
Slideshow with a displacement shader
Multiple planes scroll effect : rotation, scale and parallax
Asynchronous textures loading
AJAX navigation with plane removal