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 texture
let canvas = new TextureCanvas(128, scene);
// A rectangular texture
let 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)

<<<<<<< HEAD

Texture Canvas Example 2>>>>>>> 0a9d2fb9c99e3447ee3122c8df9d8182db9c7827

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:

NameTypeDescription
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:

NameParametersDescription
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)

<<<<<<< HEAD

Texture Canvas Example 2>>>>>>> 0a9d2fb9c99e3447ee3122c8df9d8182db9c7827

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.