Textures are automatically created each time one of the plane loading methods is called.
If your plane autoloadSources initial parameter is set to true, they will be created on initialization for each image, canvas or video children of your plane.
A newly created texture will just display black pixels until you've set it a source from one of the images, canvases or videos already loaded in your plane.
Using texture matrices
Shaders use texture coordinates (or UVs) to map a texture to the plane.
By default the library sets an arbitrary aTextureCoord attributes that you could use in your shaders:
You may use it to map your texture to your plane, but if the plane and the media aspect ratio are different, you'll end up with a distorted texture.
Fortunately, there's a built-in solution to display your textures without them being distorted: texture matrices. Each time you set a source to a texture (or each time a plane is resized), its texture matrix is automatically computed and sent to your shader as a uniform. With the same example as above, here's how to use it:
The texture matrix uniform name will follow the same rule as the sampler uniform name:
If you did not specify any name, it will be named "uTextureMatrix" + your texture index.
If you did specify a sampler name, it will be named samplerName + "Matrix".
An object containing the scale applied to your texture on x and y axis. Only applied if you are using the texture matrix to map your texture in your shaders.
Depends on your texture type.
By default, a canvas texture will be updated at each requestAnimationFrame call, a video texture will be updated at 30FPS, and an image texture will never be updated.
If you want to stop updating your canvas or video texture, set this flag to false for performance boost.
Examples: used in Text planes using canvas example.
source(HTML element): v2.0
The source used by your texture. Could be either an image, canvas or video HTML element. Use it to safely access any property or method of that element, like play() or pause() for videos.
The type or your texture. Could be either "image", "canvas", "video" or "texturePass".
A "texturePass" is nothing more than a texture containing the whole scene you are currently drawing. It is created internally with each new ShaderPass.
- sourceElement either an image, canvas or video HTML element a source to apply to your texture. It must be an element already loaded by your plane.
Examples: used in Slideshow with a displacement shader example.
setScale(scaleX, scaleY): v2.0
Set the texture new scale. Only applied if you are using the texture matrix to map your texture in your shaders.
- scaleX float the scale to set along the X axis.
- scaleY float the scale to set along the Y axis.
Examples: used in Multiple planes scroll effect : rotation, scale and parallax and Post processing multiple passes examples.