Applying Custom Shaders to Lines as Well as Filled Polygons in p5.js

p5.js Coding Questions
1

Hi all,

I’m using a custom shader in p5.js that works well on filled polygons but doesn’t affect the magenta lines outlining them. I’m looking for a way to apply the shader to these lines as well. Here’s my code:

How can I modify this to include the magenta line outlines in the shader effect?

Thanks for any insights!

2

Lines are rendered with a separate shader (line shader).

Quick research showed me this line

and

so I assume that you have to define uStrokeWeight in your line shader (specifically for rendering lines) for the shader to be recognized as a line shader. But as a disclaimer I haven’t tested anything.

You may want to use the default line shader as a starting point:

3

I did some test here, the code is not very clean (I tried to recreate intermediate shader code in the normal p5.js pipeline)

I edited the last color output part on fragment shader to change the color with uv, but you can perhaps modify the vertices on vertex shader.

1 Like