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
ReadonlyuuidThe universal unique id of the MeshBaseClass
ReadonlyindexIndex 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.
OptionaladditionalAdditional 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 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 onBeforeRender callback
function assigned to the onRender callback
function assigned to the onAfterRender 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 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 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 run just after MeshBaseClass has been rendered
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 onLeaveView callback
Callback to execute when a Mesh 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 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
Array of DOMTexture handled by this DOMMesh.
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
Helper bounding box used to map the 3D object onto the 2D DOM element.
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 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 restored
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 MediaTexture.
Create a new 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
Assign or remove a RenderBundle to this Mesh.
OptionalrenderBundle: RenderBundlethe RenderBundle to assign or null if we want to remove the current RenderBundle.
OptionalupdateScene: 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.
Optionaloffset: 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
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.
Only render the Mesh if it is in view frustum. Since render() is actually called before onRenderPass(), we are sure to have fresh frustum bounding rectangle values here.
current render pass
Set our model matrix shouldUpdate flag to true (tell it to update)
Update our model matrix
function assigned to the onLoading callback
New GPUCurtainsRenderer or GPUCurtains instance to use.
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.
Resize the textures and domTextures.
Apply scale and update DOMTexture modelMatrix.
Create a new DOMTexture.
Callback run when a new DOMTexture has been added.
newly created DOMTexture.
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