@tmrw-realityos/charm / Exports / WebGPUPostFX

Class: WebGPUPostFX

The WebGPUPostFX allows to easily apply a shader to a texture. Simple inherit from it and/or overwrite the getFragmentCode method that returns the code.

You can also pass easily basic properties as uniforms.

For a simple FX that just reads a color and applies some processing to the pixel, you can even simplify it more using the getFXCode:

getFXCode(): string {
 return "color = vec4f(vec3f(1.0) - color.xyz,color.a);"
}

But if you want more control over the shader, then you can define the getFragmentCode method:

getFragmentCode(): string {
 return `
 struct VertexOutput {
   @builtin(position) position : vec4f,
   @location(0) uv : vec2f
 };
 struct genericData {
   data: vec4f
 };
 @group(0) @binding(0) var textureSampler: sampler;
 @group(0) @binding(1) var inputTexture: texture_2d<f32>;
 @group(1) @binding(0) var<uniform>  UNIFORMS : genericData;
 @fragment
 fn fs(in: VertexOutput) -> @location(0) vec4f {
   var color = textureSample(inputTexture, textureSampler, in.uv);
   // your code here...
   return color;
 }
 `;
}

Table of contents

Constructors

• constructor

Properties

• additive
• data
• device
• name
• pipelines
• renderContext
• shader

Methods

• addToGraph
• allocateData
• applyFX
• destroy
• executeFX
• getDataArray
• getFXCode
• getFragmentCode
• getPipeline
• getRenderPassDescriptor
• getTextureBindGroup
• getVertexCode
• resize

Constructors

constructor

• new WebGPUPostFX(renderContext): WebGPUPostFX

Parameters

Name	Type
renderContext	WebGPURenderContext

Returns

WebGPUPostFX

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:68

Properties

additive

• additive: boolean = false

if this FX should alpha blended with the content of the existing buffer (used in resample)

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:66

---

data

• Protected data: Float32Array

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:63

---

device

• Protected device: GPUDevice

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:56

---

name

• name: string = "postfx"

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:62

---

pipelines

• Protected pipelines: Map<string, GPURenderPipeline>

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:59

---

renderContext

• Protected renderContext: WebGPURenderContext

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:57

---

shader

• Protected Optional shader: WebGPUShader

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:58

Methods

addToGraph

▸ addToGraph(graph, prevPass?, output?, setup?, execute?, data?): FrameGraphPass

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

Name	Type
graph	FrameGraph
prevPass?	FrameGraphPass
output?	TextureHandler
setup?	(graph: FrameGraph, pass?: FrameGraphPass) => void
execute?	(input: GPUTexture) => void
data?	unknown

Returns

FrameGraphPass

Defined in

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

---

allocateData

▸ allocateData(size, values?): void

Calling this method will allocate a number of floats for shader parameters. You can pass as second parameter the default values. This parameter will be passed to the shader as the UNIFORMS global, remember to set up your struct inside.

 struct genericData {
       intensity: f32,
       gamma: f32
     };

@group(1) @binding(0) var<uniform> UNIFORMS : genericData;

Parameters

Name	Type
size	number
values?	number[]

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:92

---

applyFX

▸ applyFX(encoder, input, output): void

creates render pass and executes shader based on input/output textures

Parameters

Name	Type
encoder	GPUCommandEncoder
input	GPUTexture
output	GPUTexture

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:118

---

destroy

▸ destroy(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:103

---

executeFX

▸ executeFX(renderPass, input, output): void

Executes render call assuming render pass is already set *

Parameters

Name	Type
renderPass	GPURenderPassEncoder
input	GPUTexture
output	GPUTexture

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:130

---

getDataArray

▸ getDataArray(_input?, _output?): TypedArray

To fill the UNIFORM data array during execution time based on input/output properties

Parameters

Name	Type
_input?	GPUTexture
_output?	GPUTextureFormat

Returns

TypedArray

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:113

---

getFXCode

▸ getFXCode(): string

Overwrite your method if you want to create a very simple FX that applies a transformation over a given color. The code should be like this:

getFXCode(): string {
 return "color = vec4f(vec3f(1.0) - color.xyz,color.a);"
}

Returns

string

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:303

---

getFragmentCode

▸ getFragmentCode(): string

Returns

string

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:270

---

getPipeline

▸ getPipeline(shader, format): GPURenderPipeline

Parameters

Name	Type
shader	WebGPUShader
format	GPUTextureFormat

Returns

GPURenderPipeline

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:240

---

getRenderPassDescriptor

▸ getRenderPassDescriptor(output): GPURenderPassDescriptor

Parameters

Name	Type
output	GPUTexture

Returns

GPURenderPassDescriptor

Defined in

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

---

getTextureBindGroup

▸ getTextureBindGroup(input): GPUBindGroup

Parameters

Name	Type
input	GPUTexture

Returns

GPUBindGroup

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:223

---

getVertexCode

▸ getVertexCode(): string

Returns

string

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:266

---

resize

▸ resize(width, height): void

Parameters

Name	Type
width	number
height	number

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:97