ShaderProgram

Generic image processing shader program

Helper class encapsulating all instances of a simple image processing shaders, including vertex & fragment shaders, output texture, frame buffer, and uniforms. ShaderProgram#process method applies shaders to input textures, results are written to the output texture, ShaderProgram#render method renders directly on the canvas element providing WebGL context. Simplest program processes input texture covering it it by 2 triangles and passing texture coordinates to a fragment shader where all image processing happens.

Constructors

Constructor

new ShaderProgram(gl, size, inputs, uniforms, fragSrc, vertSrc, outGrayscale, outLinear, outMipmap): ShaderProgram

Constructor

Parameters

gl

WebGL2RenderingContext

WebGL context where program is instantiated

size

Size = ...

Size of processed (input & output) image

inputs

string[] = ...

Shader texture inputs (names of sampler uniforms)

uniforms

Shader uniforms as name-type map object

fragSrc

string = fragSrcDefault

Fragment shader source (copy shader by default)

vertSrc

string = vertSrcDefault

Vertex shader source (copy shader by default)

outGrayscale

boolean = false

Grayscale output texture

outLinear

boolean = false

Output texture read interpolation mode

outMipmap

boolean = false

Returns

ShaderProgram

Properties

fragShader

protected fragShader: null | WebGLShader = null

Fragment shader

---

frameBuffer

protected frameBuffer: null | WebGLFramebuffer = null

Frame buffer (output)

---

gl

protected gl: WebGL2RenderingContext

WebGL context where program is instantiated

---

inputs

protected inputs: string[]

Shader texture inputs (names of sampler uniforms)

---

outputTexture?

protected optional outputTexture: ImageTexture

Output image texture

---

shaderProgram

protected shaderProgram: null | WebGLProgram = null

Shader program

---

size

protected size: Size

Size of processed (input & output) image

---

uniforms

protected uniforms: object = {}

Shader uniforms as name-type map object

Index Signature

[key: string]: UniformType

---

uniformsLoc

protected uniformsLoc: object = {}

Unifrom locations

Index Signature

[key: string]: null | WebGLUniformLocation

---

vertAttrs

protected vertAttrs: null | WebGLVertexArrayObject = null

Vertex attributes

---

vertBuffer

protected vertBuffer: null | WebGLBuffer = null

Vertex buffer

---

vertShader

protected vertShader: null | WebGLShader = null

Vertex shader

Methods

compile()

protected compile(fragSrc, vertSrc): void

Compile shader program

Allocates and sets up all resources required for shader program, compiles and links shaders.

Parameters

fragSrc

string

Fragment shader source (copy shader by default)

vertSrc

string

Vertex shader source (copy shader by default)

Returns

void

---

dispose()

dispose(): void

Dispose program object

Releases resources and instances allocated by program. Program object cannot be used after calling dispose().

Returns

void

---

output()

output(): null | WebGLTexture

Output image texture

Returns

null | WebGLTexture

Image texture

---

prepare()

protected prepare(gl, inputs, uniforms): void

Prepare execution of the shader

Set input textures and provided uniform values, bind program and setup vertex attribute arrays.

Parameters

gl

WebGL2RenderingContext

Context of shader program

inputs

(null | WebGLTexture)[]

Input image textures

uniforms

Values of shader uniforms

Returns

void

---

process()

process(inputs, uniforms): null | WebGLTexture

Process input image

Applies shader program to input image, output is written to image texture using framebuffer.

Parameters

inputs

(null | WebGLTexture)[]

Input image textures

uniforms

Values of shader uniforms

Returns

null | WebGLTexture

Output image texture

---

program()

program(): null | WebGLProgram

Shader program instance

Returns

null | WebGLProgram

Instance of shader program

---

read()

read(): null | Uint8Array<ArrayBuffer>

Read image texture

Returns

null | Uint8Array<ArrayBuffer>

Texture data

---

render()

render(inputs, uniforms): void

Process input image and render the result

Applies shader program to input image, output is renderer to canvas providing WebGL context.

Parameters

inputs

(null | WebGLTexture)[]

Input image textures

uniforms

Values of shader uniforms

Returns

void

---

resize()

resize(size): void

Resize

Resizes output image texture and updates uniforms.

Parameters

size

Size

Main/output shader size

Returns

void

---

restore()

protected restore(gl, state): void

Restore context state

Restores state of WebGL context to recorded checkpoint. This allows to safely share context with other engines.

Parameters

gl

WebGL2RenderingContext

Context to restore state

state

Previously recorded state

activeTexture

number = ...

arrayBuffer

null | WebGLBuffer = ...

blend

boolean = ...

colorMask

boolean[] = ...

cullFace

boolean = ...

framebuffer

null | WebGLFramebuffer = ...

program

null | WebGLProgram = ...

scissor

Int32Array<ArrayBufferLike> = ...

textures

(null | WebGLTexture)[] = ...

vertexArray

null | WebGLVertexArrayObject = ...

viewport

Int32Array<ArrayBufferLike> = ...

Returns

void

---

save()

protected save(gl): object

Save context state

Saves state of WebGL including program in use, bound array buffers, framebuffer, and textures. Returned state can be restored later to safely share context with other frameworks or renderers.

Parameters

gl

WebGL2RenderingContext

Context which state will be recorded

Returns

object

Current state of WebGL context

activeTexture

activeTexture: number

arrayBuffer

arrayBuffer: null | WebGLBuffer

blend

blend: boolean

colorMask

colorMask: boolean[]

cullFace

cullFace: boolean

framebuffer

framebuffer: null | WebGLFramebuffer

program

program: null | WebGLProgram

scissor

scissor: Int32Array<ArrayBufferLike>

textures

textures: (null | WebGLTexture)[]

vertexArray

vertexArray: null | WebGLVertexArrayObject

viewport

viewport: Int32Array<ArrayBufferLike>

---

setUniform()

setUniform(uniform, val): void

Set uniform value

Parameters

uniform

string

Uniform name

val

number[]

Uniform value

Returns

void

---

setUniformUnsafe()

protected setUniformUnsafe(uniform, val): void

Set uniform value unsafely

Parameters

uniform

string

Uniform name

val

number[]

Uniform value

Returns

void