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.
Extended by
Constructors
new ShaderProgram()
new ShaderProgram(
gl,size,inputs,uniforms,fragSrc,vertSrc,outGrayscale,outLinear):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
Returns
Properties
fragShader
protectedfragShader:null|WebGLShader=null
Fragment shader
frameBuffer
protectedframeBuffer:null|WebGLFramebuffer=null
Frame buffer (output)
gl
protectedgl:WebGL2RenderingContext
WebGL context where program is instantiated
inputs
protectedinputs:string[]
Shader texture inputs (names of sampler uniforms)
outputTexture?
protectedoptionaloutputTexture:ImageTexture
Output image texture
shaderProgram
protectedshaderProgram:null|WebGLProgram=null
Shader program
size
protectedsize:Size
Size of processed (input & output) image
uniforms
protecteduniforms:object={}
Shader uniforms as name-type map object
Index Signature
[key: string]: UniformType
uniformsLoc
protecteduniformsLoc:object={}
Unifrom locations
Index Signature
[key: string]: WebGLUniformLocation | null
vertAttrs
protectedvertAttrs:null|WebGLVertexArrayObject=null
Vertex attributes
vertBuffer
protectedvertBuffer:null|WebGLBuffer=null
Vertex buffer
vertShader
protectedvertShader:null|WebGLShader=null
Vertex shader
Methods
compile()
protectedcompile(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()
protectedprepare(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
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()
protectedrestore(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
• 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()
protectedsave(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
colorMask
colorMask:
boolean[]
cullFace
cullFace:
boolean
framebuffer
framebuffer:
null|WebGLFramebuffer
program
program:
null|WebGLProgram
scissor
scissor:
Int32Array
textures
textures: (
null|WebGLTexture)[]
vertexArray
vertexArray:
null|WebGLVertexArrayObject
viewport
viewport:
Int32Array
setUniform()
setUniform(
uniform,val):void
Set uniform value
Parameters
• uniform: string
Uniform name
• val: number[]
Uniform value
Returns
void
setUniformUnsafe()
protectedsetUniformUnsafe(uniform,val):void
Set uniform value unsafely
Parameters
• uniform: string
Uniform name
• val: number[]
Uniform value
Returns
void