Capítulo 173 de 859

Chapter 173: ImageBitmapLoader

Core Idea

A loader for loading images as an ImageBitmap. An ImageBitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering.

Note that Texture#flipY and Texture#premultiplyAlpha are ignored with image bitmaps. These options need to be configured via ImageBitmapLoader#setOptions prior to loading, unlike regular images which can be configured on the Texture to set these options on GPU upload instead.

To match the default behaviour of Texture, the following options are needed:

{ imageOrientation: 'flipY', premultiplyAlpha: 'none' }

Also note that unlike FileLoader, this loader will only avoid multiple concurrent requests to the same URL if Cache is enabled.

const loader = new THREE.ImageBitmapLoader();
loader.setOptions( { imageOrientation: 'flipY' } ); // set options if needed
const imageBitmap = await loader.loadAsync( 'image.png' );
const texture = new THREE.Texture( imageBitmap );
texture.needsUpdate = true;

Key Concepts

  • isImageBitmapLoader : boolean (readonly): This flag can be used for type testing.
  • options : Object: Represents the loader options.

Reference Tables

Constructor

Signature
new ImageBitmapLoader( manager : LoadingManager )

Properties

PropertyDescription
.isImageBitmapLoader : boolean (readonly)This flag can be used for type testing.
.options : ObjectRepresents the loader options.

Methods

MethodDescription
.abort() : ImageBitmapLoaderAborts ongoing fetch requests.
.load( url : string, onLoad : function, onProgress : onProgressCallback, onError : onErrorCallback )Starts loading from the given URL and pass the loaded image bitmap to the onLoad() callback.
.setOptions( options : Object ) : ImageBitmapLoaderSets the given loader options. The structure of the object must match the options parameter of createImageBitmap.

Key Takeaways

  1. ImageBitmapLoader extends: Loader
  2. Most relevant properties: isImageBitmapLoader, options.
  3. Key methods: abort, load, setOptions.

Connects To