gpu-curtains
    Preparing search index...

    Class DOMMesh

    Create a Mesh based on a DOMObject3D, which allow the Mesh to be scaled and positioned based on a HTMLElement bounding rectangle.

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

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    type uuid index material geometry outputTarget additionalOutputTargets? renderBundle renderOrder _transparent _ready userData _onReadyCallback _onBeforeRenderCallback _onRenderCallback _onAfterRenderCallback _onAfterResizeCallback onReady onBeforeRender onRender onAfterRender onAfterResize domFrustum frustumCulling DOMFrustumMargins options _onReEnterViewCallback _onLeaveViewCallback onReEnterView onLeaveView up actualPosition children object3DIndex matricesNeedUpdate camera matrices renderer autoloadSources _sourcesReady domTextures size domElement watchScroll transforms boundingBox _onAfterDOMElementResizeCallback

    Accessors

    autoRender transparent textures uniforms storages isInFrustum visible projectedBoundingRect clipSpaceBoundingSphere parentVisibility parent rotation quaternion position scale modelMatrix worldMatrix modelViewMatrix viewMatrix projectionMatrix modelViewProjectionMatrix normalMatrix ready sourcesReady pixelRatioBoundingRect boundingRect documentPosition DOMObjectWorldScale worldScale worldPosition transformOrigin worldTransformOrigin DOMObjectDepthScaleRatio

    Methods

    loseContext restoreContext useGeometry setGeometry setRenderingOptionsForRenderPass cleanupRenderMaterialParameters useMaterial setMaterialGeometryAttributes createMediaTexture createTexture addTexture setOutputTarget onBeforeRenderScene renderPass onAfterRenderPass render remove destroy setRenderBundle patchRenderBundleBinding setShaders setDOMFrustum setMaterial setCameraBindGroup resize checkFrustumCulling onBeforeRenderPass onRenderPass shouldUpdateModelMatrix lookAt applyLookAt updateWorldMatrix updateMatrixStack applyPosition applyRotation setMatrices shouldUpdateProjectionMatrixStack shouldUpdateWorldMatrix shouldUpdateMatrixStack _onLoadingCallback setRenderer addToScene removeFromScene resizeTextures applyScale createDOMTexture onDOMTextureAdded setInitSources resetDOMElement computeGeometry onLoading setDOMElement onPositionChanged setTransforms shouldUpdateMatrices shouldUpdateComputedSizes updateSizeAndPosition applyDocumentPosition applyTransformOrigin updateModelMatrix documentToWorldSpace computeWorldSizes setWorldSizes setWorldScale setWorldTransformOrigin updateScrollPosition onAfterDOMElementResize

    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

    RenderMaterial used by this MeshBaseClass

    geometry: AllowedGeometries

    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

    _transparent: boolean

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

    _ready

    _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

    _onReadyCallback: () => void

    function assigned to the onReady callback

    _onBeforeRenderCallback

    _onBeforeRenderCallback: () => void

    function assigned to the onBeforeRender callback

    _onRenderCallback

    _onRenderCallback: () => void

    function assigned to the onRender callback

    _onAfterRenderCallback

    _onAfterRenderCallback: () => void

    function assigned to the onAfterRender callback

    _onAfterResizeCallback

    _onAfterResizeCallback: () => void

    function assigned to the onAfterResize callback

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

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

    Type Declaration

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

    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) => ProjectedMeshBaseClass | MeshBaseClass

    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) => ProjectedMeshBaseClass | MeshBaseClass

    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) => ProjectedMeshBaseClass | MeshBaseClass

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

    Options used to create this ProjectedMeshBaseClass

    _onReEnterViewCallback

    _onReEnterViewCallback: () => void

    function assigned to the onReEnterView callback

    _onLeaveViewCallback

    _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

    up: Vec3

    Vec3 used by the lookAt method, to determine the orientation of the result. Default to new Vec3(0, 1, 0).

    actualPosition: Vec3

    Vec3 holding the actual position of this Object3D from its worldMatrix.

    children: Object3D[]

    Children Object3D in the scene graph, used to compute their own worldMatrix.

    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

    matrices: Record<ProjectedObject3DMatricesType, Object3DTransformMatrix> & ProjectedObject3DNormalMatrix

    Matrices object of the ProjectedObject3D

    renderer: GPUCurtainsRenderer

    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

    _sourcesReady: boolean

    Whether all the sources have been successfully loaded.

    domTextures: DOMTexture[]

    Array of DOMTexture handled by this DOMMesh.

    size: DOMObject3DSize

    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.

    transforms: DOMObject3DTransforms

    Transformation object of the DOMObject3D.

    boundingBox: Box3 = ...

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

    _onAfterDOMElementResizeCallback

    _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.

    • get parentVisibility(): boolean

      Get whether all this Object3D parents are visible or not. Should not be used directly.

      Returns boolean

    • set parentVisibility(value: boolean): void

      Set to false if at least one of this Object3D parent is not visible, true otherwise. Should not be used directly.

      Parameters

      • value: boolean

        New parent visibility value.

      Returns void

    • 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

    • Called when the device has been lost to prepare everything for restoration. Basically set all the GPUBuffer to null so they will be reset next time we try to draw the Mesh

      Returns void

    • Set our Mesh geometry: create buffers and add attributes to material

      Returns void

    • Assign or remove a RenderTarget to this Mesh Since this manipulates the Scene stacks, it can be used to remove a RenderTarget as well.

      Parameters

      • outputTarget: RenderTarget

        the RenderTarget to assign or null if we want to remove the current RenderTarget

      Returns void

    • Apply a look at rotation based on a target, a position and our up vectors.

      Parameters

      • target: Vec3

        Vec3 target to look at.

      • position: Vec3

        Vec3 position from which to look at.

      Returns void

    • Update our model matrix.

      Parameters

      • updateParents: boolean = false

        Whether to update the parent worldMatrix beforehand. Default to false.

      • updateChildren: boolean = true

        Whether to update the children worldMatrix afterward. Default to true.

      Returns void

    • Check at each render whether we should update our matrices, and update them if needed

      Returns void

    • Set our projection matrices shouldUpdate flags to true (tell them to update)

      Returns void

    • When the world matrix update, tell our projection matrix to update as well

      Returns void

    _onLoadingCallback

    • Compute the Mesh geometry if needed.

      Returns void

    • Check whether at least one of the matrix should be updated.

      Returns void

    • Compute the DOMObject3D world position using its world position and document translation converted to world space.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods
    loseContextrestoreContextuseGeometrysetGeometrysetRenderingOptionsForRenderPasscleanupRenderMaterialParametersuseMaterialsetMaterialGeometryAttributescreateMediaTexturecreateTextureaddTexturesetOutputTargetonBeforeRenderScenerenderPassonAfterRenderPassrenderremovedestroysetRenderBundlepatchRenderBundleBindingsetShaderssetDOMFrustumsetMaterialsetCameraBindGroupresizecheckFrustumCullingonBeforeRenderPassonRenderPassshouldUpdateModelMatrixlookAtapplyLookAtupdateWorldMatrixupdateMatrixStackapplyPositionapplyRotationsetMatricesshouldUpdateProjectionMatrixStackshouldUpdateWorldMatrixshouldUpdateMatrixStack_onLoadingCallbacksetRendereraddToSceneremoveFromSceneresizeTexturesapplyScalecreateDOMTextureonDOMTextureAddedsetInitSourcesresetDOMElementcomputeGeometryonLoadingsetDOMElementonPositionChangedsetTransformsshouldUpdateMatricesshouldUpdateComputedSizesupdateSizeAndPositionapplyDocumentPositionapplyTransformOriginupdateModelMatrixdocumentToWorldSpacecomputeWorldSizessetWorldSizessetWorldScalesetWorldTransformOriginupdateScrollPositiononAfterDOMElementResize