@tmrw-realityos/charm / Exports / 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();

Table of contents

Constructors

• constructor

Properties

• backbuffer
• backbufferTexture
• blitTextureFX
• compiled
• copyTextureFX
• currentPass
• device
• hasErrors
• passes
• passesById
• previousPass
• renderContext
• resources
• resourcesPool

Methods

• addCopyPass
• addFinalPass
• addRenderPass
• allocateTexture
• allocateTextureFromHandler
• clear
• compile
• createTexture
• debugCanvas
• destroy
• drawToCanvas2D
• execute
• fillPassOutputsDescriptor
• findNextPassForResource
• freeMemory
• fromTexture
• generateHash
• getRenderPassDescriptor
• lastPass
• prepareRenderPasses
• read
• releaseTexture
• setBackbuffer
• write

Constructors

constructor

• new FrameGraph(ctx, backbuffer): FrameGraph

Parameters

Name	Type
ctx	WebGPURenderContext
backbuffer	GPUTexture

Returns

FrameGraph

Defined in

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

Properties

backbuffer

• backbuffer: TextureHandler

Defined in

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

---

backbufferTexture

• backbufferTexture: GPUTexture

Defined in

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

---

blitTextureFX

• blitTextureFX: WebGPUBlitFX

Defined in

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

---

compiled

• compiled: boolean = false

Defined in

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

---

copyTextureFX

• copyTextureFX: WebGPUPostFX

Defined in

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

---

currentPass

• Optional currentPass: FrameGraphPass

Defined in

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

---

device

• device: GPUDevice

Defined in

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

---

hasErrors

• hasErrors: boolean = false

Defined in

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

---

passes

• passes: FrameGraphPass[]

Defined in

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

---

passesById

• passesById: Map<string, FrameGraphPass>

Defined in

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

---

previousPass

• Optional previousPass: FrameGraphPass

Defined in

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

---

renderContext

• renderContext: WebGPURenderContext

Defined in

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

---

resources

• resources: TextureHandler[]

Defined in

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

---

resourcesPool

• resourcesPool: Map<string, GPUTexture[]>

Defined in

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

Methods

addCopyPass

▸ addCopyPass(name, passDesc): FrameGraphPass

Parameters

Name	Type
name	string
passDesc	FrameGraphPassDescriptor

Returns

FrameGraphPass

Defined in

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

---

addFinalPass

▸ addFinalPass(): FrameGraphPass

Returns

FrameGraphPass

Defined in

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

---

addRenderPass

▸ addRenderPass(name, passDesc): FrameGraphPass

Parameters

Name	Type
name	string
passDesc	FrameGraphPassDescriptor

Returns

FrameGraphPass

Defined in

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

---

allocateTexture

▸ allocateTexture(desc, usage): GPUTexture

Parameters

Name	Type
desc	TextureDescriptor
usage	number

Returns

GPUTexture

Defined in

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

---

allocateTextureFromHandler

▸ allocateTextureFromHandler(handler): GPUTexture

Parameters

Name	Type
handler	TextureHandler

Returns

GPUTexture

Defined in

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

---

clear

▸ clear(): void

Returns

void

Defined in

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

---

compile

▸ compile(): void

Returns

void

Defined in

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

---

createTexture

▸ createTexture(name, desc, target): TextureHandler

Parameters

Name	Type
name	string
desc	TextureDescriptor
target	number

Returns

TextureHandler

Defined in

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

---

debugCanvas

▸ debugCanvas(): void

Returns

void

Defined in

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

---

destroy

▸ destroy(): void

Returns

void

Defined in

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

---

drawToCanvas2D

▸ drawToCanvas2D(canvas): void

Parameters

Name	Type
canvas	HTMLCanvasElement

Returns

void

Defined in

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

---

execute

▸ execute(): void

Returns

void

Defined in

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

---

fillPassOutputsDescriptor

▸ fillPassOutputsDescriptor(pass): void

Parameters

Name	Type
pass	FrameGraphPass

Returns

void

Defined in

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

---

findNextPassForResource

▸ findNextPassForResource(pass, resIndex): undefined | FrameGraphPass

Parameters

Name	Type
pass	FrameGraphPass
resIndex	number

Returns

undefined | FrameGraphPass

Defined in

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

---

freeMemory

▸ freeMemory(): void

Returns

void

Defined in

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

---

fromTexture

▸ fromTexture(name, texture): TextureHandler

Parameters

Name	Type
name	string
texture	GPUTexture

Returns

TextureHandler

Defined in

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

---

generateHash

▸ generateHash(desc, usage): string

Parameters

Name	Type
desc	TextureDescriptor
usage	number

Returns

string

Defined in

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

---

getRenderPassDescriptor

▸ getRenderPassDescriptor(pass, resolveTexture?): GPURenderPassDescriptor

Parameters

Name	Type
pass	FrameGraphPass
resolveTexture?	GPUTexture

Returns

GPURenderPassDescriptor

Defined in

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

---

lastPass

▸ lastPass(): FrameGraphPass

Returns

FrameGraphPass

Defined in

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

---

prepareRenderPasses

▸ prepareRenderPasses(passes): void

Parameters

Name	Type
passes	FrameGraphPass[]

Returns

void

Defined in

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

---

read

▸ read(res): void

Parameters

Name	Type
res	TextureHandler

Returns

void

Defined in

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

---

releaseTexture

▸ releaseTexture(texture, usage): void

Parameters

Name	Type
texture	GPUTexture
usage	number

Returns

void

Defined in

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

---

setBackbuffer

▸ setBackbuffer(backbuffer): void

Parameters

Name	Type
backbuffer	GPUTexture

Returns

void

Defined in

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

---

write

▸ write(res): void

Parameters

Name	Type
res	TextureHandler

Returns

void

Defined in

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