createShader()

Creates a new p5.Shader object using GLSL.

If you are interested in writing shaders, consider using p5.strands shaders using buildMaterialShader, buildStrokeShader, or buildFilterShader. With p5.strands, you can modify existing shaders using JavaScript. With createShader, shaders are made from scratch, and are written in GLSL. This will be most useful for advanced cases, and for authors of add-on libraries.

Shaders are programs that run on the graphics processing unit (GPU). They can process many pixels at the same time, making them fast for many graphics tasks.

Once the p5.Shader object is created, it can be used with the shader() function, as in shader(myShader). A GLSL shader program consists of two parts, a vertex shader and a fragment shader. The vertex shader affects where 3D geometry is drawn on the screen and the fragment shader affects color.

The first parameter, vertSrc, sets the vertex shader. It’s a string that contains the vertex shader program written in GLSL.

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

Here is a simple example with a simple vertex shader that applies whatevre transformations have been set, and a simple fragment shader that ignores all material settings and just outputs yellow:

Fragment shaders are often the fastest way to dynamically create per-pixel textures. Here is an example of a fractal being drawn in the fragment shader. It also creates custom uniform variables in the shader, which can be set from your main sketch code. By passing the time in as a uniform, we can animate the fractal in the shader.

A shader can optionally describe hooks, which are functions in GLSL that users may choose to provide to customize the behavior of the shader using the modify() method of p5.Shader. Users can write their modifications using p5.strands, without needing to learn GLSL.

These are added by describing the hooks in a third parameter, options, and referencing the hooks in your vertSrc or fragSrc. Hooks for the vertex or fragment shader are described under the vertex and fragment keys of options. Each one is an object. where each key is the type and name of a hook function, and each value is a string with the parameter list and default implementation of the hook. For example, to let users optionally run code at the start of the vertex shader, the options object could include:

Then, in your vertex shader source, you can run a hook by calling a function with the same name prefixed by HOOK_. If you want to check if the default hook has been replaced, maybe to avoid extra overhead, you can check if the same name prefixed by AUGMENTED_HOOK_ has been defined:

void main() {
  // In most cases, just calling the hook is fine:
  HOOK_beforeVertex();

  // Alternatively, for more efficiency:
  #ifdef AUGMENTED_HOOK_beforeVertex
  HOOK_beforeVertex();
  #endif

  // Add the rest of your shader code here!
}

Then, a user of your shader can modify it with p5.strands. Here is what that looks like when we put everything together:

Note: Only filter shaders can be used in 2D mode. All shaders can be used in WebGL mode.