Texture

Wrapper around a native texture data.

For more information about how to create meshes, have a look at the TextureManager class.

Note: Textures are per-engine, they can thus be shared by multiple scenes.

• Texture
  • .constructor(engine, param) ⇒ Texture
  • .height
  • .htmlElement
  • .id
  • .valid
  • .width
  • .destroy() ⇒ void
  • .toString() ⇒ string
  • .update() ⇒ void
  • .updateSubImage(srcX, srcY, srcWidth, srcHeight, dstX, dstY, content) ⇒ boolean

.constructor(engine: WonderlandEngine, param: number | ImageLike) ⇒ Texture 

Deprecated: Use create instead, accessible via textures:

1const image = new Image();
2image.onload = () => {
3    const texture = engine.textures.create(image);
4};

.height: number 

Height of the texture.

Note: If the texture has an htmlElement, this is the height used at creation. If the actual element’s height changed, it must be read from the element itself.

.htmlElement: null | ImageLike 

Returns the html element associated to this texture.

Note: This accessor will return null if the image is compressed.

.id: number 

Index in this manager.

Deprecated: Use index instead.

.valid: boolean 

Whether this texture is valid.

.width: number 

Width of the texture.

Note: If the texture has an htmlElement, this is the width used at creation. If the actual element’s width changed, it must be read from the element itself.

.destroy() ⇒ void 

Destroy and free the texture’s texture altas space and memory.

It is best practice to set the texture variable to null after calling destroy to prevent accidental use of the invalid texture:

1  texture.destroy();
2  texture = null;

.toString() ⇒ string 

.update() ⇒ void 

Update the texture to match the HTML element (e.g. reflect the current frame of a video).

.updateSubImage(srcX: number, srcY: number, srcWidth: number, srcHeight: number, dstX: number, dstY: number, content: ImageLike) ⇒ boolean 

Upload content to the texture to the GPU.

Usage:

1// Size 128x64
2const image = new Image();
3texture.updateSubImage(28, 4, 100, 60, 0, 0, image);

Note: The source is cropped if the destination offset and source dimensions are out-of-bounds regarding the texture size.

Note: Uploading a texture without a source offset is significantly faster.

ImageBitmap 

If you need to upload a subregion, it’s recommended to use:

1createImageBitmap(image, sourceX, sourceY, sourceWidth, sourceHeight).then(bitmap => {
2    const destinationX = sourceX;
3    const destinationY = sourceY;
4    texture.updateSubImage(0, 0, sourceWidth, sourceHeight, destinationX, destinationY, bitmap);
5});

You could use this method with a src offset, but the synchronous implementation uses a temporary 2d canvas, negatively affecting performance for large content.

Returns: true if the update went through, false otherwise.