This is the main class used to create and handle GPUTexture | textures that can be used with ComputePass and/or Mesh. Also used as copy source/destination for RenderPass and RenderTarget.

Basically useful for any kind of textures: for external sources (however in some cases, DOMTexture might be preferred), depth, storages or to copy anything outputted to the screen at one point or another.

Will create a GPUTexture and its associated TextureBinding.

Example

// set our main GPUCurtains instance
const gpuCurtains = new GPUCurtains({
container: '#canvas' // selector of our WebGPU canvas container
})

// set the GPU device
// note this is asynchronous
await gpuCurtains.setDevice()

// create a texture
const texture = new Texture(gpuCurtains, {
label: 'My texture',
name: 'myTexture',
})

Constructors

Properties

renderer: Renderer

renderer used by this Texture

type: string

The type of the Texture

uuid: string

The universal unique id of this Texture

texture: GPUTexture

The GPUTexture used

Size of the texture source, usually our renderer canvas size

options: TextureParams

Options used to create this Texture

Array of bindings that will actually only hold one texture binding

#autoResize: boolean = true

Whether this texture should be automatically resized when the renderer size changes. Default to true.

Accessors

Methods

  • Copy a GPUTexture directly into this Texture. Mainly used for depth textures.

    Parameters

    • texture: GPUTexture

      GPUTexture to copy

    Returns void

  • Upload a source to the GPU and use it for our texture.

    Parameters

    • parameters: {
          source: GPUImageCopyExternalImageSource;
          width?: number;
          height?: number;
          depth?: number;
          origin?: GPUOrigin3D;
          colorSpace?: PredefinedColorSpace;
      }

      parameters used to upload the source.

      • source: GPUImageCopyExternalImageSource

        source to use for our texture.

      • Optional width?: number

        source width.

      • Optional height?: number

        source height.

      • Optional depth?: number

        source depth.

      • Optional origin?: GPUOrigin3D

        GPUOrigin3D | origin of the source copy.

      • Optional colorSpace?: PredefinedColorSpace

    Returns void

  • Use data as the texture source and upload it to the GPU.

    Parameters

    • parameters: {
          width?: number;
          height?: number;
          depth?: number;
          origin?: GPUOrigin3D;
          data?: Float32Array;
      }

      parameters used to upload the source.

      • Optional width?: number

        data source width.

      • Optional height?: number

        data source height.

      • Optional depth?: number

        data source depth.

      • Optional origin?: GPUOrigin3D

        GPUOrigin3D | origin of the data source copy.

      • Optional data?: Float32Array

        Float32Array data to use as source.

    Returns void