Class Mesh

Create a 3D Mesh.

A 3D Mesh is a basically a ProjectedObject3D with a Geometry and a RenderMaterial.

You need to pass at least a valid Geometry as parameter.
If no shaders are provided, it will use the normals colors as default shading.

Shaders bindings and default attributes and uniforms

The shaders are automatically patched with the input bind groups and bindings defined in your parameters object, as well as some default attributes and uniforms (see RenderPipelineEntry).

Default shaders

If one or all shaders are missing, the library will use default ones.

Default vertex shader:

struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) uv: vec2f,
  @location(1) normal: vec3f,
  @location(2) worldPosition: vec3f,
  @location(3) viewDirection: vec3f,
};

@vertex fn main(
  attributes: Attributes,
) -> VSOutput {
  var vsOutput: VSOutput;

  vsOutput.position = getOutputPosition(attributes.position);
  vsOutput.uv = attributes.uv;
  vsOutput.normal = getWorldNormal(attributes.normal);
  vsOutput.worldPosition = getWorldPosition(attributes.position).xyz;
  vsOutput.viewDirection = camera.position - vsOutput.worldPosition;

  return vsOutput;
}

Default fragment shader:

struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) uv: vec2f,
  @location(1) normal: vec3f,
};

@fragment fn main(fsInput: VSOutput) -> @location(0) vec4f {
  // normals
  return vec4(normalize(fsInput.normal) * 0.5 + 0.5, 1.0);
}

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 mesh with a box geometry
// will use the normals colors as default shading
const mesh = new Mesh(gpuCurtains, {
  label: 'My mesh',
  geometry: new BoxGeometry(),
})

Hierarchy

Constructors

constructor

Properties

type uuid index material geometry outputTarget renderOrder _transparent _visible _ready userData _onReadyCallback _onBeforeRenderCallback _onRenderCallback _onAfterRenderCallback _onAfterResizeCallback onReady onBeforeRender onRender onAfterRender onAfterResize renderer domFrustum frustumCulling DOMFrustumMargins options _onReEnterViewCallback _onLeaveViewCallback onReEnterView onLeaveView transforms children object3DIndex matricesNeedUpdate camera matrices

Accessors

autoRender ready transparent domTextures textures uniforms storages visible projectedBoundingRect clipSpaceBoundingSphere parent rotation quaternion position scale transformOrigin modelMatrix worldMatrix modelViewMatrix viewMatrix projectionMatrix modelViewProjectionMatrix normalMatrix

Methods

addToScene removeFromScene setRenderer loseContext restoreContext useGeometry computeGeometry setGeometry setRenderingOptionsForRenderPass cleanupRenderMaterialParameters useMaterial setMaterialGeometryAttributes createDOMTexture addDOMTexture onDOMTextureAdded createTexture addTexture setOutputTarget onBeforeRenderScene onAfterRenderPass render remove destroy setShaders setMaterial resize applyScale checkFrustumCulling onBeforeRenderPass onRenderPass setTransforms shouldUpdateModelMatrix lookAt updateModelMatrix updateWorldMatrix shouldUpdateMatrices updateMatrixStack applyPosition applyRotation applyTransformOrigin setMatrices shouldUpdateProjectionMatrixStack shouldUpdateWorldMatrix shouldUpdateMatrixStack

Constructors

constructor

Properties

type

type: string

The type of the MeshBaseClass

Readonly uuid

uuid: string

The universal unique id of the MeshBaseClass

Readonly index

index: number

Index of this MeshBaseClass, i.e. creation order

material

material: RenderMaterial

RenderMaterial used by this MeshBaseClass

geometry

geometry: AllowedGeometries

Geometry used by this MeshBaseClass

outputTarget

outputTarget: RenderTarget

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

renderOrder

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

_visible

_visible: boolean

Flag indicating whether to draw this MeshBaseClass or not

_ready

_ready: boolean

Flag indicating whether this MeshBaseClass is ready to be drawn

userData

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

Type declaration

    • (): void

    • function assigned to the onReady callback

      Returns void

_onBeforeRenderCallback

_onBeforeRenderCallback: (() => void)

function assigned to the onBeforeRender callback

Type declaration

_onRenderCallback

_onRenderCallback: (() => void)

function assigned to the onRender callback

Type declaration

    • (): void

    • function assigned to the onRender callback

      Returns void

_onAfterRenderCallback

_onAfterRenderCallback: (() => void)

function assigned to the onAfterRender callback

Type declaration

    • (): void

    • function assigned to the onAfterRender callback

      Returns void

_onAfterResizeCallback

_onAfterResizeCallback: (() => void)

function assigned to the onAfterResize callback

Type declaration

    • (): void

    • function assigned to the onAfterResize callback

      Returns void

onReady

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

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

Type declaration

Param: callback

callback to run when MeshBaseClass is ready

Returns

  • our Mesh

onBeforeRender

onBeforeRender: ((callback) => 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

    • (callback): 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.

      Parameters

      • callback: (() => void)

        callback to run just before updating the Scene matrix stack.

          • (): void

          • Returns void

      Returns ProjectedMeshBaseClass | MeshBaseClass

      • our Mesh

Param: callback

callback to run just before updating the Scene matrix stack.

Returns

  • our Mesh

onRender

onRender: ((callback) => 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

Param: callback

callback to run just before rendering the MeshBaseClass.

Returns

  • our Mesh

onAfterRender

onAfterRender: ((callback) => 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

Param: callback

callback to run just after MeshBaseClass has been rendered

Returns

  • our Mesh

onAfterResize

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

Callback to execute just after a Mesh has been resized.

Type declaration

Param: callback

callback to run just after MeshBaseClass has been resized

Returns

  • our Mesh

renderer

renderer: CameraRenderer

The CameraRenderer used

domFrustum

domFrustum: DOMFrustum

The ProjectedMesh DOMFrustum class object

frustumCulling

frustumCulling: FrustumCullingCheck

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

DOMFrustumMargins

DOMFrustumMargins: RectCoords

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

options

options: ProjectedMeshBaseOptions

Options used to create this ProjectedMeshBaseClass

_onReEnterViewCallback

_onReEnterViewCallback: (() => void)

function assigned to the onReEnterView callback

Type declaration

    • (): void

    • function assigned to the onReEnterView callback

      Returns void

_onLeaveViewCallback

_onLeaveViewCallback: (() => void)

function assigned to the onLeaveView callback

Type declaration

    • (): void

    • function assigned to the onLeaveView callback

      Returns void

onReEnterView

onReEnterView: ((callback) => ProjectedMeshBaseClass)

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

Type declaration

Param: callback

callback to run when ProjectedMeshBaseClass is reentering the view frustum

Returns

  • our Mesh

onLeaveView

onLeaveView: ((callback) => ProjectedMeshBaseClass)

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

Type declaration

Param: callback

callback to run when ProjectedMeshBaseClass is leaving the view frustum

Returns

  • our Mesh

transforms

transforms: Object3DTransforms

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

camera

camera: Camera

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

matrices

matrices: Record<ProjectedObject3DMatricesType, Object3DTransformMatrix> & ProjectedObject3DNormalMatrix

Matrices object of the ProjectedObject3D

Accessors

autoRender

ready

transparent

domTextures

textures

uniforms

storages

visible

projectedBoundingRect

clipSpaceBoundingSphere

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

parent

rotation

quaternion

position

scale

transformOrigin

modelMatrix

worldMatrix

modelViewMatrix

viewMatrix

projectionMatrix

modelViewProjectionMatrix

normalMatrix

Methods

addToScene

removeFromScene

  • removeFromScene(removeFromRenderer): void

  • Remove a Mesh from the renderer and the Scene

    Parameters

    • removeFromRenderer: boolean

    Returns void

setRenderer

loseContext

  • loseContext(): void

  • 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

restoreContext

useGeometry

computeGeometry

setGeometry

  • setGeometry(): void

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

    Returns void

setRenderingOptionsForRenderPass

cleanupRenderMaterialParameters

useMaterial

setMaterialGeometryAttributes

  • setMaterialGeometryAttributes(): void

  • Set Mesh material attributes

    Returns void

createDOMTexture

addDOMTexture

onDOMTextureAdded

createTexture

addTexture

setOutputTarget

  • setOutputTarget(outputTarget): 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

onBeforeRenderScene

onAfterRenderPass

render

remove

destroy

setShaders

setMaterial

resize

applyScale

checkFrustumCulling

onBeforeRenderPass

onRenderPass

  • onRenderPass(pass): void

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

    Parameters

    • pass: GPURenderPassEncoder

      current render pass

    Returns void

setTransforms

shouldUpdateModelMatrix

  • shouldUpdateModelMatrix(): void

  • Set our model matrix shouldUpdate flag to true (tell it to update)

    Returns void

lookAt

updateModelMatrix

updateWorldMatrix

shouldUpdateMatrices

  • shouldUpdateMatrices(): void

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

    Returns void

updateMatrixStack

  • updateMatrixStack(): void

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

    Returns void

applyPosition

applyRotation

applyTransformOrigin

  • applyTransformOrigin(): void

  • Tell our projection matrix stack to update

    Returns void

setMatrices

shouldUpdateProjectionMatrixStack

  • shouldUpdateProjectionMatrixStack(): void

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

    Returns void

shouldUpdateWorldMatrix

  • shouldUpdateWorldMatrix(): void

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

    Returns void

shouldUpdateMatrixStack

Settings

Member Visibility

Theme

On This Page