RealityOS Docs and Examples

Appearance

@tmrw-realityos/charm

@tmrw-realityos/charm / WebGPUPostFX

Class: WebGPUPostFX ​

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:53

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 ​

Constructor ​

new WebGPUPostFX(renderContext): WebGPUPostFX

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

Parameters ​

renderContext ​

WebGPURenderContext

Returns ​

WebGPUPostFX

Properties ​

additive ​

additive: boolean = false

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:64

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

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

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

shader? ​

protected optional shader: WebGPUShader

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

shader_multisample? ​

protected optional shader_multisample: WebGPUShader

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

Methods ​

addToGraph() ​

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

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:171

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? ​

(graph, pass?) => void

execute? ​

(input) => void

data? ​

unknown

Returns ​

FrameGraphPass

allocateData() ​

allocateData(size, values?): void

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

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

applyFX() ​

applyFX(encoder, input, output): void

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

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

Parameters ​

encoder ​

GPUCommandEncoder

input ​

GPUTexture

output ​

GPUTexture

Returns ​

void

destroy() ​

destroy(): void

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

Returns ​

void

executeFX() ​

executeFX(renderPass, input, output): void

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

Executes render call assuming render pass is already set *

Parameters ​

renderPass ​

GPURenderPassEncoder

input ​

GPUTexture

output ​

GPUTexture

Returns ​

void

getDataArray() ​

getDataArray(_input?, _output?): TypedArray

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

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

Parameters ​

_input? ​

GPUTexture

_output? ​

GPUTextureFormat

Returns ​

TypedArray

getFragmentCode() ​

getFragmentCode(_use_multisample): string

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:261

Parameters ​

_use_multisample ​

boolean = false

Returns ​

string

getFXCode() ​

getFXCode(): string

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:307

Overwrite this 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

getPipeline() ​

getPipeline(shader, format): GPURenderPipeline

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

Parameters ​

shader ​

WebGPUShader

format ​

GPUTextureFormat

Returns ​

GPURenderPipeline

getRenderPassDescriptor() ​

getRenderPassDescriptor(output): GPURenderPassDescriptor

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

Parameters ​

output ​

GPUTexture

Returns ​

GPURenderPassDescriptor

getUniformsCode() ​

getUniformsCode(): string

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:295

Overwrite this method if you want to define your own uniforms data structure. By default it contains a vec4 field called data. To read this values use: UNIFORMS.sunColor

typescript
getUniformsCode(): string {
 return "sunColor: vec4f, skyColor: vec4f,"
}

Returns ​

string

getVertexCode() ​

getVertexCode(): string

Defined in: packages/charm/src/graphics/WebGPU/WebGPUPostFX.ts:256

Returns ​

string

resize() ​

resize(width, height): void

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

Parameters ​

width ​

number

height ​

number

Returns ​

void