RealityOS Docs and Examples

Appearance

@tmrw-realityos/charm

@tmrw-realityos/charm / WebGPUPostFX

Class: WebGPUPostFX ​

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

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

Parameters ​

renderContext ​

WebGPURenderContext

Returns ​

WebGPUPostFX

Properties ​

additive ​

additive: boolean = false

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

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

device ​

protected device: GPUDevice

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

name ​

name: string = "postfx"

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

pipelines ​

protected pipelines: Map<string, GPURenderPipeline>

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

renderContext ​

protected renderContext: WebGPURenderContext

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

requiresMultiplePasses ​

requiresMultiplePasses: boolean = false

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

shaders ​

protected shaders: Map<string, WebGPUShader>

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

Methods ​

allocateData() ​

allocateData(size, values?): void

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

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

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

Returns ​

void

executeFX() ​

executeFX(renderPass, input, output): void

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

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

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

Parameters ​

_input? ​

GPUTexture

_output? ​

GPUTextureFormat

Returns ​

TypedArray

getFragmentCode() ​

getFragmentCode(_tex): string

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

Parameters ​

_tex ​

GPUTexture

Returns ​

string

getFXCode() ​

getFXCode(): string

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

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

getHash() ​

getHash(input): string

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

Used in case this postfx can use different shaders depending on the input and its internal state

Parameters ​

input ​

GPUTexture

Returns ​

string

getPipeline() ​

getPipeline(shader, format): GPURenderPipeline

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

Parameters ​

shader ​

WebGPUShader

format ​

GPUTextureFormat

Returns ​

GPURenderPipeline

getRenderPassDescriptor() ​

getRenderPassDescriptor(output): GPURenderPassDescriptor

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

Parameters ​

output ​

GPUTexture

Returns ​

GPURenderPassDescriptor

getUniformsCode() ​

getUniformsCode(): string

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

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(_tex): string

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

Parameters ​

_tex ​

GPUTexture

Returns ​

string

resize() ​

resize(width, height): void

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

Parameters ​

width ​

number

height ​

number

Returns ​

void