@tmrw-realityos/charm

---

@tmrw-realityos/charm / WebGPURenderer

Class: WebGPURenderer

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:294

Renders a mesh to a canvas using WebGPU

@example:

 const renderer = new WebGPURenderer(device, canvas)
 renderer.environment = await HDRELoader.load('assets/venetian_crossroads_2k.hdr')
 const model = await renderer.loadGLTF('assets/scene.gltf')
 const scene = new Scene()
 scene.root.addChild(model.root.clone());
 renderer.render(scene, camera)

See

My First Triangle

Extends

• RendererInterface

Constructors

new WebGPURenderer()

new WebGPURenderer(device, canvas): WebGPURenderer

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:335

Parameters

device

GPUDevice

canvas

HTMLCanvasElement

Returns

WebGPURenderer

Overrides

RendererInterface.constructor

Properties

_environment?

protected optional _environment: HDREnvironment

Defined in: packages/charm/src/graphics/rendererInterface.ts:192

Inherited from

RendererInterface._environment

---

accelerationStructure

protected accelerationStructure: AccelerationStructure

Defined in: packages/charm/src/graphics/rendererInterface.ts:206

Inherited from

RendererInterface.accelerationStructure

---

accelerationStructureMustRebuild

protected accelerationStructureMustRebuild: boolean = false

Defined in: packages/charm/src/graphics/rendererInterface.ts:208

Inherited from

RendererInterface.accelerationStructureMustRebuild

---

alwaysRerender

alwaysRerender: boolean = false

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:329

If true, force frames will be rerendered in every frame loop. Otherwise only rerender on demand.

---

backend

backend: WebGPUBackend

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:296

Overrides

RendererInterface.backend

---

basePath

basePath: string = ""

Defined in: packages/charm/src/graphics/rendererInterface.ts:184

Inherited from

RendererInterface.basePath

---

bufferMapped

bufferMapped: boolean = false

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:547

---

canvas?

optional canvas: HTMLCanvasElement

Defined in: packages/charm/src/graphics/rendererInterface.ts:189

Inherited from

RendererInterface.canvas

---

commandEncoder?

optional commandEncoder: GPUCommandEncoder

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:311

---

depthReadBuffer?

optional depthReadBuffer: GPUBuffer

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:316

---

depthStagingBuffer?

optional depthStagingBuffer: GPUBuffer

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:317

---

device

device: GPUDevice

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:295

---

draw

draw: WebGPUImmediateDraw

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:303

Overrides

RendererInterface.draw

---

framegraph

framegraph: FrameGraph

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:301

---

gltfToNodes?

optional gltfToNodes: WebGPUGltfToNodes

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:309

---

loadedGLTFs

loadedGLTFs: Map<string, GLTFInfo>

Defined in: packages/charm/src/graphics/rendererInterface.ts:203

Inherited from

RendererInterface.loadedGLTFs

---

loadingGLTFs

loadingGLTFs: Map<string, LoadedGLTFCallback[]>

Defined in: packages/charm/src/graphics/rendererInterface.ts:204

Inherited from

RendererInterface.loadingGLTFs

---

materialBindGroupCache

materialBindGroupCache: Map<number, GPUBindGroup>

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:333

---

onRenderGizmos()?

optional onRenderGizmos: (renderer) => void

Defined in: packages/charm/src/graphics/rendererInterface.ts:210

Parameters

renderer

RendererInterface

Returns

void

Inherited from

RendererInterface.onRenderGizmos

---

onRenderInFinalBuffer()?

optional onRenderInFinalBuffer: (view, depth, encoder) => void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:319

Parameters

view

GPUTexture

depth

GPUTexture

encoder

GPUCommandEncoder

Returns

void

---

outliner

outliner: WebGPUMeshOutliner

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:305

---

PBRPipeline

PBRPipeline: WebGPUPBRPipeline

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:302

---

picker?

optional picker: WebGPUMeshPicker

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:304

---

plane?

optional plane: Mesh

Defined in: packages/charm/src/graphics/rendererInterface.ts:185

Inherited from

RendererInterface.plane

---

planeXY?

optional planeXY: Mesh

Defined in: packages/charm/src/graphics/rendererInterface.ts:186

Inherited from

RendererInterface.planeXY

---

renderableDescriptors

renderableDescriptors: RenderableDescriptor[] = []

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:308

---

renderContext

renderContext: WebGPURenderContext

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:297

---

renderOptions

renderOptions: SceneRenderOptions

Defined in: packages/charm/src/graphics/rendererInterface.ts:200

Inherited from

RendererInterface.renderOptions

---

sceneToRenderables

sceneToRenderables: WebGPUSceneToRenderables

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:307

---

secondaryCanvas

secondaryCanvas: ISecondaryCanvas[] = []

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:299

---

stagingBuffer?

optional stagingBuffer: GPUBuffer

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:313

---

stagingBufferOffset

stagingBufferOffset: number = 0

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:314

---

stagingShader?

optional stagingShader: TextureToBufferShader

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:315

---

tinyGltf?

optional tinyGltf: TinyGltf

Defined in: packages/charm/src/graphics/rendererInterface.ts:202

Inherited from

RendererInterface.tinyGltf

---

transparent

transparent: boolean = false

Defined in: packages/charm/src/graphics/rendererInterface.ts:191

Inherited from

RendererInterface.transparent

---

waitingDepth?

optional waitingDepth: IWaitingDepth

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:312

Accessors

canvasFormat

Get Signature

get canvasFormat(): GPUTextureFormat

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:369

Returns

GPUTextureFormat

---

canvasViewFormat

Get Signature

get canvasViewFormat(): GPUTextureFormat

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:373

Returns

GPUTextureFormat

---

environment

Get Signature

get environment(): undefined | HDREnvironment

Defined in: packages/charm/src/graphics/rendererInterface.ts:196

Returns

undefined | HDREnvironment

Set Signature

set environment(env): void

Defined in: packages/charm/src/graphics/rendererInterface.ts:193

Parameters

env

undefined | HDREnvironment

Returns

void

Inherited from

RendererInterface.environment

---

renderPipelineDescriptorCache

Get Signature

get renderPipelineDescriptorCache(): GPURenderPipelineDescriptor[]

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:381

Returns

GPURenderPipelineDescriptor[]

Methods

addFetchDepthPass()

addFetchDepthPass(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:550

Called manually during rendering while building the framegraph

Returns

void

---

clearCache()

clearCache(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:377

Returns

void

---

configureCanvas()

configureCanvas(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:400

Returns

void

Overrides

RendererInterface.configureCanvas

---

destroy()

destroy(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:387

Destroy all allocated resources

Returns

void

Overrides

RendererInterface.destroy

---

destroyGLTF()

destroyGLTF(url): void

Defined in: packages/charm/src/graphics/rendererInterface.ts:308

Frees from memory

Parameters

url

string

Returns

void

Inherited from

RendererInterface.destroyGLTF

---

getFramebufferSize()

getFramebufferSize(): vec2

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:618

Returns

vec2

Overrides

RendererInterface.getFramebufferSize

---

getPlaneMesh()

getPlaneMesh(): Mesh

Defined in: packages/charm/src/graphics/rendererInterface.ts:356

static mesh

Returns

Mesh

Inherited from

RendererInterface.getPlaneMesh

---

getSupportedViewModes()

getSupportedViewModes(): string[]

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:764

Returns

string[]

Overrides

RendererInterface.getSupportedViewModes

---

getTexture()

getTexture(name): undefined | Texture

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:624

Parameters

name

string

Returns

undefined | Texture

Overrides

RendererInterface.getTexture

---

internalDestroyGLTF()

internalDestroyGLTF(info): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:641

Parameters

info

GLTFInfo

Returns

void

Overrides

RendererInterface.internalDestroyGLTF

---

internalLoadGLTF()

internalLoadGLTF(url, gltf, options?): GLTFInfo

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:632

Parameters

url

string

gltf

GlTf

options?

GLTFLoadingOptions

Returns

GLTFInfo

Overrides

RendererInterface.internalLoadGLTF

---

loadGLTF()

loadGLTF(url, options?, force?): Promise<undefined | GLTFInfo>

Defined in: packages/charm/src/graphics/rendererInterface.ts:256

Loads a GLTF using a cache to avoid loading twice the same GLTF

Parameters

url

string

options?

GLTFLoadingOptions

force?

boolean

Returns

Promise<undefined | GLTFInfo>

Inherited from

RendererInterface.loadGLTF

---

loadGLTFFromBinary()

loadGLTFFromBinary(data, options?, url?): Promise<undefined | GLTFInfo>

Defined in: packages/charm/src/graphics/rendererInterface.ts:295

Loads a GLTF from a Binary array, in case it was dragged from hard drive

Parameters

data

ArrayBuffer

options?

GLTFLoadingOptions

url?

string = "none"

Returns

Promise<undefined | GLTFInfo>

Inherited from

RendererInterface.loadGLTFFromBinary

---

loadTexture()

loadTexture(url): WebGPUTexture

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:628

Parameters

url

string

Returns

WebGPUTexture

---

newMesh()

newMesh(): Mesh

Defined in: packages/charm/src/graphics/rendererInterface.ts:351

Returns

Mesh

Inherited from

RendererInterface.newMesh

---

pickDepths()

pickDepths(_pos): Promise<undefined | Float32Array<ArrayBufferLike>>

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:536

Parameters

_pos

vec2[]

Returns

Promise<undefined | Float32Array<ArrayBufferLike>>

Overrides

RendererInterface.pickDepths

---

pickScene()

pickScene(x, y, layers, pos?, clipPos?): Promise<undefined | Node>

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:515

Returns the node under a certain coordinate of the mouse. This function is async as it will be resolved in the next frame.

Parameters

x

number

y

number

layers

number = 0xff

pos?

vec3

clipPos?

vec3

Returns

Promise<undefined | Node>

Overrides

RendererInterface.pickScene

---

preloadTexture()

preloadTexture(url, name?): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:655

Parameters

url

string

name?

string

Returns

void

Overrides

RendererInterface.preloadTexture

---

readTexturePixel()

readTexturePixel(texture, x, y, encoder?): Promise<Uint8Array<ArrayBufferLike>>

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:659

Parameters

texture

GPUTexture

x

number

y

number

encoder?

GPUCommandEncoder

Returns

Promise<Uint8Array<ArrayBufferLike>>

---

render()

render(scene, camera, options?): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:430

Renders a scene from a point of view

Parameters

scene

Scene

camera

Camera

options?

SceneRenderOptions

Returns

void

Overrides

RendererInterface.render

---

resize()

resize(logical, device): void

Defined in: packages/charm/src/graphics/rendererInterface.ts:364

Parameters

logical

Size

device

Size

Returns

void

Inherited from

RendererInterface.resize

---

setEnvironment()

setEnvironment(environment?): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:416

Parameters

environment?

HDREnvironment

Returns

void

Overrides

RendererInterface.setEnvironment

---

showTexture()

showTexture(canvas, texture, gamma, flipY): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:700

Parameters

canvas

HTMLCanvasElement

texture

GPUTexture

gamma

boolean = true

flipY

boolean = false

Returns

void

Overrides

RendererInterface.showTexture

Events

renderAlpha

renderAlpha: ROSEvent<RenderEvent>

Defined in: packages/charm/src/graphics/rendererInterface.ts:215

Inherited from

RendererInterface.renderAlpha