@tmrw-realityos/charm

---

@tmrw-realityos/charm / FrameGraph

Class: FrameGraph

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:220

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

Constructor

new FrameGraph(ctx): FrameGraph

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:240

Parameters

ctx

WebGPURenderContext

Returns

FrameGraph

Properties

backbuffer

backbuffer: TextureHandler

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

---

backbufferTexture?

optional backbufferTexture: GPUTexture

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

---

blitTextureFX

blitTextureFX: WebGPUBlitFX

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:234

---

compiled

compiled: boolean = false

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:230

---

copyTextureFX

copyTextureFX: WebGPUPostFX

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:233

---

currentPass?

optional currentPass: FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:225

---

device

device: GPUDevice

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:221

---

hasErrors

hasErrors: boolean = false

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

---

onFinishedCallbacks

onFinishedCallbacks: () => void[] = []

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:238

Returns

void

---

passes

passes: FrameGraphPass[]

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:223

---

passesById

passesById: Map<string, FrameGraphPass>

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:224

---

previousPass?

optional previousPass: FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:232

---

renderContext

renderContext: WebGPURenderContext

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:222

---

resources

resources: ResourceHandler[]

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:228

---

resourcesById

resourcesById: Map<string, ResourceHandler>

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:229

---

resourcesPool

resourcesPool: Map<string, GPUTexture[]>

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:236

Methods

addComputePass()

addComputePass(name, passDesc, afterPass?): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:885

Adds pass with a compute shader that takes some input (buffer or texture) and outputs a buffer

Parameters

name

string

passDesc

FrameGraphPassDescriptor

afterPass?

FrameGraphPass

Returns

FrameGraphPass

---

addCopyPass()

addCopyPass(name, passDesc, afterPass?): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:902

Copies the content of one resource to another (could be texture to texture or buffer to buffer)

Parameters

name

string

passDesc

FrameGraphPassDescriptor

afterPass?

FrameGraphPass

Returns

FrameGraphPass

---

addFinalPass()

addFinalPass(): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1114

Sends the last pass output to the backbuffer

Returns

FrameGraphPass

---

addFX()

addFX(postfx, prevPass?, output?, setup?, execute?, data?): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1065

Creates a FrameGraphPass that applies this postFX to the previous pass output. You can redefine the setup method if you want more control over the input / output elements. You can pass an execute callback that will be called before the execute method (useful to setup data).

Parameters

postfx

WebGPUPostFX

prevPass?

FrameGraphPass

output?

TextureHandler

setup?

(graph, pass?) => void

execute?

(input) => void

data?

unknown

Returns

FrameGraphPass

---

addReadPass()

addReadPass(name, passDesc, afterPass?): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:915

Reads back the content of a texture into a buffer

Parameters

name

string

passDesc

FrameGraphPassDescriptor

afterPass?

FrameGraphPass

Returns

FrameGraphPass

---

addRenderPass()

addRenderPass(name, passDesc, afterPass?): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:872

Renders something inside a texture

Parameters

name

string

passDesc

FrameGraphPassDescriptor

afterPass?

FrameGraphPass

Returns

FrameGraphPass

---

allocateTexture()

allocateTexture(desc, usage): GPUTexture

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1136

Parameters

desc

TextureDescriptor

usage

number

Returns

GPUTexture

---

allocateTextureFromHandler()

allocateTextureFromHandler(handler): GPUTexture

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1126

Parameters

handler

TextureHandler

Returns

GPUTexture

---

clear()

clear(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:308

clears the passes (keeps memory pool)

Returns

void

---

compile()

compile(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:324

frees all resources and reallocates them based on connectivity

Returns

void

---

createTexture()

createTexture(name, desc, target): TextureHandler

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:951

Indicates that the output of this pass is a texture that must be created

Parameters

name

string

desc

TextureDescriptor

target

number

Returns

TextureHandler

---

debugCanvas()

debugCanvas(canvas?): HTMLCanvasElement

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1407

Parameters

canvas?

HTMLCanvasElement

Returns

HTMLCanvasElement

---

destroy()

destroy(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:318

Returns

void

---

detectIrrelevantPasses()

detectIrrelevantPasses(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:395

Returns

void

---

drawToCanvas2D()

drawToCanvas2D(canvas, mousePos?, skipResize?): null | FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1229

Parameters

canvas

HTMLCanvasElement

mousePos?

[number, number]

skipResize?

boolean = false

Returns

null | FrameGraphPass

---

execute()

execute(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:527

Returns

void

---

fillPassOutputsDescriptor()

fillPassOutputsDescriptor(pass): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:423

Parameters

pass

FrameGraphPass

Returns

void

---

findNextPassForResource()

findNextPassForResource(pass, resIndex): undefined | FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:516

Parameters

pass

FrameGraphPass

resIndex

number

Returns

undefined | FrameGraphPass

---

freeMemory()

freeMemory(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:284

Frees all memory allocated by the framegraph, including pools

Returns

void

---

fromTexture()

fromTexture(name, texture?): TextureHandler

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1000

Creates a texture handler from a texture

Parameters

name

string

texture?

GPUTexture

Returns

TextureHandler

---

generateHash()

generateHash(desc, usage): string

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1194

Parameters

desc

TextureDescriptor

usage

number

Returns

string

---

getPass()

getPass(name): undefined | FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1205

Parameters

name

string

Returns

undefined | FrameGraphPass

---

getPassOutputTexture()

getPassOutputTexture(passName): undefined | GPUTexture

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1222

Parameters

passName

string

Returns

undefined | GPUTexture

---

getRenderPassDescriptor()

getRenderPassDescriptor(pass, resolveTexture?): GPURenderPassDescriptor

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:731

called from prepareRenderPasses

Parameters

pass

FrameGraphPass

resolveTexture?

GPUTexture

Returns

GPURenderPassDescriptor

---

getResource()

getResource(name): ResourceHandler

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1209

Parameters

name

string

Returns

ResourceHandler

---

getTexture()

getTexture(name): undefined | GPUTexture

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1215

Parameters

name

string

Returns

undefined | GPUTexture

---

insertPass()

insertPass(pass, afterPass?): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:857

Parameters

pass

FrameGraphPass

afterPass?

FrameGraphPass

Returns

void

---

lastPass()

lastPass(): FrameGraphPass

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:852

Returns

FrameGraphPass

---

markAsRelevant()

markAsRelevant(resource): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:410

checks

Parameters

resource

ResourceHandler

Returns

void

---

prepareRenderPasses()

prepareRenderPasses(passes): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:467

Creates textures and renderpasses for every framegraph pass

Parameters

passes

FrameGraphPass[]

Returns

void

---

read()

read(res): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1015

Indicates this pass reads from an existing texture

Parameters

res

ResourceHandler

Returns

void

---

releaseAllTextures()

releaseAllTextures(): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:272

moves all resources to the resource pool

Returns

void

---

releaseTexture()

releaseTexture(texture, usage): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1180

Parameters

texture

GPUTexture

usage

number

Returns

void

---

setBackbuffer()

setBackbuffer(backbuffer): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:252

Parameters

backbuffer

GPUTexture

Returns

void

---

toBuffer()

toBuffer(name, buffer, area?, layer?): BufferHandler

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:928

Creates a resource from an existing buffer (and assigns it as output)

Parameters

name

string

buffer

GPUBuffer

area?

vec4

layer?

number = 0

Returns

BufferHandler

---

write()

write(res): void

Defined in: packages/charm/src/graphics/WebGPU/WebGPUFrameGraph.ts:1028

Indicates this pass writes to an existing texture or buffer

Parameters

res

ResourceHandler

Returns

void