RealityOS Docs and Examples

Appearance

@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).

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

Add a pass ​

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

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

typescript
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.

typescript
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.

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

Constructors ​

Constructor ​

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