Reference buildNormalShader()

buildNormalShader()

This API is experimental

Its behavior may change in a future version of p5.js.

Create a new shader that can change how fills are drawn, based on the material used when normalMaterial() is active. Pass the resulting shader into the shader() function to apply it to any fills you draw.

The main way to use buildNormalShader is to pass a function in as a parameter. This will let you create a shader using p5.strands.

In your function, you can call hooks to change part of the shader. In a material shader, these are the hooks available:

  • objectInputs: Update vertices before any positioning has been applied. Your function gets run on every vertex.
  • worldInputs: Update vertices after transformations have been applied. Your function gets run on every vertex.
  • cameraInputs: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
  • finalColor: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.

Read the linked reference page for each hook for more information about how to use them.

One thing you may want to do is update the position of all the vertices in an object over time:

You may also want to change the colors used. By default, the x, y, and z values of the orientation of the surface are mapped directly to red, green, and blue. But you can pick different colors:

Like the modify() method on shaders, advanced users can also fill in hooks using GLSL instead of JavaScript. Read the reference entry for modify() for more info.

Examples

Syntax

buildNormalShader(callback)
buildNormalShader(hooks)

Parameters

callback
Function: A function building a p5.strands shader.
hooks
Object: An object specifying p5.strands hooks in GLSL.

Returns

p5.Shader: The normal 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