pixi.js
    Preparing search index...

    Class ElementImageSourceExperimental Advanced

    A texture source backed by an immutable ElementImage snapshot produced by the experimental captureElementImage() API.

    This is the static counterpart to HTMLSource: there is no owning canvas, no paint listener, and no repaint lifecycle. The snapshot's pixels never change, so the source is ready the moment it is constructed. Most apps render live elements with HTMLSource; reach for ElementImageSource when you need a frozen copy that outlives its element or is transferred around.

    Note

    This relies on an experimental browser proposal. An ElementImage passed to Texture.from resolves to an ElementImageSource only as a last resort (lowest texture-source priority); construct it explicitly when you need ElementImageSourceOptions.

    import { Sprite } from 'pixi.js';
    import { ElementImageSource } from 'pixi.js/html-source';
    import type { HTMLSourceCanvas } from 'pixi.js/html-source';

    const canvas = app.canvas as HTMLSourceCanvas;
    const snapshot = canvas.captureElementImage!(element);

    const source = new ElementImageSource({ resource: snapshot, autoClose: true });
    const sprite = Sprite.from(source);

    app.stage.addChild(sprite);

    // Slice a frozen snapshot into sub-textures (e.g. a "shatter" effect that keeps
    // shattering even after the original element is gone).
    import { Rectangle, Texture } from 'pixi.js';

    const source = new ElementImageSource({ resource: snapshot });
    const chunk = new Texture({
        source,
        frame: new Rectangle(0, 0, 64, 64),
    });

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    _gcData? alphaMode antialias arrayLayerCount autoGarbageCollect autoGenerateMipmaps destroyed dimension format height isPowerOfTwo isReady label mipLevelCount pixelHeight pixelWidth resource uid uploadMethodId viewDimension width defaultOptions extension from

    Accessors

    addressMode lodMaxClamp lodMinClamp magFilter maxAnisotropy minFilter mipmapFilter repeatMode resolution resourceHeight resourceWidth scaleMode source style wrapMode

    Methods

    destroy resize unload update updateMipmaps test

    Constructors

    Properties

    Optional Experimental_gcData

    _gcData?: GCData

    GC tracking data, undefined if not being tracked

    alphaMode: ALPHA_MODES

    the alpha mode of the texture

    antialias: boolean = false

    Only really affects RenderTextures. Should we use antialiasing for this texture. It will look better, but may impact performance as a Blit operation will be required to resolve the texture.

    arrayLayerCount: number = 1

    how many array layers this texture has (WebGPU depthOrArrayLayers)

    autoGarbageCollect: boolean

    If true, the Garbage Collector will unload this texture if it is not used after a period of time

    autoGenerateMipmaps: boolean = false

    Should we auto generate mipmaps for this texture? This will automatically generate mipmaps for this texture when uploading to the GPU. Mipmapped textures take up more memory, but can look better when scaled down.

    For performance reasons, it is recommended to NOT use this with RenderTextures, as they are often updated every frame. If you do, make sure to call updateMipmaps after you update the texture.

    destroyed: boolean

    Has the source been destroyed?

    dimension: TEXTURE_DIMENSIONS = '2d'

    how many dimensions does this texture have? currently v8 only supports 2d

    format: TEXTURE_FORMATS = 'rgba8unorm'

    the format that the texture data has

    height: number = 1

    the height of this texture source, accounting for resolution eg pixelHeight 200, resolution 2, then height will be 100

    isPowerOfTwo: boolean
    isReady: true

    Snapshots are immutable, so the source is ready as soon as it is constructed.

    label: string

    optional label, can be used for debugging

    mipLevelCount: number = 1

    The number of mip levels to generate for this texture. this is overridden if autoGenerateMipmaps is true. it is read only!

    pixelHeight: number = 1

    the pixel height of this texture source. This is the REAL pure number, not accounting resolution

    pixelWidth: number = 1

    the pixel width of this texture source. This is the REAL pure number, not accounting resolution

    resource: ElementImage

    the resource that will be uploaded to the GPU. This is where we get our pixels from eg an ImageBimt / Canvas / Video etc

    uid: number = ...

    unique id for this Texture source

    uploadMethodId: string = 'html'

    The upload method for this texture.

    viewDimension: TEXTURE_VIEW_DIMENSIONS = '2d'

    how this texture is viewed/sampled by shaders (WebGPU view dimension)

    width: number = 1

    the width of this texture source, accounting for resolution eg pixelWidth 200, resolution 2, then width will be 100

    defaultOptions: TextureSourceOptions = ...

    The default options used when creating a new TextureSource. override these to add your own defaults

    extension: ExtensionMetadata = ...

    Registers the source with the extensions system at the lowest texture-source priority, so automatic detection only falls back to it when no other built-in source claims the resource.

    from: (resource: TextureResourceOrOptions) => TextureSource

    A helper function that creates a new TextureSource based on the resource you provide.

    Type Declaration

    Accessors

    • get addressMode(): WRAP_MODE
      Experimental

      setting this will set wrapModeU, wrapModeV and wrapModeW all at once!

      Returns WRAP_MODE

    • set addressMode(value: WRAP_MODE): void
      Experimental

      Parameters

      Returns void

    • get lodMaxClamp(): number
      Experimental

      Specifies the minimum and maximum levels of detail, respectively, used internally when sampling a texture.

      Returns number

    • set lodMaxClamp(value: number): void
      Experimental

      Parameters

      • value: number

      Returns void

    • get lodMinClamp(): number
      Experimental

      Specifies the minimum and maximum levels of detail, respectively, used internally when sampling a texture.

      Returns number

    • set lodMinClamp(value: number): void
      Experimental

      Parameters

      • value: number

      Returns void

    • get magFilter(): SCALE_MODE
      Experimental

      Specifies the sampling behavior when the sample footprint is smaller than or equal to one texel.

      Returns SCALE_MODE

    • set magFilter(value: SCALE_MODE): void
      Experimental

      Parameters

      Returns void

    • get maxAnisotropy(): number
      Experimental

      Returns number

    • set maxAnisotropy(value: number): void
      Experimental

      Specifies the maximum anisotropy value clamp used by the sampler.

      Parameters

      • value: number

      Returns void

    • get minFilter(): SCALE_MODE
      Experimental

      Specifies the sampling behavior when the sample footprint is larger than one texel.

      Returns SCALE_MODE

    • set minFilter(value: SCALE_MODE): void
      Experimental

      Parameters

      Returns void

    • get mipmapFilter(): SCALE_MODE
      Experimental

      Specifies behavior for sampling between mipmap levels.

      Returns SCALE_MODE

    • set mipmapFilter(value: SCALE_MODE): void
      Experimental

      Parameters

      Returns void

    • get repeatMode(): WRAP_MODE
      Experimental

      setting this will set wrapModeU, wrapModeV and wrapModeW all at once!

      Returns WRAP_MODE

    • set repeatMode(value: WRAP_MODE): void
      Experimental

      Parameters

      Returns void

    • get resolution(): number
      Experimental

      the resolution of the texture. Changing this number, will not change the number of pixels in the actual texture but will the size of the texture when rendered.

      changing the resolution of this texture to 2 for example will make it appear twice as small when rendered (as pixel density will have increased)

      Returns number

    • set resolution(resolution: number): void
      Experimental

      Parameters

      • resolution: number

      Returns void

    • get resourceHeight(): number
      Experimental

      The height of the snapshot in pixels, rounded up.

      Returns number

      const source = new ElementImageSource({ resource: snapshot });

      console.log(source.resourceWidth, source.resourceHeight);
    • get resourceWidth(): number
      Experimental

      The width of the snapshot in pixels, rounded up.

      Returns number

      const source = new ElementImageSource({ resource: snapshot });

      console.log(source.resourceWidth, source.resourceHeight);
    • get scaleMode(): SCALE_MODE
      Experimental

      setting this will set magFilter,minFilter and mipmapFilter all at once!

      Returns SCALE_MODE

    • set scaleMode(value: SCALE_MODE): void
      Experimental

      Parameters

      Returns void

    • get wrapMode(): WRAP_MODE
      Experimental

      Returns WRAP_MODE

    • set wrapMode(value: WRAP_MODE): void
      Experimental

      Parameters

      Returns void

    Methods

    • Experimental

      Destroys the underlying texture source. When ElementImageSourceOptions.autoClose was set, also calls ElementImage.close on the snapshot.

      Returns void

      const source = new ElementImageSource({ resource: snapshot });

      source.destroy();
      snapshot.close(); // release the snapshot yourself unless autoClose was set
    • Experimental

      Resize the texture, this is handy if you want to use the texture as a render texture

      Parameters

      • Optionalwidth: number

        the new width of the texture

      • Optionalheight: number

        the new height of the texture

      • Optionalresolution: number

        the new resolution of the texture

      Returns boolean

      • if the texture was resized
    • Experimental

      This will unload the Texture source from the GPU. This will free up the GPU memory As soon as it is required fore rendering, it will be re-uploaded.

      Returns void

    • Experimental

      call this if you have modified the texture outside of the constructor

      Returns void

    • Experimental

      Lets the renderer know that this texture has been updated and its mipmaps should be re-generated. This is only important for RenderTexture instances, as standard Texture instances will have their mipmaps generated on upload. You should call this method after you make any change to the texture

      The reason for this is is can be quite expensive to update mipmaps for a texture. So by default, We want you, the developer to specify when this action should happen.

      Generally you don't want to have mipmaps generated on Render targets that are changed every frame,

      Returns void

    • Experimental

      Tests whether a resource is an ElementImage snapshot, used during automatic source detection (Texture.from, TextureSource.from).

      Parameters

      • resource: any

        The resource to test.

      Returns resource is ElementImage

      true if this source can handle the resource.

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods