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

Constructors

constructor

new DOMTexture(
renderer: GPUCurtainsRenderer | GPUCurtains,
parameters?: DOMTextureParams,
): DOMTexture
DOMTexture constructor
Parameters
- renderer: GPUCurtainsRenderer | GPUCurtains
  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:238
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:246

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:257
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:265

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:278
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:286

textureBinding

get textureBinding(): TextureBinding
Get our texture binding.

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

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:220

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:136

_onAllSourcesLoadedCallback

_onAllSourcesLoadedCallback(): void
function assigned to the onAllSourcesLoaded callback

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

_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:146

_onAllSourcesUploadedCallback

_onAllSourcesUploadedCallback(): void
function assigned to the onAllSourcesUploaded callback

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

setBindings

setBindings(): void
Set our bindings.

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

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:370

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:421

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:463

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:487

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:527

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:554

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:569

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:584

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:614

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:623

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:634

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:644

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:709

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:719

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:753

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:780

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:796

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:809

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:822

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:835

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:848

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:161

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:219

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

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

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

uploadVideoTexture

Returns void

loadImageBitmap

Parameters

Returns Promise<ImageBitmap>

loadImage

Parameters

Returns Promise<void>

useImageBitmap

Parameters

Returns void

loadImages

Parameters

Returns Promise<void>

onVideoFrameCallback

Parameters

`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