Skip to content

ShaderPlugin

Generic shader plugin

ShaderPlugin is a specialization of a Plugin for ShaderRenderer. They apply complex computationally demanding post-processing effects to the input stream. For example, simple mono-chrome or sepia effects, or more complex face beatification and dynamic geometry filters. ShaderPlugin shares webgl context with the main renderer. Basic implementation uses ShaderProgram created for shaders provided to plugin’s constructor. Plugins are organized in chain within ShaderRenderer, input of the next shader is output of the previous and initial input is original video image, output of the last plugin is rendered.

Extends

Extended by

Type Parameters

ResultT extends object = object

Type of processing results

Constructors

new ShaderPlugin()

new ShaderPlugin<ResultT>(inputs?, uniforms?, fragSrc?, vertSrc?): ShaderPlugin<ResultT>

Constructor

Parameters

inputs?: string[]

Shader texture inputs (names of sampler uniforms)

uniforms?

Shader uniforms as name-type map object

fragSrc?: string

Code of fragment shader (copy shader by default)

vertSrc?: string

Vertex shader source (copy shader by default)

Returns

ShaderPlugin<ResultT>

Overrides

Plugin.constructor

Properties

fragSrc?

protected optional fragSrc: string

Code of fragment shader (copy shader by default)


inputs?

protected optional inputs: string[]

Shader texture inputs (names of sampler uniforms)


loaded

loaded: boolean = false

Loaded state

Inherited from

Plugin.loaded


ordinal

ordinal: number = PluginOrdinal.Render

Ordinal number

Inherited from

Plugin.ordinal


renderer?

protected optional renderer: Renderer<ResultT>

Renderer loaded the plugin

Inherited from

Plugin.renderer


shader?

protected optional shader: ShaderProgram

Rendering shader


shaderCtx?

protected optional shaderCtx: WebGL2RenderingContext

Rendering context


size

protected size: Size

Image size


uniforms?

protected optional uniforms: object

Shader uniforms as name-type map object

Index Signature

[key: string]: UniformType


vertSrc?

protected optional vertSrc: string

Vertex shader source (copy shader by default)

Methods

dispose()

dispose(): void

Dispose video plugin

Returns

void

Inherited from

Plugin.dispose


load()

load(renderer): Promise<void>

Initialize plugin

Initializes resources required for shader effect. Acquires webgl context of the main webgl renderer. Basic implementation creates and compiles rendering program for shaders provided to plugin’s constructor. Overridden by derived classes for particular effect.

Parameters

renderer: Renderer<ResultT>

Renderer this plugin is attached to

Returns

Promise<void>

Promise resolving when initialization is finished

Overrides

Plugin.load


process()

process(result, input): Promise<boolean>

Process the image

Main method implementing webgl shader effect or filter. It’s called by update() and should be overridden to add custom logic. process() should return true if effect is successfully applied and false if it is skipped, for example, if effect applies only when result is not empty.

Parameters

result: ResultT

Results of video processing

input: WebGLTexture

Current image texture

Returns

Promise<boolean>

True on success, false otherwise


setupCamera()

setupCamera(ratio, angle): void

Set camera parameters

Could be overridden to adjust plugin’s pipeline.

Parameters

ratio: number

Aspect ration of input video

angle: number

Vertical field of view in radians

Returns

void

Inherited from

Plugin.setupCamera


setupVideo()

setupVideo(size): void

Set video size

Adjusts shader and texture to a new size.

Parameters

size: Size

Resolution of input video

Returns

void

Overrides

Plugin.setupVideo


unload()

unload(): void

Reset plugin

Releases all resources and instances created in load(). Overridden by derived classes for particular effect.

Returns

void

Overrides

Plugin.unload


update()

update(result, stream): Promise<void>

Sealed

Update the image

Main method implementing webgl shader effect or filter. ShaderRenderer keeps track of the current iamge texture that will be be rendered. ShaderPlugin uses the current texture as input and writes results to ShaderPlugin#output. ShaderPlugin#output becomes new current texture of ShaderRenderer. This way all ShaderPlugins attached to renderer organize a chain of effects applied on top of each other. Method process() implements shader effect itself, it’s intended to be overridden by effect authors.

Parameters

result: ResultT

Results of video processing

stream: HTMLCanvasElement

Captured video frame

Returns

Promise<void>

Promise resolving when update is finished

Overrides

Plugin.update