Class: ShaderProgram

@geenee/armature.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.

Hierarchy

• ShaderProgram

Constructors

constructor

• new ShaderProgram(gl, size?, inputs?, uniforms?, fragSrc?, vertSrc?, outputLinear?)

Constructor

Parameters

Name	Type	Default value	Description
gl	WebGL2RenderingContext	undefined	WebGL context where program is instantiated
size	Size	undefined	Size of processed (input & output) image
inputs	string[]	undefined	Shader texture inputs (names of sampler uniforms)
uniforms	Object	{}	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)
outputLinear	boolean	false	Texture read interpolation mode

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]: WebGLUniformLocation | null

---

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

Name	Type	Description
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

Name	Type	Description
gl	WebGL2RenderingContext	Context of shader program
inputs	(null | WebGLTexture)[]	Input image textures
uniforms	Object	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

Name	Type	Description
inputs	(null | WebGLTexture)[]	Input image textures
uniforms	Object	Values of shader uniforms

Returns

null | WebGLTexture

Output image texture

---

program

▸ program(): null | WebGLProgram

Shader program instance

Returns

null | WebGLProgram

Instance of shader program

---

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

Name	Type	Description
inputs	(null | WebGLTexture)[]	Input image textures
uniforms	Object	Values of shader uniforms

Returns

void

---

resize

▸ resize(size): void

Resize

Resizes output image texture and updates uniforms.

Parameters

Name	Type	Description
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

Name	Type	Description
gl	WebGL2RenderingContext	Context to restore state
state	Object	Previously recorded state
state.activeTexture	number	-
state.arrayBuffer	null | WebGLBuffer	-
state.colorMask	boolean[]	-
state.cullFace	boolean	-
state.framebuffer	null | WebGLFramebuffer	-
state.program	null | WebGLProgram	-
state.scissor	Int32Array	-
state.textures	(null | WebGLTexture)[]	-
state.vertexArray	null | WebGLVertexArrayObject	-
state.viewport	Int32Array	-

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

Name	Type	Description
gl	WebGL2RenderingContext	Context which state will be recorded

Returns

Object

Current state of WebGL context

Name	Type
activeTexture	number
arrayBuffer	null | WebGLBuffer
colorMask	boolean[]
cullFace	boolean
framebuffer	null | WebGLFramebuffer
program	null | WebGLProgram
scissor	Int32Array
textures	(null | WebGLTexture)[]
vertexArray	null | WebGLVertexArrayObject
viewport	Int32Array