Reference baseStrokeShader()

baseStrokeShader()

Get the shader used when drawing the strokes of shapes.

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

HookDescription

void beforeVertex

Called at the start of the vertex shader.

StrokeVertex getObjectInputs

Update the vertex data of the stroke being drawn before any positioning has been applied. It takes in a StrokeVertex struct, which includes:

  • vec3 position, the position of the vertex
  • vec3 tangentIn, the tangent coming in to the vertex
  • vec3 tangentOut, the tangent coming out of the vertex. In straight segments, this will be the same as tangentIn. In joins, it will be different. In caps, one of the tangents will be 0.
  • vec4 color, the per-vertex color
  • float weight, the stroke weight The struct can be modified and returned.

StrokeVertex getWorldInputs

Update the vertex data of the model being drawn after transformations such as translate() and scale() have been applied, but before the camera has been applied. It takes in a StrokeVertex struct like, in the getObjectInputs hook above, that can be modified and returned.

StrokeVertex getCameraInputs

Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a StrokeVertex struct like, in the getObjectInputs hook above, that can be modified and returned.

void afterVertex

Called at the end of the vertex shader.

void beforeFragment

Called at the start of the fragment shader.

Inputs getPixelInputs

Update the inputs to the shader. It takes in a struct Inputs inputs, which includes:

  • vec4 color, the color of the stroke
  • vec2 tangent, the direction of the stroke in screen space
  • vec2 center, the coordinate of the center of the stroke in screen space p5.js pixels
  • vec2 position, the coordinate of the current pixel in screen space p5.js pixels
  • float strokeWeight, the thickness of the stroke in p5.js pixels

bool shouldDiscard

Caps and joins are made by discarded pixels in the fragment shader to carve away unwanted areas. Use this to change this logic. It takes in a bool willDiscard and must return a modified version.

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 baseStrokeShader().inspectHooks() to see all the possible hooks and their default implementations.

Examples

Syntax

baseStrokeShader()

Parameters

Returns

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