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 full)

Object3D
- DOMTexture

Index

Constructors

constructor

Accessors

parent rotation quaternion position scale transformOrigin modelMatrix worldMatrix textureBinding parentMesh sourceLoaded sourceUploaded isVideoSource

Constructors

constructor

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

Properties

transforms

transforms: Object3DTransforms

Transformation object of the Object3D

matrices

matrices: Object3DMatrices

Matrices object of the Object3D

children

children: Object3D[]

Children Object3D in the scene graph, used to compute their own world matrix

object3DIndex

object3DIndex: number

Index (order of creation) of this Object3D. Used in the parent / children relation.

matricesNeedUpdate

matricesNeedUpdate: boolean

Whether at least one of this Object3D matrix needs an update.

type

type: string

The type of the DOMTexture

`Readonly` uuid

uuid: string

The universal unique id of this DOMTexture

renderer

renderer: Renderer

Renderer used by this DOMTexture

texture

texture: GPUTexture

The GPUTexture used if any

externalTexture

externalTexture: GPUExternalTexture

The GPUExternalTexture used if any

source

source: TextureSource

The DOMTexture source to use

size

size: TextureSize

The GPUTexture, matching the source size (with 1 for depth)

options

options: DOMTextureOptions

Options used to create this DOMTexture

textureMatrix

textureMatrix: BufferBinding

A buffer binding that will hold the texture model matrix

bindings

bindings: BindGroupBindingElement[]

The bindings used by this DOMTexture, i.e. its textureMatrix and its GPU texture binding

`Private` _parentMesh

_parentMesh: DOMTextureParent

DOMTexture parentMesh if any

`Private` _sourceLoaded

_sourceLoaded: boolean

Whether the source has been loaded

`Private` _sourceUploaded

_sourceUploaded: boolean

Whether the source has been uploaded to the GPU, handled by the GPUDeviceManager texturesQueue array

shouldUpdate

shouldUpdate: boolean

Whether the texture should be uploaded to the GPU

videoFrameCallbackId

videoFrameCallbackId: number

HTMLVideoElement.requestVideoFrameCallback | requestVideoFrameCallback returned id if used

`Private` #parentRatio

#parentRatio: Vec3 = ...

Private vector used for {@link#modelMatrix} calculations, based on parentMesh size

`Private` #sourceRatio

#sourceRatio: Vec3 = ...

Private vector used for modelMatrix calculations, based on source size

`Private` #coverScale

#coverScale: Vec3 = ...

Private vector used for modelMatrix calculations, based on #parentRatio and #sourceRatio

`Private` #rotationMatrix

#rotationMatrix: Mat4 = ...

Private rotation matrix based on texture quaternion

Accessors

parent

get parent(): Object3D
Get the parent of this Object3D if any

Returns Object3D
Inherited from Object3D.parent
- Defined in src/core/objects3D/Object3D.ts:92
set parent(value): void
Set the parent of this Object3D
Parameters
- value: Object3D
  new parent to set, could be an Object3D or null
Returns void
Inherited from Object3D.parent
- Defined in src/core/objects3D/Object3D.ts:100

rotation

get rotation(): Vec3
Get our rotation vector

Returns Vec3
Inherited from Object3D.rotation
- Defined in src/core/objects3D/Object3D.ts:145
set rotation(value): void
Set our rotation vector
Parameters
- value: Vec3
  new rotation vector
Returns void
Inherited from Object3D.rotation
- Defined in src/core/objects3D/Object3D.ts:153

quaternion

get quaternion(): Quat
Get our quaternion

Returns Quat
Inherited from Object3D.quaternion
- Defined in src/core/objects3D/Object3D.ts:161
set quaternion(value): void
Set our quaternion
Parameters
- value: Quat
  new quaternion
Returns void
Inherited from Object3D.quaternion
- Defined in src/core/objects3D/Object3D.ts:169

position

get position(): Vec3
Get our position vector

Returns Vec3
Inherited from Object3D.position
- Defined in src/core/objects3D/Object3D.ts:176
set position(value): void
Set our position vector
Parameters
- value: Vec3
  new position vector
Returns void
Inherited from Object3D.position
- Defined in src/core/objects3D/Object3D.ts:184

scale

get scale(): Vec3
Get our scale vector

Returns Vec3
Inherited from Object3D.scale
- Defined in src/core/objects3D/Object3D.ts:191
set scale(value): void
Set our scale vector
Parameters
- value: Vec3
  new scale vector
Returns void
Inherited from Object3D.scale
- Defined in src/core/objects3D/Object3D.ts:199

transformOrigin

get transformOrigin(): Vec3
Get our transform origin vector

Returns Vec3
Inherited from Object3D.transformOrigin
- Defined in src/core/objects3D/Object3D.ts:208
set transformOrigin(value): void
Set our transform origin vector
Parameters
- value: Vec3
  new transform origin vector
Returns void
Inherited from Object3D.transformOrigin
- Defined in src/core/objects3D/Object3D.ts:216

modelMatrix

get modelMatrix(): Mat4
Get our model matrix

Returns Mat4
Inherited from Object3D.modelMatrix
- Defined in src/core/objects3D/Object3D.ts:273
set modelMatrix(value): void
Set our model matrix
Parameters
- value: Mat4
  new model matrix
Returns void
Inherited from Object3D.modelMatrix
- Defined in src/core/objects3D/Object3D.ts:281

worldMatrix

get worldMatrix(): Mat4
Get our world matrix

Returns Mat4
Inherited from Object3D.worldMatrix
- Defined in src/core/objects3D/Object3D.ts:297
set worldMatrix(value): void
Set our world matrix
Parameters
- value: Mat4
  new world matrix
Returns void
Inherited from Object3D.worldMatrix
- Defined in src/core/objects3D/Object3D.ts:305

textureBinding

get textureBinding(): TextureBinding
Get our GPU texture binding

Returns TextureBinding
- Defined in src/core/textures/DOMTexture.ts:200

parentMesh

get parentMesh(): DOMTextureParent
Get our texture parentMesh

Returns DOMTextureParent
- Defined in src/core/textures/DOMTexture.ts:207
set parentMesh(value): void
Set our texture parentMesh
Parameters
- value: DOMTextureParent
  texture parentMesh to set (i.e. any kind of Mesh
Returns void
- Defined in src/core/textures/DOMTexture.ts:215

sourceLoaded

get sourceLoaded(): boolean
Get whether our source has been loaded

Returns boolean
- Defined in src/core/textures/DOMTexture.ts:223
set sourceLoaded(value): void
Set whether our source has been loaded
Parameters
- value: boolean
  boolean flag indicating if the source has been loaded
Returns void
- Defined in src/core/textures/DOMTexture.ts:231

sourceUploaded

get sourceUploaded(): boolean
Get whether our source has been uploaded

Returns boolean
- Defined in src/core/textures/DOMTexture.ts:241
set sourceUploaded(value): void
Set whether our source has been uploaded
Parameters
- value: boolean
  boolean flag indicating if the source has been uploaded
Returns void
- Defined in src/core/textures/DOMTexture.ts:249

isVideoSource

get isVideoSource(): boolean
Get whether the source is a video

Returns boolean
- Defined in src/core/textures/DOMTexture.ts:578

Methods

applyRotation

applyRotation(): void
Apply our rotation and tell our model matrix to update

Returns void
Inherited from Object3D.applyRotation
- Defined in src/core/objects3D/Object3D.ts:223

applyPosition

applyPosition(): void
Tell our model matrix to update

Returns void
Inherited from Object3D.applyPosition
- Defined in src/core/objects3D/Object3D.ts:232

applyScale

applyScale(): void
Tell our model matrix to update

Returns void
Inherited from Object3D.applyScale
- Defined in src/core/objects3D/Object3D.ts:239

applyTransformOrigin

applyTransformOrigin(): void
Tell our model matrix to update

Returns void
Inherited from Object3D.applyTransformOrigin
- Defined in src/core/objects3D/Object3D.ts:246

setMatrices

setMatrices(): void
Set our model matrix and world matrix

Returns void
Inherited from Object3D.setMatrices
- Defined in src/core/objects3D/Object3D.ts:255

shouldUpdateModelMatrix

shouldUpdateModelMatrix(): void
Set our model matrix shouldUpdate flag to true (tell it to update)

Returns void
Inherited from Object3D.shouldUpdateModelMatrix
- Defined in src/core/objects3D/Object3D.ts:289

shouldUpdateWorldMatrix

shouldUpdateWorldMatrix(): void
Set our world matrix shouldUpdate flag to true (tell it to update)

Returns void
Inherited from Object3D.shouldUpdateWorldMatrix
- Defined in src/core/objects3D/Object3D.ts:313

lookAt

lookAt(target?, position?, up?): void
Rotate this Object3D so it looks at the target
Parameters
- target: Vec3 = ...
  target to look at
- position: Vec3 = ...
  postion from which to look at
- up: Vec3 = ...
Returns void
Inherited from Object3D.lookAt
- Defined in src/core/objects3D/Object3D.ts:322

updateWorldMatrix

updateWorldMatrix(): void
Update our model matrix

Returns void
Inherited from Object3D.updateWorldMatrix
- Defined in src/core/objects3D/Object3D.ts:347

shouldUpdateMatrices

shouldUpdateMatrices(): void
Check whether at least one of the matrix should be updated

Returns void
Inherited from Object3D.shouldUpdateMatrices
- Defined in src/core/objects3D/Object3D.ts:363

_onSourceLoadedCallback

_onSourceLoadedCallback(): void
function assigned to the onSourceLoaded callback

Returns void
- Defined in src/core/textures/DOMTexture.ts:105

_onSourceUploadedCallback

_onSourceUploadedCallback(): void
function assigned to the onSourceUploaded callback

Returns void
- Defined in src/core/textures/DOMTexture.ts:109

setBindings

setBindings(): void
Set our bindings

Returns void
- Defined in src/core/textures/DOMTexture.ts:182

setTransforms

setTransforms(): void
Set our texture transforms object

Returns void
Overrides Object3D.setTransforms
- Defined in src/core/textures/DOMTexture.ts:259

updateModelMatrix

updateModelMatrix(): void
Update the modelMatrix

Returns void
Overrides Object3D.updateModelMatrix
- Defined in src/core/textures/DOMTexture.ts:273

updateMatrixStack

updateMatrixStack(): void
If our modelMatrix has been updated, tell the texture matrix binding to update as well

Returns void
Overrides Object3D.updateMatrixStack
- Defined in src/core/textures/DOMTexture.ts:338

resize

resize(): void
Resize our DOMTexture

Returns void
- Defined in src/core/textures/DOMTexture.ts:349

uploadTexture

uploadTexture(): void
Tell the Renderer to upload or texture

Returns void
- Defined in src/core/textures/DOMTexture.ts:368

uploadVideoTexture

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

Returns void
- Defined in src/core/textures/DOMTexture.ts:376

copy

copy(texture): void
Copy a DOMTexture
Parameters
- texture: DOMTexture
  DOMTexture to copy
Returns void
- Defined in src/core/textures/DOMTexture.ts:388

createTexture

createTexture(): void
Set the GPU texture

Returns void
- Defined in src/core/textures/DOMTexture.ts:438

setSourceSize

setSourceSize(): void
Set the size based on the source

Returns void
- Defined in src/core/textures/DOMTexture.ts:469

loadImageBitmap

loadImageBitmap(url): 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
Async
- Defined in src/core/textures/DOMTexture.ts:489

loadImage

loadImage(source): 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>
- the newly created ImageBitmap
Async
- Defined in src/core/textures/DOMTexture.ts:501

onVideoFrameCallback

onVideoFrameCallback(): void
Set our shouldUpdate flag to true at each new video frame

Returns void
- Defined in src/core/textures/DOMTexture.ts:534

onVideoLoaded

onVideoLoaded(video): void
Callback to run when a HTMLVideoElement has loaded (when it has enough data to play). Set the HTMLVideoElement as a source and create the GPUTexture or GPUExternalTexture
Parameters
- video: HTMLVideoElement
  the newly loaded HTMLVideoElement
Returns void
- Defined in src/core/textures/DOMTexture.ts:546

loadVideo

loadVideo(source): 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
- Defined in src/core/textures/DOMTexture.ts:586

loadCanvas

loadCanvas(source): void
Load a HTMLCanvasElement, use it as a source and create the GPUTexture
Parameters
- source: HTMLCanvasElement
  the HTMLCanvasElement to use
Returns void
- Defined in src/core/textures/DOMTexture.ts:627

onSourceLoaded

onSourceLoaded(callback): DOMTexture
Callback to run when the source has been loaded
Parameters
- callback: (() => void)
  callback to run when the source has been loaded
  - - (): void
    - Returns void
Returns DOMTexture
- our DOMTexture
- Defined in src/core/textures/DOMTexture.ts:649

onSourceUploaded

onSourceUploaded(callback): DOMTexture
Callback to run when the source has been uploaded
Parameters
- callback: (() => void)
  callback to run when the source been uploaded
  - - (): void
    - Returns void
Returns DOMTexture
- our DOMTexture
- Defined in src/core/textures/DOMTexture.ts:662

render

render(): void
Render a DOMTexture:
- Update its modelMatrix and bindings if needed
- Upload the texture if it needs to be done
Returns void
- Defined in src/core/textures/DOMTexture.ts:677

destroy

destroy(): void
Destroy the DOMTexture

Returns void
Overrides Object3D.destroy
- Defined in src/core/textures/DOMTexture.ts:712

Class DOMTexture

Example

Hierarchy (view full)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

renderer: GPUCurtainsRenderer | GPUCameraRenderer | GPURenderer | GPUCurtains

parameters: DOMTextureParams = defaultDOMTextureParams

Returns DOMTexture

Properties

transforms

matrices

children

object3DIndex

matricesNeedUpdate

type

Readonly uuid

renderer

texture

externalTexture

source

size

options

textureMatrix

bindings

Private _parentMesh

Private _sourceLoaded

Private _sourceUploaded

shouldUpdate

videoFrameCallbackId

Private #parentRatio

Private #sourceRatio

Private #coverScale

Private #rotationMatrix

Accessors

parent

Returns Object3D

Parameters

value: Object3D

Returns void

rotation

Returns Vec3

Parameters

value: Vec3

Returns void

quaternion

Returns Quat

Parameters

value: Quat

Returns void

position

Returns Vec3

Parameters

value: Vec3

Returns void

scale

Returns Vec3

Parameters

value: Vec3

Returns void

transformOrigin

Returns Vec3

Parameters

value: Vec3

Returns void

modelMatrix

Returns Mat4

Parameters

value: Mat4

Returns void

worldMatrix

Returns Mat4

Parameters

value: Mat4

Returns void

`Readonly` uuid

`Private` _parentMesh

`Private` _sourceLoaded

`Private` _sourceUploaded

`Private` #parentRatio

`Private` #sourceRatio

`Private` #coverScale

`Private` #rotationMatrix