Class Texture

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

Mostly useful to handle depth and storages textures or to copy anything outputted to the screen at one point or another. It can handle basic data or image bitmap upload, but for external sources textures (like images, videos or canvases) you should use the MediaTexture class instead.

Will create a GPUTexture and its associated TextureBinding.

Example

// create a texture
// assuming 'renderer' is a valid GPURenderer
const texture = new Texture(renderer, {
  label: 'My texture',
  name: 'myTexture',
})

Hierarchy (View Summary)

Texture
- MediaTexture

Index

Constructors

constructor

new Texture(
renderer: Renderer | GPUCurtains,
parameters?: TextureParams,
): Texture
Texture constructor
Parameters
- renderer: Renderer | GPUCurtains
  renderer object or GPUCurtains class object used to create this Texture.
- parameters: TextureParams = defaultTextureParams
  parameters used to create this Texture.
Returns Texture
- Defined in src/core/textures/Texture.ts:104

Properties

renderer

renderer: Renderer

renderer used by this Texture.

type

type: string

The type of the Texture.

`Readonly`uuid

uuid: string

The universal unique id of this Texture.

texture

texture: GPUTexture

The GPUTexture used.

size

size: TextureSize

Size of the texture source, usually our renderer canvas size.

options

options: TextureParams

Options used to create this Texture.

bindings

bindings: BindGroupBindingElement[]

Array of bindings that will actually only hold one texture binding.

Accessors

textureBinding

get textureBinding(): TextureBinding
Get our texture binding.

Returns TextureBinding
- Defined in src/core/textures/Texture.ts:202

Methods

setRenderer

setRenderer(renderer: Renderer | GPUCurtains): void
Reset this Texture renderer, and resize it if needed.
Parameters
- renderer: Renderer | GPUCurtains
  New Renderer or GPUCurtains instance to use.
Returns void
- Defined in src/core/textures/Texture.ts:161

setBindings

setBindings(): void
Set our bindings.

Returns void
- Defined in src/core/textures/Texture.ts:183

copy

copy(texture: DOMTexture | MediaTexture | Texture): void
Copy another Texture into this Texture.
Parameters
- texture: DOMTexture | MediaTexture | Texture
  Texture to copy.
Returns void
- Defined in src/core/textures/Texture.ts:210

copyGPUTexture

copyGPUTexture(texture: GPUTexture): void
Copy a GPUTexture directly into this Texture. Mainly used for depth textures.
Parameters
- texture: GPUTexture
  GPUTexture to copy.
Returns void
- Defined in src/core/textures/Texture.ts:219

createTexture

createTexture(): void
Create the texture (or copy it from source) and update the binding resource.

Returns void
- Defined in src/core/textures/Texture.ts:240

uploadSource

uploadSource(
    parameters: {
        source: GPUCopyExternalImageSource;
        width?: number;
        height?: number;
        depth?: number;
        origin?: GPUOrigin3D;
        colorSpace?: PredefinedColorSpace;
    },
): void
Upload a source to the GPU and use it for our texture.
Parameters
- parameters: {
      source: GPUCopyExternalImageSource;
      width?: number;
      height?: number;
      depth?: number;
      origin?: GPUOrigin3D;
      colorSpace?: PredefinedColorSpace;
  }
  parameters used to upload the source.
  - source: GPUCopyExternalImageSource
    source to use for our texture.
  - Optionalwidth?: number
    source width.
  - Optionalheight?: number
    source height.
  - Optionaldepth?: number
    source depth.
  - Optionalorigin?: GPUOrigin3D
    ().destination.origin | GPUOrigin3D of the source copy.
  - OptionalcolorSpace?: PredefinedColorSpace
Returns void
- Defined in src/core/textures/Texture.ts:276

uploadData

uploadData(
    parameters: {
        width?: number;
        height?: number;
        depth?: number;
        origin?: GPUOrigin3D;
        data?: Float32Array;
    },
): 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.
  - Optionalwidth?: number
    data source width.
  - Optionalheight?: number
    data source height.
  - Optionaldepth?: number
    data source depth.
  - Optionalorigin?: GPUOrigin3D
    ().destination.origin | GPUOrigin3D of the data source copy.
  - Optionaldata?: Float32Array
    Float32Array data to use as source.
Returns void
- Defined in src/core/textures/Texture.ts:311

resize

resize(size?: TextureSize): void
Resize our Texture, which means recreate it/copy it again and tell the texture bind group to update.
Parameters
- size: TextureSize = null
  the optional new size to set.
Returns void
- Defined in src/core/textures/Texture.ts:340

destroy

destroy(): void
Destroy our Texture.

Returns void
- Defined in src/core/textures/Texture.ts:363

Class Texture

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Texture

Properties

renderer

type

Readonlyuuid

texture

size

options

bindings

Accessors

textureBinding

Returns TextureBinding

Methods

setRenderer

Parameters

Returns void

setBindings

Returns void

copy

Parameters

Returns void

copyGPUTexture

Parameters

Returns void

createTexture

Returns void

uploadSource

Parameters

source: GPUCopyExternalImageSource

Optionalwidth?: number

Optionalheight?: number

Optionaldepth?: number

Optionalorigin?: GPUOrigin3D

OptionalcolorSpace?: PredefinedColorSpace

Returns void

uploadData

Parameters

Optionalwidth?: number

Optionalheight?: number

Optionaldepth?: number

Optionalorigin?: GPUOrigin3D

Optionaldata?: Float32Array

Returns void

resize

Parameters

Returns void

destroy

Returns void

Settings

On This Page

`Readonly`uuid

`Optional`width?: number

`Optional`height?: number

`Optional`depth?: number

`Optional`origin?: GPUOrigin3D

`Optional`colorSpace?: PredefinedColorSpace

`Optional`width?: number

`Optional`height?: number

`Optional`depth?: number

`Optional`origin?: GPUOrigin3D

`Optional`data?: Float32Array