RealityOS Docs and Examples

Appearance

@tmrw-realityos/charm • Docs

@tmrw-realityos/charm / 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:

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

typescript
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;
 }
 `;
}

Constructors ​

new WebGPUPostFX() ​

new WebGPUPostFX(renderContext): WebGPUPostFX

Parameters ​

• renderContext: WebGPURenderContext

Returns ​

WebGPUPostFX

Defined in ​

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

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

data ​

protected data: Float32Array

Defined in ​

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

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

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 ​

• graph: FrameGraph

• prevPass?: FrameGraphPass

• output?: TextureHandler

• setup?

• execute?

• data?: unknown

Returns ​

FrameGraphPass

Defined in ​

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

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.

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

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

Parameters ​

• size: number

• values?: number[]

Returns ​

void

Defined in ​

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

applyFX() ​

applyFX(encoder, input, output): void

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

Parameters ​

• encoder: GPUCommandEncoder

• input: GPUTexture

• output: GPUTexture

Returns ​

void

Defined in ​

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

destroy() ​

destroy(): void

Returns ​

void

Defined in ​

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

executeFX() ​

executeFX(renderPass, input, output): void

Executes render call assuming render pass is already set *

Parameters ​

• renderPass: GPURenderPassEncoder

• input: GPUTexture

• output: GPUTexture

Returns ​

void

Defined in ​

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

getDataArray() ​

getDataArray(_input?, _output?): TypedArray

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

Parameters ​

• _input?: GPUTexture

• _output?: GPUTextureFormat

Returns ​

TypedArray

Defined in ​

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

getFragmentCode() ​

getFragmentCode(): string

Returns ​

string

Defined in ​

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

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:

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

Returns ​

string

Defined in ​

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

getPipeline() ​

getPipeline(shader, format): GPURenderPipeline

Parameters ​

• shader: WebGPUShader

• format: GPUTextureFormat

Returns ​

GPURenderPipeline

Defined in ​

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

getRenderPassDescriptor() ​

getRenderPassDescriptor(output): GPURenderPassDescriptor

Parameters ​

• output: GPUTexture

Returns ​

GPURenderPassDescriptor

Defined in ​

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

getVertexCode() ​

getVertexCode(): string

Returns ​

string

Defined in ​

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

resize() ​

resize(width, height): void

Parameters ​

• width: number

• height: number

Returns ​

void

Defined in ​

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