@tmrw-realityos/charm

---

@tmrw-realityos/charm / FrameGraph

Class: FrameGraph

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

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): FrameGraph

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

Parameters

ctx

WebGPURenderContext

Returns

FrameGraph

Properties

backbuffer

backbuffer: TextureHandler

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

---

backbufferTexture?

optional backbufferTexture: GPUTexture

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

---

blitTextureFX

blitTextureFX: WebGPUBlitFX

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

---

compiled

compiled: boolean = false

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

---

copyTextureFX

copyTextureFX: WebGPUPostFX

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

---

currentPass?

optional currentPass: FrameGraphPass

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

---

device

device: GPUDevice

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

---

hasErrors

hasErrors: boolean = false

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

---

onFinishedCallbacks

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

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

Returns

void

---

passes

passes: FrameGraphPass[]

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

---

passesById

passesById: Map<string, FrameGraphPass>

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

---

previousPass?

optional previousPass: FrameGraphPass

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

---

renderContext

renderContext: WebGPURenderContext

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

---

resources

resources: ResourceHandler[]

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

---

resourcesById

resourcesById: Map<string, ResourceHandler>

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

---

resourcesPool

resourcesPool: Map<string, GPUTexture[]>

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

Methods

addComputePass()

addComputePass(name, passDesc, afterPass?): FrameGraphPass

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

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

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

Sends the last pass output to the backbuffer

Returns

FrameGraphPass

---

addReadPass()

addReadPass(name, passDesc, afterPass?): FrameGraphPass

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

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

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

Parameters

desc

TextureDescriptor

usage

number

Returns

GPUTexture

---

allocateTextureFromHandler()

allocateTextureFromHandler(handler): GPUTexture

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

Parameters

handler

TextureHandler

Returns

GPUTexture

---

clear()

clear(): void

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

clears the passes (keeps memory pool)

Returns

void

---

compile()

compile(): void

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

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

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

Parameters

canvas?

HTMLCanvasElement

Returns

HTMLCanvasElement

---

destroy()

destroy(): void

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

Returns

void

---

detectIrrelevantPasses()

detectIrrelevantPasses(): void

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

Returns

void

---

drawToCanvas2D()

drawToCanvas2D(canvas, skipResize): void

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

Parameters

canvas

HTMLCanvasElement

skipResize

boolean = false

Returns

void

---

execute()

execute(): void

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

Returns

void

---

fillPassOutputsDescriptor()

fillPassOutputsDescriptor(pass): void

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

Parameters

pass

FrameGraphPass

Returns

void

---

findNextPassForResource()

findNextPassForResource(pass, resIndex): undefined | FrameGraphPass

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

Parameters

pass

FrameGraphPass

resIndex

number

Returns

undefined | FrameGraphPass

---

freeMemory()

freeMemory(): void

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

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

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

Parameters

desc

TextureDescriptor

usage

number

Returns

string

---

getPass()

getPass(name): undefined | FrameGraphPass

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

Parameters

name

string

Returns

undefined | FrameGraphPass

---

getPassOutputTexture()

getPassOutputTexture(passName): undefined | GPUTexture

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

Parameters

passName

string

Returns

undefined | GPUTexture

---

getRenderPassDescriptor()

getRenderPassDescriptor(pass, resolveTexture?): GPURenderPassDescriptor

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

called from prepareRenderPasses

Parameters

pass

FrameGraphPass

resolveTexture?

GPUTexture

Returns

GPURenderPassDescriptor

---

getResource()

getResource(name): ResourceHandler

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

Parameters

name

string

Returns

ResourceHandler

---

getTexture()

getTexture(name): undefined | GPUTexture

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

Parameters

name

string

Returns

undefined | GPUTexture

---

insertPass()

insertPass(pass, afterPass?): void

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

Parameters

pass

FrameGraphPass

afterPass?

FrameGraphPass

Returns

void

---

lastPass()

lastPass(): FrameGraphPass

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

Returns

FrameGraphPass

---

markAsRelevant()

markAsRelevant(resource): void

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

checks

Parameters

resource

ResourceHandler

Returns

void

---

prepareRenderPasses()

prepareRenderPasses(passes): void

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

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

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

moves all resources to the resource pool

Returns

void

---

releaseTexture()

releaseTexture(texture, usage): void

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

Parameters

texture

GPUTexture

usage

number

Returns

void

---

setBackbuffer()

setBackbuffer(backbuffer): void

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

Parameters

backbuffer

GPUTexture

Returns

void

---

toBuffer()

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

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

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

Indicates this pass writes to an existing texture or buffer

Parameters

res

ResourceHandler

Returns

void