Skip to content

@tmrw-realityos/charm / Exports / WebGPURenderer

Class: WebGPURenderer

Renders a mesh to a canvas using WebGPU

@example:

typescript
 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

Table of contents

Constructors

Properties

Accessors

Methods

Events

Constructors

constructor

new WebGPURenderer(device, canvas): WebGPURenderer

Parameters

NameType
deviceGPUDevice
canvasHTMLCanvasElement

Returns

WebGPURenderer

Defined in

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

Properties

PBRPipeline

PBRPipeline: WebGPUPBRPipeline

Defined in

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


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


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


bloom

bloom: number = 0.5

Defined in

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


canvas

Readonly canvas: HTMLCanvasElement

Defined in

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


commandEncoder

Optional commandEncoder: GPUCommandEncoder

Defined in

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


device

device: GPUDevice

The Camera used to render the view

Defined in

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


exposure_

exposure_: number = 1

Defined in

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


materialBindGroupCache

materialBindGroupCache: Map<number, GPUBindGroup>

Defined in

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


onRenderInFinalBuffer

Optional onRenderInFinalBuffer: (view: GPUTexture, depth: GPUTexture, encoder: GPUCommandEncoder) => void

Type declaration

▸ (view, depth, encoder): void

Parameters
NameType
viewGPUTexture
depthGPUTexture
encoderGPUCommandEncoder
Returns

void

Defined in

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


postfx

postfx: boolean = false

Defined in

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


renderContext

renderContext: WebGPURenderContext

Defined in

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


renderableDescriptors

renderableDescriptors: RenderableDescriptor[] = []

Defined in

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


sampleCount_

sampleCount_: number = 4

Defined in

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


sceneToRenderables

sceneToRenderables: WebGPUSceneToRenderables

Defined in

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

Accessors

canvasFormat

get canvasFormat(): GPUTextureFormat

Returns

GPUTextureFormat

Defined in

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


canvasViewFormat

get canvasViewFormat(): GPUTextureFormat

Returns

GPUTextureFormat

Defined in

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


clearColor

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

Returns

[number, number, number, number]

Defined in

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

set clearColor(color): void

Parameters

NameType
color[number, number, number, number]

Returns

void

Defined in

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


environment

get environment(): undefined | HDREnvironment

Returns

undefined | HDREnvironment

Defined in

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

set environment(environment): void

Parameters

NameType
environmentundefined | HDREnvironment

Returns

void

Defined in

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


exposure

get exposure(): number

Returns

number

Defined in

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

set exposure(v): void

Parameters

NameType
vnumber

Returns

void

Defined in

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


renderPipelineDescriptorCache

get renderPipelineDescriptorCache(): GPURenderPipelineDescriptor[]

Returns

GPURenderPipelineDescriptor[]

Defined in

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


sampleCount

get sampleCount(): number

Returns

number

Defined in

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

set sampleCount(v): void

Parameters

NameType
vnumber

Returns

void

Defined in

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

Methods

clearCache

clearCache(): void

Returns

void

Defined in

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


configureCanvas

configureCanvas(): void

Returns

void

Defined in

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


destroy

destroy(): void

Returns

void

Defined in

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


newMesh

newMesh(): WebGPUMesh

Returns

WebGPUMesh

Defined in

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


render

render(scene, camera): void

Parameters

NameType
sceneScene
cameraCamera

Returns

void

Defined in

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


resize

resize(logical, device): void

Parameters

NameType
logicalSize
deviceSize

Returns

void

Defined in

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

Events

renderAlpha

renderAlpha: ROSEvent<RenderEvent>

Defined in

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