Class DOMTexture

Used to create GPUTexture or GPUExternalTexture, specially made to handle different kinds of DOM elements sources, like HTMLImageElement, HTMLVideoElement or HTMLCanvasElement.

Handles the various sources loading and uploading, GPU textures creation,texture model matrix binding and GPU texture binding.

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 DOM texture
const imageTexture = new DOMTexture(gpuCurtains, {
  label: 'My image texture',
  name: 'imageTexture',
})

// load an image
await imageTexture.loadImage(document.querySelector('img'))

Hierarchy (View Summary)

MediaTexture
- DOMTexture

Index

Constructors

constructor

new DOMTexture(
renderer: GPUCurtains | GPUCurtainsRenderer,
parameters?: DOMTextureParams,
): DOMTexture
DOMTexture constructor
Parameters
- renderer: GPUCurtains | GPUCurtainsRenderer
  Renderer object or GPUCurtains class object used to create this DOMTexture
- parameters: DOMTextureParams = defaultDOMTextureParams
  parameters used to create this DOMTexture
Returns DOMTexture
Overrides MediaTexture.constructor
- Defined in src/curtains/textures/DOMTexture.ts:94

Properties

externalTexture

externalTexture: GPUExternalTexture

The GPUExternalTexture used if any.

sources

sources: MediaTextureSource[]

The MediaTexture sources to use if any.

size

size: TextureSize

Size of the texture source, usually our sources first element size (since for cube maps, all sources must have the same size).

options

options: MediaTextureOptions

Options used to create this MediaTexture.

videoFrameCallbackIds

videoFrameCallbackIds: Map<number, number>

Array of requestVideoFrameCallback returned ids if used.

offset

offset: Vec2

Vec2 offset to apply to the Texture if useTransform parameter has been set to true.

scale

scale: Vec2

Vec2 scale to apply to the Texture if useTransform parameter has been set to true.

transformOrigin

transformOrigin: Vec2

Vec2 transformation origin to use when applying the transformations to the Texture if useTransform parameter has been set to true. A value of (0.5, 0.5) corresponds to the center of the texture. Default is (0, 0), the upper left.

modelMatrix

modelMatrix: Mat3

Mat3 transformation matrix to apply to the Texture if useTransform parameter has been set to true.

`Optional`transformBinding

transformBinding?: BufferBinding

BufferBinding to send the transformation matrix to the shaders if useTransform parameter has been set to true.

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.

bindings

bindings: BindGroupBindingElement[]

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

renderer

renderer: GPUCurtainsRenderer

GPUCurtainsRenderer used by this DOMTexture.

Accessors

sourcesLoaded

get sourcesLoaded(): boolean
Get whether all our sources have been loaded.

Returns boolean
Inherited from MediaTexture.sourcesLoaded
- Defined in src/core/textures/MediaTexture.ts:244
set sourcesLoaded(value: boolean): void
Set whether all our sources have been loaded.
Parameters
- value: boolean
  boolean flag indicating if all the sources have been loaded.
Returns void
Inherited from MediaTexture.sourcesLoaded
- Defined in src/core/textures/MediaTexture.ts:252

sourcesUploaded

get sourcesUploaded(): boolean
Get whether all our sources have been uploaded.

Returns boolean
Inherited from MediaTexture.sourcesUploaded
- Defined in src/core/textures/MediaTexture.ts:263
set sourcesUploaded(value: boolean): void
Set whether all our sources have been uploaded.
Parameters
- value: boolean
  boolean flag indicating if all the sources have been uploaded
Returns void
Inherited from MediaTexture.sourcesUploaded
- Defined in src/core/textures/MediaTexture.ts:271

rotation

get rotation(): number
Get the actual rotation value.

Returns number
- the actual rotation value.
Inherited from MediaTexture.rotation
- Defined in src/core/textures/MediaTexture.ts:284
set rotation(value: number): void
Set the actual rotation value and update the modelMatrix.
Parameters
- value: number
  new rotation value to use.
Returns void
Inherited from MediaTexture.rotation
- Defined in src/core/textures/MediaTexture.ts:292

textureBinding

get textureBinding(): TextureBinding
Get our texture binding.

Returns TextureBinding
Inherited from MediaTexture.textureBinding
- Defined in src/core/textures/Texture.ts:214

mesh

get mesh(): DOMProjectedMesh
Get our texture parent mesh if any.

Returns DOMProjectedMesh
- Defined in src/curtains/textures/DOMTexture.ts:109
set mesh(value: DOMProjectedMesh): void
Set our texture parent mesh.
Parameters
- value: DOMProjectedMesh
  texture parent mesh to set.
Returns void
- Defined in src/curtains/textures/DOMTexture.ts:117

source

get source(): TextureSource
Get our unique source, since DOMTexture have a fixed '2d' view dimension.

Returns TextureSource
- Our unique source, i.e. first element of sources array if it exists.
- Defined in src/curtains/textures/DOMTexture.ts:209

Methods

_onSourceLoadedCallback

_onSourceLoadedCallback(source: TextureSource): void
function assigned to the onSourceLoaded callback
Parameters
- source: TextureSource
Returns void
Inherited from MediaTexture._onSourceLoadedCallback
- Defined in src/core/textures/MediaTexture.ts:138

_onAllSourcesLoadedCallback

_onAllSourcesLoadedCallback(): void
function assigned to the onAllSourcesLoaded callback

Returns void
Inherited from MediaTexture._onAllSourcesLoadedCallback
- Defined in src/core/textures/MediaTexture.ts:143

_onSourceUploadedCallback

_onSourceUploadedCallback(source: TextureSource): void
function assigned to the onSourceUploaded callback
Parameters
- source: TextureSource
Returns void
Inherited from MediaTexture._onSourceUploadedCallback
- Defined in src/core/textures/MediaTexture.ts:148

_onAllSourcesUploadedCallback

_onAllSourcesUploadedCallback(): void
function assigned to the onAllSourcesUploaded callback

Returns void
Inherited from MediaTexture._onAllSourcesUploadedCallback
- Defined in src/core/textures/MediaTexture.ts:153

setBindings

setBindings(): void
Set our bindings.

Returns void
Inherited from MediaTexture.setBindings
- Defined in src/core/textures/MediaTexture.ts:323

createTexture

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

Returns void
Inherited from MediaTexture.createTexture
- Defined in src/core/textures/MediaTexture.ts:376

loadImageBitmap

loadImageBitmap(url: string): Promise<ImageBitmap>
Load an HTMLImageElement from a URL and create an ImageBitmap to use as a source.
Parameters
- url: string
  URL of the image to load.
Returns Promise<ImageBitmap>
- the newly created ImageBitmap.
Inherited from MediaTexture.loadImageBitmap
- Defined in src/core/textures/MediaTexture.ts:473

loadImage

loadImage(source: string | HTMLImageElement): Promise<void>
Load and create an ImageBitmap from a URL or HTMLImageElement, use it as a source and create the GPUTexture.
Parameters
- source: string | HTMLImageElement
  the image URL or HTMLImageElement to load.
Returns Promise<void>
Inherited from MediaTexture.loadImage
- Defined in src/core/textures/MediaTexture.ts:497

useImageBitmap

useImageBitmap(imageBitmap: ImageBitmap, sourceIndex?: number): void
Use an already loaded ImageBitmap as a sources.
Parameters
- imageBitmap: ImageBitmap
  ImageBitmap to use.
- sourceIndex: number = 0
  Index at which to insert the source in the sources array in case of cube map.
Returns void
Inherited from MediaTexture.useImageBitmap
- Defined in src/core/textures/MediaTexture.ts:537

loadImages

loadImages(sources: (string | HTMLImageElement)[]): Promise<void>
Load and create images using loadImage from an array of images sources as strings or HTMLImageElement. Useful for cube maps.
Parameters
- sources: (string | HTMLImageElement)[]
  Array of images sources as strings or HTMLImageElement to load.
Returns Promise<void>
Inherited from MediaTexture.loadImages
- Defined in src/core/textures/MediaTexture.ts:566

uploadVideoTexture

uploadVideoTexture(): void
Import a GPUExternalTexture from the Renderer, update the textureBinding and its bind group

Returns void
Inherited from MediaTexture.uploadVideoTexture
- Defined in src/core/textures/MediaTexture.ts:575

closeVideoFrame

closeVideoFrame(): void
Close an external source VideoFrame if any.

Returns void
Inherited from MediaTexture.closeVideoFrame
- Defined in src/core/textures/MediaTexture.ts:605

onVideoFrameCallback

onVideoFrameCallback(sourceIndex?: number): void
Set our source shouldUpdate flag to true at each new video frame.
Parameters
- sourceIndex: number = 0
Returns void
Inherited from MediaTexture.onVideoFrameCallback
- Defined in src/core/textures/MediaTexture.ts:622

onVideoLoaded

onVideoLoaded(video: HTMLVideoElement, sourceIndex?: number): void
Callback to run when a HTMLVideoElement has loaded (when it has enough data to play). Set the HTMLVideoElement as a MediaTextureSource.source and create the GPUTexture or GPUExternalTexture.
Parameters
- video: HTMLVideoElement
  the newly loaded HTMLVideoElement.
- sourceIndex: number = 0
  Index of the HTMLVideoElement in the sources array.
Returns void
Inherited from MediaTexture.onVideoLoaded
- Defined in src/core/textures/MediaTexture.ts:637

isVideoSource

isVideoSource(source: TextureSource): source is HTMLVideoElement
Get whether the provided source is a video.
Parameters
- source: TextureSource
  TextureSource to check.
Returns source is HTMLVideoElement
- Whether the source is a video or not.
Inherited from MediaTexture.isVideoSource
- Defined in src/core/textures/MediaTexture.ts:669

isVideoSourceReady

isVideoSourceReady(source: TextureSource): boolean
Get whether the provided video source is ready to be played.
Parameters
- source: TextureSource
  TextureSource to check.
Returns boolean
- Whether the video source is ready to be played.
Inherited from MediaTexture.isVideoSourceReady
- Defined in src/core/textures/MediaTexture.ts:678

shouldUpdateVideoSource

shouldUpdateVideoSource(source: TextureSource): boolean
Get whether the provided video source is ready to be uploaded.
Parameters
- source: TextureSource
  TextureSource to check.
Returns boolean
- Whether the video source is ready to be uploaded.
Inherited from MediaTexture.shouldUpdateVideoSource
- Defined in src/core/textures/MediaTexture.ts:689

loadVideo

loadVideo(source: string | HTMLVideoElement): void
Load a video from a URL or HTMLVideoElement and register onVideoLoaded callback.
Parameters
- source: string | HTMLVideoElement
  the video URL or HTMLVideoElement to load.
Returns void
Inherited from MediaTexture.loadVideo
- Defined in src/core/textures/MediaTexture.ts:699

useVideo

useVideo(video: HTMLVideoElement, sourceIndex?: number): void
Use a HTMLVideoElement as a sources.
Parameters
- video: HTMLVideoElement
  HTMLVideoElement to use.
- sourceIndex: number = 0
  Index at which to insert the source in the sources array in case of cube map.
Returns void
Inherited from MediaTexture.useVideo
- Defined in src/core/textures/MediaTexture.ts:730

loadVideos

loadVideos(sources: (string | HTMLVideoElement)[]): void
Load and create videos using loadVideo from an array of videos sources as strings or HTMLVideoElement. Useful for cube maps.
Parameters
- sources: (string | HTMLVideoElement)[]
  Array of images sources as strings or HTMLVideoElement to load.
Returns void
Inherited from MediaTexture.loadVideos
- Defined in src/core/textures/MediaTexture.ts:782

loadCanvas

loadCanvas(source: HTMLCanvasElement): void
Load a HTMLCanvasElement and use it as one of our sources.
Parameters
- source: HTMLCanvasElement
  the HTMLCanvasElement to use.
Returns void
Inherited from MediaTexture.loadCanvas
- Defined in src/core/textures/MediaTexture.ts:792

loadCanvases

loadCanvases(sources: HTMLCanvasElement[]): void
Load an array of HTMLCanvasElement using loadCanvas . Useful for cube maps.
Parameters
- sources: HTMLCanvasElement[]
  Array of HTMLCanvasElement to load.
Returns void
Inherited from MediaTexture.loadCanvases
- Defined in src/core/textures/MediaTexture.ts:828

setSourceUploaded

setSourceUploaded(sourceIndex?: number): void
Set the sourceUploaded flag to true for the source at a given index in our sources array. If all sources have been uploaded, set our sourcesUploaded flag to true.
Parameters
- sourceIndex: number = 0
  Index of the source in the sources array.
Returns void
Inherited from MediaTexture.setSourceUploaded
- Defined in src/core/textures/MediaTexture.ts:855

onSourceLoaded

onSourceLoaded(callback: (source: TextureSource) => void): this
Callback to run when one of the source has been loaded.
Parameters
- callback: (source: TextureSource) => void
  callback to run when one of the source has been loaded.
Returns this
- our MediaTexture
Inherited from MediaTexture.onSourceLoaded
- Defined in src/core/textures/MediaTexture.ts:871

onAllSourcesLoaded

onAllSourcesLoaded(callback: () => void): this
Callback to run when all of the source have been loaded.
Parameters
- callback: () => void
  callback to run when all of the sources have been loaded.
Returns this
- our MediaTexture
Inherited from MediaTexture.onAllSourcesLoaded
- Defined in src/core/textures/MediaTexture.ts:884

onSourceUploaded

onSourceUploaded(callback: (source: TextureSource) => void): this
Callback to run when one of the MediaTextureSource.source has been uploaded to the GPU.
Parameters
- callback: (source: TextureSource) => void
  callback to run when one of the source has been uploaded to the GPU.
Returns this
- our MediaTexture.
Inherited from MediaTexture.onSourceUploaded
- Defined in src/core/textures/MediaTexture.ts:897

onAllSourcesUploaded

onAllSourcesUploaded(callback: () => void): this
Callback to run when all of the source have been uploaded to the GPU.
Parameters
- callback: () => void
  callback to run when all of the sources been uploaded to the GPU.
Returns this
- our MediaTexture.
Inherited from MediaTexture.onAllSourcesUploaded
- Defined in src/core/textures/MediaTexture.ts:910

update

update(): void
Update a MediaTexture by uploading the texture if needed.

Returns void
Inherited from MediaTexture.update
- Defined in src/core/textures/MediaTexture.ts:923

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
Inherited from MediaTexture.setRenderer
- Defined in src/core/textures/Texture.ts:172

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
Inherited from MediaTexture.copyGPUTexture
- Defined in src/core/textures/Texture.ts:231

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
Inherited from MediaTexture.uploadSource
- Defined in src/core/textures/Texture.ts:288

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
Inherited from MediaTexture.uploadData
- Defined in src/core/textures/Texture.ts:323

setQualityRatio

setQualityRatio(qualityRatio?: number): void
Update our Texture quality ratio and resize it.
Parameters
- qualityRatio: number = 1
  New quality ratio to use.
Returns void
Inherited from MediaTexture.setQualityRatio
- Defined in src/core/textures/Texture.ts:352

setSize

setSize(size: TextureSize): void
Set our Texture size, recreate it/copy it again and tell the texture bind group to update.
Parameters
- size: TextureSize
  the new size to set.
Returns void
Inherited from MediaTexture.setSize
- Defined in src/core/textures/Texture.ts:387

updateModelMatrix

updateModelMatrix(): void
Update the modelMatrix.

Returns void
Overrides MediaTexture.updateModelMatrix
- Defined in src/curtains/textures/DOMTexture.ts:127

setSourceSize

setSourceSize(): void
Set our source size and update the modelMatrix.

Returns void
Overrides MediaTexture.setSourceSize
- Defined in src/curtains/textures/DOMTexture.ts:190

resize

resize(): void
Resize our DOMTexture.

Returns void
Overrides MediaTexture.resize
- Defined in src/curtains/textures/DOMTexture.ts:198

copy

copy(texture: DOMTexture | MediaTexture | Texture): void
Copy a DOMTexture.
Parameters
- texture: DOMTexture | MediaTexture | Texture
  DOMTexture to copy.
Returns void
Overrides MediaTexture.copy
- Defined in src/curtains/textures/DOMTexture.ts:217

destroy

destroy(): void
Destroy the DOMTexture.

Returns void
Overrides MediaTexture.destroy
- Defined in src/curtains/textures/DOMTexture.ts:227

Class DOMTexture

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns DOMTexture

Properties

externalTexture

sources

size

options

videoFrameCallbackIds

offset

scale

transformOrigin

modelMatrix

OptionaltransformBinding

type

Readonlyuuid

texture

bindings

renderer

Accessors

sourcesLoaded

Returns boolean

Parameters

Returns void

sourcesUploaded

Returns boolean

Parameters

Returns void

rotation

Returns number

Parameters

Returns void

textureBinding

Returns TextureBinding

mesh

Returns DOMProjectedMesh

Parameters

Returns void

source

Returns TextureSource

Methods

_onSourceLoadedCallback

Parameters

Returns void

_onAllSourcesLoadedCallback

Returns void

_onSourceUploadedCallback

Parameters

Returns void

_onAllSourcesUploadedCallback

Returns void

setBindings

Returns void

createTexture

Returns void

loadImageBitmap

Parameters

Returns Promise<ImageBitmap>

loadImage

Parameters

Returns Promise<void>

useImageBitmap

Parameters

Returns void

loadImages

Parameters

Returns Promise<void>

uploadVideoTexture

Returns void

closeVideoFrame

Returns void

`Optional`transformBinding

`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