Texture Canvas
TextureCanvas
About
TextureCanvas is a texture on which other textures can be drawn.
Usage
Creating a canvas
To construct a TextureCanvas, you need to provide the size and the scene the texture will be used in:
// A square texturelet canvas = new TextureCanvas(128, scene);
// A rectangular texturelet canvas = new TextureCanvas({ width: 256, height: 128 }, scene);
Aditionally, you may pass three more parameters, which are:
- initTexture, an initial texture to draw.
- onReady, a function to be called when the canvas is ready.
- options, an object with the properties generateMipMaps (boolean) and samplingMode (number)
Draw using contexts
Contexts can be used to specify how a texture should be drawn. Multiple contexts can be created and used interchangably.
To draw a texture using the default context, you can call canvas.drawTexture(myTexture).
You can create a context like this:
let ctx = canvas.createContext();
A context has the following propteries:
| Name | Type | Description |
|---|---|---|
Name diffuseTexture | Type Texture | Description The texture to draw. |
Name diffuseSamplingRect | Type Rectangle | Description The area of the diffuse texture to draw. |
Name drawRect | Type Rectangle | Description The area to draw to. |
Name rotation | Type Vector3Matrix | Description The rotation axes in radians to rotate the diffuse textures by (z is 2D rotation). |
Name pivotPoint | Type PivotPoint | Description The rotation pivot point. |
Name skewing | Type UVector | Description The amount of skewing/shearing. |
Name opacityTexture | Type Texture | Description The texture to get the alpha values from. |
Name opacityTextureIntensity | Type number | Description How much the opacity texture should be contributing to the difuse's alpha values, ranging from 0.0 to 1.0 |
Name opacitySamplingRect | Type Rectangle | Description The area of the opacity texture to use. |
Name clearColor | Type Color4 | Description The color to clear the canvas with. |
And the following methods:
| Name | Parameters | Description |
|---|---|---|
Name reset | Parameters | Description Resets the draw options to their default values. |
Name setDiffuseSamplingRect | Parameters u, v, width, height | Description Sets which area of the diffuse texture to draw. |
Name setOpacitySamplingRect | Parameters u, v, width, height | Description Sets which area of the opacity texture to draw. |
Name setDrawRect | Parameters u, v, width, height | Description Sets which area of the canvas to draw to — this area may be tranformed by rotating/skewing. |
Name setRotation | Parameters x?: number, y?: number, z?: number | Description Sets the rotation axes in radians rotate the diffuse texture by (z is 2D rotation). |
Name setPivotPoint | Parameters pu?: number, pv?: number, isLocalSpace?: boolean | Description Sets the point around which to rotate the texture. |
Name setSkewing | Parameters u, v | Description Sets how the texture should be skewed (shear transform). |
Name draw | Parameters | Description Draws the diffuse texture, if set. |
Name drawTexture | Parameters diffuseTexture: Texture | Description Draws a texture. |
Name clear | Parameters | Description Clears the canvas using the set clearColor. |
Name clone | Parameters cloneDrawOptions?: boolean, cloneTextures?: boolean, ref?: TextureCanvasDrawContext | Description Returns a clone of the context. |
Once the context is set up, simply call ctx.draw() or ctx.drawTexture(myTexture)
Notes
Please note that uv-coordinates are used rather than pixel values.
Rotation
Rotating a texture happens in three dimensions in the default coordinate system of Babylon.js, with z being the forward axis.
You can set a pivot point to be in local space (that of the diffuse texture), or world space (that of the canvas), with pivotPoint.isLocalSpace.