@tmrw-realityos/charm • Docs

---

@tmrw-realityos/charm / WebGPURenderer

Class: WebGPURenderer

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 new TinyGLTF().loadFromUrl('assets/scene.gltf')
 const scene = new Scene()
 const gltfToNodes = new WebGPUGltfToNodes()
 gltfToNodes.parseGLTF(device, model, scene.root, [])
 renderer.render(scene, camera)

See

My First Triangle

Extends

• RendererInterface

Constructors

new WebGPURenderer()

new WebGPURenderer(device, canvas): WebGPURenderer

Parameters

• device: GPUDevice

• canvas: HTMLCanvasElement

Returns

WebGPURenderer

Overrides

RendererInterface.constructor

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:111

Properties

alphaMode

alphaMode: GPUCanvasAlphaMode = "opaque"

To control the transparency of the canvas. Valid values are "opaque" and "premultiply".

Defined in

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

---

alwaysRerender

alwaysRerender: boolean = false

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

Defined in

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

---

basePath

basePath: string = ""

Inherited from

RendererInterface.basePath

Defined in

packages/charm/src/graphics/rendererInterface.ts:49

---

bloom

bloom: number = 0.5

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:66

---

canvas

readonly canvas: HTMLCanvasElement

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:57

---

commandEncoder?

optional commandEncoder: GPUCommandEncoder

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:73

---

device

device: GPUDevice

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:55

---

draw

draw: WebGPUImmediateDraw

Overrides

RendererInterface.draw

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:62

---

exposure_

exposure_: number = 1

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:65

---

gltfToNodes?

optional gltfToNodes: WebGPUGltfToNodes

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:71

---

loadedGLTFs

loadedGLTFs: Map<string, GLTFInfo>

Inherited from

RendererInterface.loadedGLTFs

Defined in

packages/charm/src/graphics/rendererInterface.ts:56

---

loadingGLTFs

loadingGLTFs: Map<string, LoadedGLTFCallback[]>

Inherited from

RendererInterface.loadingGLTFs

Defined in

packages/charm/src/graphics/rendererInterface.ts:57

---

materialBindGroupCache

materialBindGroupCache: Map<number, GPUBindGroup>

Defined in

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

---

onRenderGizmos()?

optional onRenderGizmos: (renderer) => void

Parameters

• renderer: WebGPURenderer

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:109

---

onRenderInFinalBuffer()?

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

Parameters

• view: GPUTexture

• depth: GPUTexture

• encoder: GPUCommandEncoder

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:75

---

PBRPipeline

PBRPipeline: WebGPUPBRPipeline

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:61

---

plane?

optional plane: Mesh

Inherited from

RendererInterface.plane

Defined in

packages/charm/src/graphics/rendererInterface.ts:50

---

planeXY?

optional planeXY: Mesh

Inherited from

RendererInterface.planeXY

Defined in

packages/charm/src/graphics/rendererInterface.ts:51

---

postfx

postfx: boolean = false

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:67

---

renderableDescriptors

renderableDescriptors: RenderableDescriptor[] = []

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:70

---

renderContext

renderContext: WebGPURenderContext

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:56

---

sampleCount_

sampleCount_: number = 4

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:64

---

sceneToRenderables

sceneToRenderables: WebGPUSceneToRenderables

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:69

---

secondaryCanvas

secondaryCanvas: ISecondaryCanvas[] = []

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:59

---

tinyGltf?

optional tinyGltf: TinyGltf

Inherited from

RendererInterface.tinyGltf

Defined in

packages/charm/src/graphics/rendererInterface.ts:55

Accessors

canvasFormat

get canvasFormat(): GPUTextureFormat

Returns

GPUTextureFormat

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:145

---

canvasViewFormat

get canvasViewFormat(): GPUTextureFormat

Returns

GPUTextureFormat

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:149

---

clearColor

get clearColor(): [number, number, number, number]

set clearColor(color): void

Parameters

• color: [number, number, number, number]

Returns

[number, number, number, number]

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:244

---

environment

get environment(): undefined | HDREnvironment

set environment(environment): void

Parameters

• environment: undefined | HDREnvironment

Returns

undefined | HDREnvironment

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:253

---

exposure

get exposure(): number

set exposure(v): void

Parameters

• v: number

Returns

number

Defined in

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

---

renderPipelineDescriptorCache

get renderPipelineDescriptorCache(): GPURenderPipelineDescriptor[]

Returns

GPURenderPipelineDescriptor[]

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:165

---

sampleCount

get sampleCount(): number

set sampleCount(v): void

Parameters

• v: number

Returns

number

Defined in

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

Methods

clearCache()

clearCache(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:161

---

configureCanvas()

configureCanvas(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:205

---

createTexture()

createTexture(name, data, generateMipmaps): WebGPUTexture

Parameters

• name: string

• data: undefined | TextureContent

• generateMipmaps: boolean = true

Returns

WebGPUTexture

Overrides

RendererInterface.createTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:353

---

createTextureFromKTX()

createTextureFromKTX(name, data, callback): WebGPUTexture

Parameters

• name: string

• data: ArrayBuffer

• callback

Returns

WebGPUTexture

Overrides

RendererInterface.createTextureFromKTX

Defined in

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

---

destroy()

destroy(): void

Destroy all allocated resources

Returns

void

Overrides

RendererInterface.destroy

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:171

---

getPlaneMesh()

getPlaneMesh(): Mesh

static mesh

Returns

Mesh

Inherited from

RendererInterface.getPlaneMesh

Defined in

packages/charm/src/graphics/rendererInterface.ts:158

---

getTexture()

getTexture(name): undefined | Texture

Parameters

• name: string

Returns

undefined | Texture

Overrides

RendererInterface.getTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:332

---

internalLoadGLTF()

internalLoadGLTF(url, gltf, options?): GLTFInfo

Parameters

• url: string

• gltf: GlTf

• options?: GLTFLoadingOptions

Returns

GLTFInfo

Overrides

RendererInterface.internalLoadGLTF

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:340

---

loadGLTF()

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

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

Defined in

packages/charm/src/graphics/rendererInterface.ts:67

---

loadGLTFFromBinary()

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

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

Defined in

packages/charm/src/graphics/rendererInterface.ts:105

---

loadTexture()

loadTexture(url): WebGPUTexture

Parameters

• url: string

Returns

WebGPUTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:336

---

newMesh()

newMesh(): WebGPUMesh

Returns

WebGPUMesh

Overrides

RendererInterface.newMesh

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:328

---

preloadTexture()

preloadTexture(url, name?): void

Parameters

• url: string

• name?: string

Returns

void

Overrides

RendererInterface.preloadTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:349

---

render()

render(scene, camera, options): void

Renders a scene from a point of view

Parameters

• scene: Scene

• camera: Camera

• options: SceneRenderOptions = {}

Returns

void

Overrides

RendererInterface.render

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:275

---

resize()

resize(logical, device): void

Parameters

• logical: Size

• device: Size

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:153

---

setEnvironment()

setEnvironment(env): void

Parameters

• env: HDREnvironment

Returns

void

Overrides

RendererInterface.setEnvironment

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:271

---

showTexture()

showTexture(canvas, texture, gamma): void

Parameters

• canvas: HTMLCanvasElement

• texture: GPUTexture

• gamma: boolean = true

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:417

---

updateTexture()

updateTexture(name, data): void

Parameters

• name: string

• data: TextureContent

Returns

void

Overrides

RendererInterface.updateTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:393

---

updateTextureFromKTX()

updateTextureFromKTX(name, data, callback): void

Parameters

• name: string

• data: ArrayBuffer

• callback

Returns

void

Overrides

RendererInterface.updateTextureFromKTX

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderer.ts:408

Events

renderAlpha

renderAlpha: ROSEvent<RenderEvent>

Defined in

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