@tmrw-realityos/charm

---

@tmrw-realityos/charm / WebGPURenderer

Class: WebGPURenderer

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

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

Constructor

new WebGPURenderer(device, canvas): WebGPURenderer

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

Parameters

device

GPUDevice

canvas

HTMLCanvasElement

Returns

WebGPURenderer

Overrides

RendererInterface.constructor

Properties

_environment?

protected optional _environment: HDREnvironment

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

Inherited from

RendererInterface._environment

---

accelerationStructure

protected accelerationStructure: AccelerationStructure

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

Inherited from

RendererInterface.accelerationStructure

---

accelerationStructureMustRebuild

protected accelerationStructureMustRebuild: boolean = false

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

Inherited from

RendererInterface.accelerationStructureMustRebuild

---

alwaysRerender

alwaysRerender: boolean = false

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

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

Overrides

RendererInterface.backend

---

basePath

basePath: string = ""

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

Inherited from

RendererInterface.basePath

---

bufferMapped

bufferMapped: boolean = false

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

---

canvas?

optional canvas: HTMLCanvasElement

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

Inherited from

RendererInterface.canvas

---

commandEncoder?

optional commandEncoder: GPUCommandEncoder

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

---

currentScene?

optional currentScene: Scene

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

---

depthReadBuffer?

optional depthReadBuffer: GPUBuffer

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

---

depthStagingBuffer?

optional depthStagingBuffer: GPUBuffer

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

---

device

device: GPUDevice

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

---

draw

draw: WebGPUImmediateDraw

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

Overrides

RendererInterface.draw

---

drawDebugInfo

drawDebugInfo: boolean = false

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

Inherited from

RendererInterface.drawDebugInfo

---

framegraph

framegraph: FrameGraph

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

---

gltfToNodes?

optional gltfToNodes: WebGPUGltfToNodes

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

---

loadedGLTFs

loadedGLTFs: Map<string, GLTFInfo>

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

Inherited from

RendererInterface.loadedGLTFs

---

loadingGLTFs

loadingGLTFs: Map<string, LoadedGLTFCallback[]>

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

Inherited from

RendererInterface.loadingGLTFs

---

materialBindGroupCache

materialBindGroupCache: Map<number, GPUBindGroup>

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

---

materials

materials: Map<string, Material>

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

Inherited from

RendererInterface.materials

---

onRenderGizmos()?

optional onRenderGizmos: (renderer) => void

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

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

Parameters

view

GPUTexture

depth

GPUTexture

encoder

GPUCommandEncoder

Returns

void

---

onRenderUI()?

optional onRenderUI: (renderer) => void

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

Parameters

renderer

RendererInterface

Returns

void

Inherited from

RendererInterface.onRenderUI

---

outliner

outliner: WebGPUMeshOutliner

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

---

PBRPipeline

PBRPipeline: WebGPUPBRPipeline

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

---

picker?

optional picker: WebGPUMeshPicker

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

---

plane?

optional plane: Mesh

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

Inherited from

RendererInterface.plane

---

planeXY?

optional planeXY: Mesh

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

Inherited from

RendererInterface.planeXY

---

renderables

renderables: Renderable[] = []

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

---

renderContext

renderContext: WebGPURenderContext

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

---

renderOptions

renderOptions: SceneRenderOptions

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

Inherited from

RendererInterface.renderOptions

---

renderUI

renderUI: ROSEvent<RenderEvent>

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

Inherited from

RendererInterface.renderUI

---

sceneToRenderEngine

sceneToRenderEngine: WebGPUSceneToRenderEngine

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

---

secondaryCanvas

secondaryCanvas: ISecondaryCanvas[] = []

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

---

stagingBuffer?

optional stagingBuffer: GPUBuffer

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

---

stagingBufferOffset

stagingBufferOffset: number = 0

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

---

stagingShader?

optional stagingShader: TextureToBufferShader

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

---

tinyGltf?

optional tinyGltf: TinyGltf

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

Inherited from

RendererInterface.tinyGltf

---

transparent

transparent: boolean = false

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

Inherited from

RendererInterface.transparent

---

waitingDepth?

optional waitingDepth: IWaitingDepth

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

---

instance?

static optional instance: RendererInterface

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

Inherited from

RendererInterface.instance

Accessors

canvasFormat

Get Signature

get canvasFormat(): GPUTextureFormat

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

Returns

GPUTextureFormat

---

canvasViewFormat

Get Signature

get canvasViewFormat(): GPUTextureFormat

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

Returns

GPUTextureFormat

---

environment

Get Signature

get environment(): undefined | HDREnvironment

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

Returns

undefined | HDREnvironment

Set Signature

set environment(env): void

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

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

Returns

GPURenderPipelineDescriptor[]

Methods

addFetchDepthPass()

addFetchDepthPass(): void

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

Called manually during rendering while building the framegraph

Returns

void

---

clearCache()

clearCache(): void

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

Returns

void

---

configureCanvas()

configureCanvas(): void

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

Returns

void

Overrides

RendererInterface.configureCanvas

---

destroy()

destroy(): void

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

Destroy all allocated resources

Returns

void

Overrides

RendererInterface.destroy

---

destroyGLTF()

destroyGLTF(url): void

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

Frees from memory

Parameters

url

string

Returns

void

Inherited from

RendererInterface.destroyGLTF

---

getDebugInfo()

getDebugInfo(): DebugInfo

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

Returns

DebugInfo

Overrides

RendererInterface.getDebugInfo

---

getFramebufferSize()

getFramebufferSize(): vec2

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

Returns

vec2

Overrides

RendererInterface.getFramebufferSize

---

getName()

getName(): string

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

Returns

string

Overrides

RendererInterface.getName

---

getPlaneMesh()

getPlaneMesh(): Mesh

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

static mesh

Returns

Mesh

Inherited from

RendererInterface.getPlaneMesh

---

getSupportedViewModes()

getSupportedViewModes(): string[]

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

Returns

string[]

Overrides

RendererInterface.getSupportedViewModes

---

getTexture()

getTexture(name): undefined | Texture

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

Parameters

name

string

Returns

undefined | Texture

Overrides

RendererInterface.getTexture

---

internalDestroyGLTF()

internalDestroyGLTF(info): void

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

Parameters

info

GLTFInfo

Returns

void

Overrides

RendererInterface.internalDestroyGLTF

---

internalLoadGLTF()

internalLoadGLTF(url, gltf, options?): GLTFInfo

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

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

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

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

Parameters

url

string

Returns

WebGPUTexture

---

newMesh()

newMesh(): Mesh

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

Returns

Mesh

Inherited from

RendererInterface.newMesh

---

pickDepths()

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

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

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

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

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

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

Renders a scene from a point of view

Parameters

scene

Scene

camera

Camera

options?

SceneRenderOptions

Returns

void

Overrides

RendererInterface.render

---

renderDebugInfo()

renderDebugInfo(): void

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

Returns

void

---

resize()

resize(logical, device): void

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

Parameters

logical

Size

device

Size

Returns

void

Inherited from

RendererInterface.resize

---

setEnvironment()

setEnvironment(environment?): void

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

Parameters

environment?

HDREnvironment

Returns

void

Overrides

RendererInterface.setEnvironment

---

showTexture()

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

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

Parameters

canvas

HTMLCanvasElement

texture

GPUTexture

gamma

boolean = true

flipY

boolean = false

Returns

void

Overrides

RendererInterface.showTexture

---

unloadGLTF()

unloadGLTF(url): void

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

Destroys one GLTF from memory

Parameters

url

string

Returns

void

Inherited from

RendererInterface.unloadGLTF

Events

renderAlpha

renderAlpha: ROSEvent<RenderEvent>

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

Inherited from

RendererInterface.renderAlpha