pixi.js
    Preparing search index...

    Class BufferImageSourceAdvanced

    A texture source that uses a TypedArray or ArrayBuffer as its resource

    Without a format, the array type picks it: Float32Array gives rgba32float, 32-bit integer arrays give rgba32uint, 16-bit integer arrays give rgba16uint, anything else bgra8unorm. Integer formats default to alphaMode: 'no-premultiply-alpha', since integer data can't be premultiplied on upload; an explicit alphaMode still wins.

    Pass depth for a 3D texture, or arrayLayerCount for a 2D array. The buffer holds the slices (or layers) one after another, each in row-major order, so texel (x, y, z) sits at index x + (y * width) + (z * width * height). These upload whole, so BufferImageSource#update takes no range. rgba32float, the default for a Float32Array, needs an optional feature for linear filtering that PixiJS doesn't request on WebGPU. Use scaleMode: 'nearest' with it, or pick rgba8unorm, r8unorm or rgba16float for smooth sampling.

    const ids = new BufferImageSource({
        resource: new Uint32Array([1, 2, 3, 4]),
        width: 1,
        height: 1,
        scaleMode: 'nearest',
    });

    A 3D noise texture for volumetric effects, sampled with sampler3D (GLSL) or texture_3d<f32> (WGSL):

    const size = 64;
    const data = new Uint8Array(size * size * size * 4);

    for (let z = 0; z < size; z++)
    {
        for (let y = 0; y < size; y++)
        {
            for (let x = 0; x < size; x++)
            {
                const i = (x + (y * size) + (z * size * size)) * 4;

                data[i] = data[i + 1] = data[i + 2] = Math.random() * 255;
                data[i + 3] = 255;
            }
        }
    }

    const noise = new BufferImageSource({
        resource: data,
        width: size,
        height: size,
        depth: size,
        format: 'rgba8unorm',
        addressMode: 'repeat',
    });

    // a fullscreen quad that shows the middle slice
    const quad = new Geometry({
        attributes: {
            aPosition: [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1],
            aUV: [0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0],
        },
    });

    const wgsl = `
        @group(0) @binding(0) var uNoise: texture_3d<f32>;
        @group(0) @binding(1) var uNoiseSampler: sampler;

        struct VSOutput { @builtin(position) position: vec4f, @location(0) uv: vec2f };

        @vertex fn mainVert(@location(0) aPosition: vec2f, @location(1) aUV: vec2f) -> VSOutput {
            return VSOutput(vec4f(aPosition, 0.0, 1.0), aUV);
        }

        @fragment fn mainFrag(@location(0) uv: vec2f) -> @location(0) vec4f {
            return textureSample(uNoise, uNoiseSampler, vec3f(uv, 0.5));
        }
    `;

    const mesh = new Mesh({
        geometry: quad,
        shader: Shader.from({
            gl: {
                vertex: `#version 300 es
                    in vec2 aPosition;
                    in vec2 aUV;
                    out vec2 vUV;
                    void main() { vUV = aUV; gl_Position = vec4(aPosition, 0.0, 1.0); }
                `,
                // no `precision ... sampler3D;` line needed: pixi adds it
                fragment: `#version 300 es
                    in vec2 vUV;
                    uniform sampler3D uNoise;
                    out vec4 fragColor;
                    void main() { fragColor = texture(uNoise, vec3(vUV, 0.5)); }
                `,
            },
            gpu: {
                vertex: { source: wgsl, entryPoint: 'mainVert' },
                fragment: { source: wgsl, entryPoint: 'mainFrag' },
            },
            resources: {
                uNoise: noise,
                uNoiseSampler: noise.style,
            },
        }),
    });

    Hierarchy (View Summary)

    Index
    constructor
    _gcData? alphaMode antialias arrayLayerCount autoGarbageCollect autoGenerateMipmaps depth destroyed dimension format height isPowerOfTwo label mipLevelCount pixelHeight pixelWidth resource storage uid viewDimension width defaultOptions extension from
    addressMode depthOrArrayLayers lodMaxClamp lodMinClamp magFilter maxAnisotropy minFilter mipmapFilter repeatMode resolution resourceHeight resourceWidth scaleMode source style wrapMode
    destroy resize unload update updateMipmaps test

    Optional_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; 1 for a 3D texture

    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.

    A 3D texture on WebGPU needs TextureSourceOptions.storage and rgba8unorm or rgba16float, because a compute shader writes the mips. WebGL fills the chain with gl.generateMipmap.

    depth: number = 1

    the depth of a 3D texture in texels; 1 for every other texture

    destroyed: boolean

    Has the source been destroyed?

    dimension: TEXTURE_DIMENSIONS = '2d'

    how the texture is stored (WebGPU texture dimension), derived from TextureSource#viewDimension

    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
    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: ArrayBuffer | TypedArray

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

    storage: boolean = false

    Whether compute shaders can write to this texture on WebGPU. See TextureSourceOptions.storage. Read when the GPU texture is created.

    uid: number = ...

    unique id for this Texture source

    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 = ExtensionType.TextureSource
    from: (resource: TextureResourceOrOptions) => TextureSource

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

    Type Declaration

    • get lodMaxClamp(): number

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

      Returns number

    • set lodMaxClamp(value: number): void

      Parameters

      • value: number

      Returns void

    • get lodMinClamp(): number

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

      Returns number

    • set lodMinClamp(value: number): void

      Parameters

      • value: number

      Returns void

    • get maxAnisotropy(): number

      Returns number

    • set maxAnisotropy(value: number): void

      Specifies the maximum anisotropy value clamp used by the sampler.

      Parameters

      • value: number

      Returns void

    • get resolution(): number

      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

      Parameters

      • resolution: number

      Returns void

    • get resourceHeight(): number

      the height of the resource. This is the REAL pure number, not accounting resolution

      Returns number

    • get resourceWidth(): number

      the width of the resource. This is the REAL pure number, not accounting resolution

      Returns number

    • 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

    • 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

    • Uploads the buffer to the GPU. Call this after changing the data in TextureSource#resource.

      The buffer is a flat list of texels in row-major order, so texel i sits at x = i % width, y = floor(i / width). Pass a texel range to upload only that part of the texture; leave it out to upload everything.

      The upload happens immediately for every renderer that already holds the texture, and the range applies to this call only. If you change several parts of the buffer, track the dirty span yourself and call update once with the combined range. Each call has a fixed cost on top of the bytes it moves, which reaches tens of microseconds on some mobile GPUs. One span usually beats many small calls.

      Partial uploads assume the buffer holds exactly width * height texels. A 3D texture or 2D array always uploads whole, so it takes no range.

      Parameters

      • start: number = 0

        index of the first texel to upload

      • end: number = Infinity

        index one past the last texel to upload (exclusive, like TypedArray.subarray)

      Returns void

      const data = new Float32Array(4096 * 64 * 4);
      const source = new BufferImageSource({ resource: data, width: 4096, height: 64 });

      // change texels 100 to 115 (4 floats per rgba32float texel)
      data.fill(1, 100 * 4, 116 * 4);

      // upload only those 16 texels
      source.update(100, 116);

    • 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

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods