TextureData class

Signature:

export declare class TextureData extends ExternalObject 

Extends: ExternalObject

Remarks

This object is reusable. A new one is no longer sent every frame. If you use , the subscription will return the same TextureData object every frame. Alternatively, you can query this TextureData for new frames on your own schedule, but don't do so faster than the or you'll just get the same frame again wastefully.

Asynchronous conversion to ImageData is provided for use in 2d or 3d canvas contexts. The pixel data is in RGBA, 8 bytes per pixel, stored as unsigned ints.

Once you have converted into ImageData, this can be used in canvas or a game engine:

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the TextureData class.

Example 1

// With Canvas 2d, writing directly to the canvas
canvas.getContext('2d').putImageData(imageData, x, y);

Example 2

// With WebGL, setting the contents of a Texture
const gl = canvas.getContext('webgl');
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);

Example 3

// With phaser.io, attaching to a Sprite
const bmp = game.make.bitmapData(imageData.width, imageData.height);
bmp.imageData = imageData;
sprite = game.add.sprite(bmp.width, bmp.height, bmp);

Example 4

// With PlayCanvas, setting the contents of a Texture that can be used in a Sprite via TextureAtlas, or an Image
var texture = new pc.Texture(graphicsDevice, {
    width: imageData.width,
    height: imageData.height,
    format: pc.PIXELFORMAT_R8_G8_B8_A8
});
var pixels = texture.lock();
pixels.set(imageData.data);
texture.unlock();

Regardless of how you use it, do not create new objects every frame. Only update the existing sprite/texture, otherwise your performance will take a serious hit.

Example 5

// Reuse the PRE-EXISTING imageData object and the PRE-EXISTING texture ID 0 to update the texture with the new contents of the ImageData.
// This is the only command that is needed to update the texture. No new objects are created.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
// Draw quad with the PRE-EXISTING vertex buffer 0. These two commands are the entirety of a WebGL update loop once setup.
gl.drawArrays(gl.TRIANGLES, 0, 6);

Properties

Methods

TextureData.height property

Signature:

readonly height: number;

TextureData.setImageData() method

Replaces the contents of an existing ImageData instance with the texture.

Signature:

setImageData(imageData: ImageData): Promise<ImageData>;

Parameters

Returns:

Promise<ImageData>

The same ImageData instance, for chaining. Can be ignored.

Exceptions

Will throw an error if you do not provide an ImageData of equal dimensions.

Remarks

If called a second time while it's still working on the first request, the second request will return immediately with old data. This is done for you to prevent backing up the system.

TextureData.toImageData() method

Gets a ImageData instance for the texture, updating the existing one if you called this previously. Always returns the same ImageData instance. You can keep the reference or let TextureData own it.

Signature:

toImageData(): Promise<ImageData>;

Returns:

Promise<ImageData>

TextureData.width property

Signature:

readonly width: number;