Reference createFilterShader()

createFilterShader()

Creates a p5.Shader object to be used with the filter() function.

createFilterShader() works like createShader() but has a default vertex shader included. createFilterShader() is intended to be used along with filter() for filtering the contents of a canvas. A filter shader will be applied to the whole canvas instead of just p5.Geometry objects.

The parameter, fragSrc, sets the fragment shader. It’s a string that contains the fragment shader program written in GLSL.

The p5.Shader object that's created has some uniforms that can be set:

  • sampler2D tex0, which contains the canvas contents as a texture.
  • vec2 canvasSize, which is the width and height of the canvas, not including pixel density.
  • vec2 texelSize, which is the size of a physical pixel including pixel density. This is calculated as 1.0 / (width * density) for the pixel width and 1.0 / (height * density) for the pixel height.

The p5.Shader that's created also provides varying vec2 vTexCoord, a coordinate with values between 0 and 1. vTexCoord describes where on the canvas the pixel will be drawn.

For more info about filters and shaders, see Adam Ferriss' repo of shader examples or the Introduction to Shaders tutorial.

Examples

Syntax

createFilterShader(fragSrc)

Parameters

fragSrc

source code for the fragment shader.

Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!

Related References