Skip to main content

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. process method applies shaders to input textures, results are written to the output texture, 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?, outputLinear?)

Constructor

Parameters

NameTypeDefault valueDescription
glWebGL2RenderingContextundefinedWebGL context where program is instantiated
sizeSizeundefinedSize of processed (input & output) image
inputsstring[]undefinedShader texture inputs (names of sampler uniforms)
uniformsObjectundefinedShader uniforms as name-type map object
fragSrcstringfragSrcDefaultFragment shader source (copy shader by default)
vertSrcstringvertSrcDefaultVertex shader source (copy shader by default)
outputLinearbooleanfalseTexture 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


inputs

Protected inputs: string[]


output

Optional output: ImageTexture

Output image texture


positionLoc

Protected positionLoc: number = 0

Position attribute location


shaderProgram

Protected shaderProgram: null | WebGLProgram = null

Shader program


size

Protected size: Size


uniforms

Protected uniforms: Object

Index signature

[key: string]: UniformType


uniformsLoc

Protected uniformsLoc: Object = {}

Unifrom locations

Index signature

[key: string]: WebGLUniformLocation | null


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

NameTypeDescription
fragSrcstringFragment shader source (copy shader by default)
vertSrcstringVertex 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


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

NameTypeDescription
glWebGL2RenderingContextContext of shader program
inputs(null | WebGLTexture)[]Input image textures
uniformsObjectValues of shader uniforms

Returns

void


process

process(inputs, uniforms?): void

Process input image

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

Parameters

NameTypeDescription
inputs(null | WebGLTexture)[]Input image textures
uniformsObjectValues of shader uniforms

Returns

void


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

NameTypeDescription
inputs(null | WebGLTexture)[]Input image textures
uniformsObjectValues of shader uniforms

Returns

void


resize

resize(size): void

Resize

Resizes output image texture and updates uniforms.

Parameters

NameTypeDescription
sizeSizeMain/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

NameTypeDescription
glWebGL2RenderingContextContext to restore state
stateObjectPreviously recorded state
state.activeTexturenumber-
state.arrayBuffernull | WebGLBuffer-
state.cullFaceboolean-
state.framebuffernull | WebGLFramebuffer-
state.programnull | WebGLProgram-
state.scissorInt32Array-
state.textures(null | WebGLTexture)[]-
state.vertexArraynull | WebGLVertexArrayObject-
state.viewportInt32Array-

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

NameTypeDescription
glWebGL2RenderingContextContext which state will be recorded

Returns

Object

Current state of WebGL context

NameType
activeTexturenumber
arrayBuffernull | WebGLBuffer
cullFaceboolean
framebuffernull | WebGLFramebuffer
programnull | WebGLProgram
scissorInt32Array
textures(null | WebGLTexture)[]
vertexArraynull | WebGLVertexArrayObject
viewportInt32Array