Used to create a special DOMMesh class object using a PlaneGeometry. This means a quad that looks like an ordinary HTMLElement but with WebGPU rendering capabilities.

// 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 Plane,
// assuming there's a HTML element with the "plane" ID in the DOM
// will use the normals colors as default shading
const plane = new Plane(gpuCurtains, '#plane', {
label: 'My plane',
})

Hierarchy (View Summary)

Constructors

Properties

Accessors

Methods

Constructors

Properties

type: string

The type of the MeshBaseClass

uuid: string

The universal unique id of the MeshBaseClass

index: number

Index of this MeshBaseClass, i.e. creation order

material: RenderMaterial

Geometry used by this MeshBaseClass

outputTarget: RenderTarget

RenderTarget to render this Mesh to instead of the canvas context, if any.

additionalOutputTargets?: RenderTarget[]

Additional output RenderTarget onto which render this Mesh, besides the main outputTarget or screen. Useful for some effects that might need to render the same Mesh twice or more. Beware tho that the Mesh pipeline has to exactly fit the provided RenderTarget render passes descriptors as no checks will be performed here.

renderBundle: RenderBundle

RenderBundle used to render this Mesh, if any.

renderOrder: number

Controls the order in which this MeshBaseClass should be rendered by our Scene

_transparent: boolean

Whether this MeshBaseClass should be treated as transparent. Impacts the render pipeline blend properties

_visible: boolean

Flag indicating whether to draw this MeshBaseClass or not

_ready: boolean

Flag indicating whether this MeshBaseClass is ready to be drawn

userData: Record<string, unknown>

Empty object to store any additional data or custom properties into your Mesh.

_onReadyCallback: () => void

function assigned to the onReady callback

_onBeforeRenderCallback: () => void

function assigned to the onBeforeRender callback

_onRenderCallback: () => void

function assigned to the onRender callback

_onAfterRenderCallback: () => void

function assigned to the onAfterRender callback

_onAfterResizeCallback: () => void

function assigned to the onAfterResize callback

onReady: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

Callback to execute when a Mesh is ready - i.e. its material and geometry are ready.

Type declaration

onBeforeRender: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

Callback to execute before updating the Scene matrix stack. This means it is called early and allows to update transformations values before actually setting the Mesh matrices (if any). This also means it won't be called if the Mesh has not been added to the Scene. The callback won't be called if the Renderer is not ready or the Mesh itself is neither ready nor visible.

Type declaration

onRender: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

Callback to execute right before actually rendering the Mesh. Useful to update uniforms for example. The callback won't be called if the Renderer is not ready or the Mesh itself is neither ready nor visible.

Type declaration

onAfterRender: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

Callback to execute just after a Mesh has been rendered. The callback won't be called if the Renderer is not ready or the Mesh itself is neither ready nor visible.

Type declaration

onAfterResize: (callback: () => void) => MeshBaseClass | ProjectedMeshBaseClass

Callback to execute just after a Mesh has been resized.

Type declaration

domFrustum: DOMFrustum

The ProjectedMesh DOMFrustum class object

frustumCulling: FrustumCullingCheck

Frustum culling check to use. Accepts OBB, sphere or a boolean. Default to OBB. When set to true, OBB is used.

DOMFrustumMargins: RectCoords

Margins (in pixels) to applied to the DOM Frustum to determine if this ProjectedMesh should be frustum culled or not

Options used to create this ProjectedMeshBaseClass

_onReEnterViewCallback: () => void

function assigned to the onReEnterView callback

_onLeaveViewCallback: () => void

function assigned to the onLeaveView callback

onReEnterView: (callback: () => void) => ProjectedMeshBaseClass

Callback to execute when a Mesh is reentering the view frustum.

Type declaration

onLeaveView: (callback: () => void) => ProjectedMeshBaseClass

Callback to execute when a Mesh is leaving the view frustum.

Type declaration

children: Object3D[]

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

object3DIndex: number

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

matricesNeedUpdate: boolean

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

camera: Camera

Camera object used to compute model view and model view projection matrices

GPUCurtainsRenderer used to create this DOMObject3D

autoloadSources: boolean

Whether to automatically create a DOMTexture for all HTMLImageElement, HTMLVideoElement and HTMLCanvasElement child of the specified DOMMesh HTMLElement

_sourcesReady: boolean

Whether all the sources have been successfully loaded

domTextures: DOMTexture[]

Array of DOMTexture handled by this DOMMesh.

Defines the DOMObject3D bounding boxes in both document and world spaces

domElement: DOMElement

DOMElement used to track the given HTMLElement size change

watchScroll: boolean

Whether to automatically update the DOMObject3D document and world positions on scroll

boundingBox: Box3 = ...

Helper bounding box used to map the 3D object onto the 2D DOM element.

_onAfterDOMElementResizeCallback: () => void = ...

function assigned to the onAfterDOMElementResize callback

Accessors

  • get clipSpaceBoundingSphere(): { center: Vec3; radius: number }
  • Get the geometry bounding sphere in clip space.

    Returns { center: Vec3; radius: number }

    • center: Vec3

      Center of the bounding sphere.

    • radius: number

      Radius of the bounding sphere.

  • set DOMObjectDepthScaleRatio(value: number): void
  • Set DOMObjectDepthScaleRatio. Since it can be difficult to guess the most accurate scale along the Z axis of an object mapped to 2D coordinates, this helps with adjusting the scale along the Z axis.

    Parameters

    • value: number

      depth scale ratio value to use

    Returns void

Methods