Plane constructor
GPUCurtainsRenderer object or GPUCurtains class object used to create this Plane
HTMLElement or string representing an HTMLElement selector used to scale and position the Plane
parameters used to create this Plane
The type of the MeshBaseClass
Readonly uuidThe universal unique id of the MeshBaseClass
Readonly indexIndex of this MeshBaseClass, i.e. creation order
RenderMaterial used by this MeshBaseClass
Geometry used by this MeshBaseClass
RenderTarget to render this Mesh to instead of the canvas context, if any.
RenderBundle used to render this Mesh, if any.
Controls the order in which this MeshBaseClass should be rendered by our Scene
Whether this MeshBaseClass should be treated as transparent. Impacts the render pipeline blend properties
Flag indicating whether to draw this MeshBaseClass or not
Flag indicating whether this MeshBaseClass is ready to be drawn
Empty object to store any additional data or custom properties into your Mesh.
function assigned to the onReady callback
function assigned to the onReady callback
function assigned to the onBeforeRender callback
function assigned to the onBeforeRender callback
function assigned to the onRender callback
function assigned to the onRender callback
function assigned to the onAfterRender callback
function assigned to the onAfterRender callback
function assigned to the onAfterResize callback
function assigned to the onAfterResize callback
callback to run when MeshBaseClass is ready
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.
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.
callback to run just before updating the Scene matrix stack.
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.
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.
callback to run just before rendering the 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.
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.
callback to run just after MeshBaseClass has been rendered
Callback to execute just after a Mesh has been resized.
Callback to execute just after a Mesh has been resized.
callback to run just after MeshBaseClass has been resized
The ProjectedMesh DOMFrustum class object
Frustum culling check to use. Accepts OBB, sphere or a boolean. Default to OBB. When set to true, OBB is used.
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
function assigned to the onReEnterView callback
function assigned to the onReEnterView callback
function assigned to the onLeaveView callback
function assigned to the onLeaveView callback
Callback to execute when a Mesh is reentering the view frustum.
Callback to execute when a Mesh is reentering the view frustum.
callback to run when ProjectedMeshBaseClass is reentering the view frustum
callback to run when ProjectedMeshBaseClass is reentering the view frustum
Callback to execute when a Mesh is leaving the view frustum.
Callback to execute when a Mesh is leaving the view frustum.
callback to run when ProjectedMeshBaseClass is leaving the view frustum
callback to run when ProjectedMeshBaseClass is leaving the view frustum
Children Object3D in the scene graph, used to compute their own world matrix
Whether at least one of this Object3D matrix needs an update.
Camera object used to compute model view and model view projection matrices
Matrices object of the ProjectedObject3D
GPUCurtainsRenderer used to create this DOMObject3D
Whether to automatically create a DOMTexture for all HTMLImageElement, HTMLVideoElement and HTMLCanvasElement child of the specified DOMMesh HTMLElement
Whether all the sources have been successfully loaded
Defines the DOMObject3D bounding boxes in both document and world spaces
DOMElement used to track the given HTMLElement size change
Whether to automatically update the DOMObject3D document and world positions on scroll
Transformation object of the DOMObject3D
Private #DOMObjectPrivate vector used to keep track of the actual .world | world position accounting the .document | additional document translation converted into world space
Private #DOMObjectPrivate vector used to keep track of the actual DOMObject3D world scale accounting the .world | DOMObject3D world size
Private #DOMObjectPrivate number representing the scale ratio of the DOMObject3D along Z axis to apply. 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.
Helper bounding box used to map the 3D object onto the 2D DOM element.
function assigned to the onAfterDOMElementResize callback
function assigned to the onAfterDOMElementResize callback
Get private #autoRender value
Get the transparent property value
Set the transparent property value. Update the RenderMaterial rendering options and Scene stack if needed.
new transparency value
Get our RenderMaterial domTextures array
Get our RenderMaterial textures array
Get the current RenderMaterial uniforms
Get the current RenderMaterial storages
Get the visible property value
Set the visible property value
new visibility value
Get our DOMFrustum projected bounding rectangle
Get our quaternion
Set our quaternion
new quaternion
Get our model matrix
Set our model matrix
new model matrix
Get our world matrix
Set our world matrix
new world matrix
Get our model view matrix
Set our model view matrix
Get our camera view matrix
Get our camera projection matrix
Get our model view projection matrix
Set our model view projection matrix
Get our normal matrix
Set our normal matrix
new normal matrix
Get/set whether all the initial DOMMesh sources have been successfully loaded
Get our DOM Element bounding rectangle accounting for current renderer pixel ratio
Get the DOM Element bounding rectangle
Get the DOM element scale in world space
Get the DOMObject3D scale in world space (accounting for scale)
Get the DOMObject3D position in world space
Get the DOMObject3D transform origin relative to the DOMObject3D
Set the DOMObject3D transform origin relative to the DOMObject3D
new transform origin
Get the DOMObject3D transform origin in world space
Set the DOMObject3D transform origin in world space
new world space transform origin
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.
depth scale ratio value to use
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
Called when the device has been restored
Set or update the Mesh Geometry
Set or update the RenderMaterial rendering options to match the RenderPass descriptor used to draw this Mesh.
RenderPass used to draw this Mesh, default to the renderer renderPass.
Hook used to clean up parameters before sending them to the material.
parameters to clean before sending them to the RenderMaterial
Set or update the Mesh RenderMaterial
new RenderMaterial to use
Create a new DOMTexture
Add a DOMTexture
DOMTexture to add
Callback run when a new DOMTexture has been created
newly created DOMTexture
Create a new Texture
Add a Texture
Assign or remove a RenderTarget to this Mesh Since this manipulates the Scene stacks, it can be used to remove a RenderTarget as well.
the RenderTarget to assign or null if we want to remove the current RenderTarget
Execute onBeforeRender callback if needed. Called by the Scene before updating the matrix stack.
Render our Mesh
current render pass encoder
Remove the Mesh from the Scene and destroy it
Set or reset this Mesh renderer.
New CameraRenderer or GPUCurtains instance to use.
Assign or remove a RenderBundle to this Mesh.
Optional renderBundle: RenderBundlethe RenderBundle to assign or null if we want to remove the current RenderBundle.
Optional updateScene: booleanWhether to remove and then re-add the Mesh from the Scene or not.
Reset the matrices buffer binding parent and offset and tell its bind group to update.
Optional offset: numberNew offset to use in the parent RenderBundle binding.
Set a Mesh matrices uniforms inputs then call MeshBaseClass super method
Resize our Mesh
the new bounding rectangle
Resize the DOMObject3D
Check if the Mesh lies inside the camera view frustum or not.
Tell our matrices bindings to update if needed and call Mesh base onBeforeRenderPass super.
Set our model matrix shouldUpdate flag to true (tell it to update)
Update our model matrix
function assigned to the onLoading callback
whether to add this DOMMesh to the renderer meshes array and renderer domMeshes array
whether to remove this DOMMesh from the renderer meshes array and renderer domMeshes array
Load initial DOMMesh sources if needed and create associated DOMTexture
Reset/change the DOM Element
new HTMLElement or string representing an HTMLElement selector to use
Called each time one of the initial sources associated GPU texture has been uploaded to the GPU
callback to call each time a GPU texture has been uploaded to the GPU
Set the DOM Element
HTMLElement or string representing an HTMLElement selector to use
Update size and position when the DOM Element position changed
Set our transforms properties and onChange vector callbacks
Set the .shouldUpdate | size shouldUpdate flag to true to compute the new sizes before next matrices calculations.
Update the DOMObject3D sizes and position
Compute the DOMObject3D world position using its world position and document translation converted to world space
Apply the transform origin and set the DOMObject3D world transform origin
Update the model matrix accounting the DOMObject3D world position and DOMObject3D world scale
Compute the world sizes
Compute and set the .world | world size and set the DOMObject3D world transform origin
Set the worldScale accounting for scaled world size and DOMObjectDepthScaleRatio
Set the DOMObject3D world transform origin and tell the matrices to update
Update the DOM Element scroll position
last scroll delta values
Callback to execute just after the domElement has been resized.
callback to run just after domElement has been resized
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.
Example