@tmrw-realityos/charm • Docs

---

@tmrw-realityos/charm / FrameGraph

Class: FrameGraph

Allows to solve the rendering pipeline complexity by taking care of render passes. It also assign the correct usage of every buffer based on the pipeline defined. Every step of the pipeline is defined as a FrameGraphPass stored in the FrameGraph.

Create a framegraph

You must pass the renderContext object from WebGPURenderer, and where to store the final image (usually the backbuffer).

var framegraph = new FrameGraph(this.renderContext, backbuffer);

Add a pass

Then to add a pass you must pass a setup and a execute callback:

framegraph.addRenderPass("opaque", {
    setup: (graph: FrameGraph) => {
     graph.createTexture("color",eTextureTarget.COLOR_ATTACHMENT);
     graph.createTexture("depth",{format: "depth24plus"},eTextureTarget.DEPTH_ATTACHMENT);
   },
   execute: (renderPass: GPURenderPassEncoder) => {
     this.renderOpaque(renderPass); //rendering call
   },
 })

Adding FX

Adding extra steps to apply postprocessing effects is easy if you use the WebGPUPostFX class:

this.tonemapper.addToGraph(framegraph, undefined, framegraph.backbuffer);

Compiling the graph

Once all the passes are added, you can compile the pass, this will trigger the execution of the setup method in every pass.

framegraph.compile();

Executing the graph

Now every frame we execute our graph, we need to update the backbuffer in case it changed. This will trigger the execution of the execute method in every pass.

this.framegraph.setBackbuffer(outputTexture);
this.framegraph.execute();

Constructors

new FrameGraph()

new FrameGraph(ctx, backbuffer): FrameGraph

Parameters

• ctx: WebGPURenderContext

• backbuffer: GPUTexture

Returns

FrameGraph

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:190

Properties

backbuffer

backbuffer: TextureHandler

Defined in

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

---

backbufferTexture

backbufferTexture: GPUTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:179

---

blitTextureFX

blitTextureFX: WebGPUBlitFX

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:186

---

compiled

compiled: boolean = false

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:182

---

copyTextureFX

copyTextureFX: WebGPUPostFX

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:185

---

currentPass?

optional currentPass: FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:178

---

device

device: GPUDevice

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:174

---

hasErrors

hasErrors: boolean = false

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:183

---

passes

passes: FrameGraphPass[]

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:176

---

passesById

passesById: Map<string, FrameGraphPass>

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:177

---

previousPass?

optional previousPass: FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:184

---

renderContext

renderContext: WebGPURenderContext

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:175

---

resources

resources: TextureHandler[]

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:181

---

resourcesPool

resourcesPool: Map<string, GPUTexture[]>

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:188

Methods

addCopyPass()

addCopyPass(name, passDesc): FrameGraphPass

Parameters

• name: string

• passDesc: FrameGraphPassDescriptor

Returns

FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:572

---

addFinalPass()

addFinalPass(): FrameGraphPass

Returns

FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:671

---

addRenderPass()

addRenderPass(name, passDesc): FrameGraphPass

Parameters

• name: string

• passDesc: FrameGraphPassDescriptor

Returns

FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:560

---

allocateTexture()

allocateTexture(desc, usage): GPUTexture

Parameters

• desc: TextureDescriptor

• usage: number

Returns

GPUTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:726

---

allocateTextureFromHandler()

allocateTextureFromHandler(handler): GPUTexture

Parameters

• handler: TextureHandler

Returns

GPUTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:683

---

clear()

clear(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:227

---

compile()

compile(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:241

---

createTexture()

createTexture(name, desc, target): TextureHandler

Parameters

• name: string

• desc: TextureDescriptor

• target: number

Returns

TextureHandler

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:585

---

debugCanvas()

debugCanvas(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:869

---

destroy()

destroy(): void

Returns

void

Defined in

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

---

drawToCanvas2D()

drawToCanvas2D(canvas): void

Parameters

• canvas: HTMLCanvasElement

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:784

---

execute()

execute(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:370

---

fillPassOutputsDescriptor()

fillPassOutputsDescriptor(pass): void

Parameters

• pass: FrameGraphPass

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:290

---

findNextPassForResource()

findNextPassForResource(pass, resIndex): undefined | FrameGraphPass

Parameters

• pass: FrameGraphPass

• resIndex: number

Returns

undefined | FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:359

---

freeMemory()

freeMemory(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:218

---

fromTexture()

fromTexture(name, texture): TextureHandler

Parameters

• name: string

• texture: GPUTexture

Returns

TextureHandler

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:622

---

generateHash()

generateHash(desc, usage): string

Parameters

• desc: TextureDescriptor

• usage: number

Returns

string

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:767

---

getPassOutputTexture()

getPassOutputTexture(passName): undefined | GPUTexture

Parameters

• passName: string

Returns

undefined | GPUTexture

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:777

---

getRenderPassDescriptor()

getRenderPassDescriptor(pass, resolveTexture?): GPURenderPassDescriptor

Parameters

• pass: FrameGraphPass

• resolveTexture?: GPUTexture

Returns

GPURenderPassDescriptor

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:460

---

lastPass()

lastPass(): FrameGraphPass

Returns

FrameGraphPass

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:555

---

prepareRenderPasses()

prepareRenderPasses(passes): void

Parameters

• passes: FrameGraphPass[]

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:325

---

read()

read(res): void

Parameters

• res: TextureHandler

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:636

---

releaseTexture()

releaseTexture(texture, usage): void

Parameters

• texture: GPUTexture

• usage: number

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:754

---

setBackbuffer()

setBackbuffer(backbuffer): void

Parameters

• backbuffer: GPUTexture

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:202

---

write()

write(res): void

Parameters

• res: TextureHandler

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:648