[p5.strands] Add texCoord to finalColor block

[nbogie]

Increasing access

Newcomers to shaders would be able to make simple unlit material shaders sooner, with only finalColor (and, say, noise() on texCoord).
In contrast, currently, I think they need to understand how to use shared variables to propagate the texCoord from pixelInputs, and need to know that it even exists there.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature enhancement details

Instead of this for a material shader:

before

let coord = sharedVec2()
pixelInputs.begin();    
coord = pixelInputs.texCoord;
pixelInputs.end();

finalColor.begin();
let coord = finalColor.texCoord;
finalColor.set(noise(coord.x, coord.y));
finalColor.end();

...we could instead write this:

after

finalColor.begin();
let coord = finalColor.texCoord;
finalColor.set(noise(coord.x, coord.y));
finalColor.end();

This assumes there is no situation where it texCoord for finalColor would be meaningless or ambiguous - I don't know.

Conversation in discord:

https://discord.com/channels/836700474425475088/1384610702467272785/1485021371607154749

[YuktiNandwana]

Hi @nbogie and @davepagurek! I've been exploring the new p5.strands architecture for my GSoC proposal and I'd love to take this on. Making shaders more accessible for beginners aligns perfectly with what I want to contribute to p5.js.

I'm currently looking into the WebGL module to see where the default properties for the finalColor block are defined. Could I be assigned to this issue?

[davepagurek]

Hi @YuktiNandwana! Sure, I can assign it to you. In p5.strands, these hook blocks start at the shader level. Currently, a base shader does two things:

(1) it calls a hook function somewhere in its source code, like this one for the final color:

p5.js/src/webgl/shaders/phong.frag

Line 80 in 36e3645

OUT_COLOR = HOOK_getFinalColor(HOOK_combineColors(c));

(2) the renderer defines a default implementation:

p5.js/src/webgl/p5.RendererGL.js

Line 726 in 36e3645

"vec4 getFinalColor": "(vec4 color) { return color; }",

And then p5.strands automatically makes the parameters to the function be properties on the hook object in javascript. So if we add a second texCoord parameter to the getFinalColor function, it should be usable in p5.strands as finalColor.texCoord.

So we'll want to:

• Update the shader code everywhere we use getFinalColor, which is in multiple shaders, to also pass in the texture coordinate
• Update all the renderers (WebGL, WebGPU, and 2D filter runner) to also have a second parameter in their getFinalColor hook
• Add some visual test cases that make use of this to make sure it works

[YuktiNandwana]

Hi @davepagurek, thank you for the assignment and for the incredibly clear breakdown! This is immensely helpful.

The 3-step roadmap makes perfect sense. I will start by:

1. Tracing getFinalColor across the various shader files to pass in the texture coordinate.

2. Updating the default hook definitions across the renderers (p5.RendererGL.js, WebGPU, and the filter runner).

3. Adding the required visual test cases to ensure the new hook property works correctly.

@nbogie 👀 I'm on it!

I'll set up my local branch and aim to open a Draft PR soon so you can review the initial changes. I'll reach out here if I hit any roadblocks while setting up the tests. Thanks again!

[YuktiNandwana]

Quick update: I have implemented the changes across the shaders and renderers as discussed. I've also fixed some initial shader compilation issues I encountered. I've opened a Draft PR #8698 with these changes. All local tests are now passing!