Reference baseMaterialShader()

baseMaterialShader()

This API is experimental

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

Get the default shader used with lights, materials, and textures.

You can call baseMaterialShader().modify() and change any of the following hooks:

HookDescription

void beforeVertex

Called at the start of the vertex shader.

vec3 getLocalPosition

Update the position of vertices before transforms are applied. It takes in vec3 position and must return a modified version.

vec3 getWorldPosition

Update the position of vertices after transforms are applied. It takes in vec3 position and pust return a modified version.

vec3 getLocalNormal

Update the normal before transforms are applied. It takes in vec3 normal and must return a modified version.

vec3 getWorldNormal

Update the normal after transforms are applied. It takes in vec3 normal and must return a modified version.

vec2 getUV

Update the texture coordinates. It takes in vec2 uv and must return a modified version.

vec4 getVertexColor

Update the color of each vertex. It takes in a vec4 color and must return a modified version.

void afterVertex

Called at the end of the vertex shader.

void beforeFragment

Called at the start of the fragment shader.

Inputs getPixelInputs

Update the per-pixel inputs of the material. It takes in an Inputs struct, which includes:

  • vec3 normal, the direction pointing out of the surface
  • vec2 texCoord, a vector where x and y are between 0 and 1 describing the spot on a texture the pixel is mapped to, as a fraction of the texture size
  • vec3 ambientLight, the ambient light color on the vertex
  • vec4 color, the base material color of the pixel
  • vec3 ambientMaterial, the color of the pixel when affected by ambient light
  • vec3 specularMaterial, the color of the pixel when reflecting specular highlights
  • vec3 emissiveMaterial, the light color emitted by the pixel
  • float shininess, a number representing how sharp specular reflections should be, from 1 to infinity
  • float metalness, a number representing how mirrorlike the material should be, between 0 and 1 The struct can be modified and returned.

vec4 combineColors

Take in a ColorComponents struct containing all the different components of light, and combining them into a single final color. The struct contains:

  • vec3 baseColor, the base color of the pixel
  • float opacity, the opacity between 0 and 1 that it should be drawn at
  • vec3 ambientColor, the color of the pixel when affected by ambient light
  • vec3 specularColor, the color of the pixel when affected by specular reflections
  • vec3 diffuse, the amount of diffused light hitting the pixel
  • vec3 ambient, the amount of ambient light hitting the pixel
  • vec3 specular, the amount of specular reflection hitting the pixel
  • vec3 emissive, the amount of light emitted by the pixel

vec4 getFinalColor

Update the final color after mixing. It takes in a vec4 color and must return a modified version.

void afterFragment

Called at the end of the fragment shader.

Most of the time, you will need to write your hooks in GLSL ES version 300. If you are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.

Call baseMaterialShader().inspectHooks() to see all the possible hooks and their default implementations.

Examples

Returns

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