Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Address Maintainer feedbacks: Update ShaderGenerator docs and examples
  • Loading branch information
Abhayaj247 committed Aug 9, 2025
commit 29fbe520ee9deaa5c7e5adc604162d98847d79ec
26 changes: 15 additions & 11 deletions src/webgl/ShaderGenerator.js
Original file line number Diff line number Diff line change
Expand Up @@ -1646,7 +1646,13 @@ if (typeof p5 !== 'undefined') {
* @method getWorldInputs
* @description
* Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.modify() and similar shader modify calls to customize vertex positions, normals, texture coordinates, and colors before rendering. "World space" refers to the coordinate system of the 3D scene, before any camera or projection transformations are applied.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getWorldInputs doesn't yet have a description of the parameters to inputs. It has the same inputs as getObjectInputs and getCameraInputs, can we copy and paste the properties bullet list from one of those here?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a parameters bullet list for getWorldInputs, matching the format and content from getObjectInputs/getCameraInputs.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably you could attach a link here for modify where you write:

similar shader .modify() calls to customize.....

It should look something like this.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing this out! I’ve added a link to .modify() so it’s consistent with other references.

*
*
* The callback receives a vertex object with the following properties:
* - `position`: a vector with three components representing the original position of the vertex
* - `normal`: a vector with three components representing the direction the surface is facing
* - `texCoord`: a vector with two components representing the texture coordinates
* - `color`: a vector with four components representing the color of the vertex (red, green, blue, alpha)
*
* This hook is available in:
* - <a href="#/p5/baseMaterialShader">baseMaterialShader()</a>
* - <a href="#/p5/baseNormalShader">baseNormalShader()</a>
Expand All @@ -1667,7 +1673,8 @@ if (typeof p5 !== 'undefined') {
* getWorldInputs(inputs => {
* // Move the vertex up and down in a wave in world space
* // In world space, moving the object (e.g., with translate()) will affect these coordinates
* inputs.position.y += 0.5 * sin(t * 0.001 + inputs.position.x * 0.05);
* // The sphere is ~50 units tall here, so 20 gives a noticeable wave
* inputs.position.y += 20 * sin(t * 0.001 + inputs.position.x * 0.05);
* return inputs;
* });
* });
Expand Down Expand Up @@ -1862,9 +1869,7 @@ if (typeof p5 !== 'undefined') {
* let t = uniformFloat(() => millis());
* getPixelInputs(inputs => {
* // Animate alpha (transparency) based on x position
* if (inputs.color && inputs.texCoord) {
* inputs.color.a = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + t * 0.002);
* }
* inputs.color.a = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + t * 0.002);
* return inputs;
* });
* });
Expand All @@ -1875,14 +1880,15 @@ if (typeof p5 !== 'undefined') {
* lights();
* noStroke();
* fill('purple');
* sphere(50);
* circle(0, 0, 100);
* }
* </code>
* </div>
*/

/**
* @method shouldDiscard
* @private
* @description
* Registers a callback to decide whether to discard (skip drawing) a fragment (pixel) in the fragment shader. This hook can be used inside <a href="#/p5/baseStrokeShader">baseStrokeShader()</a>.modify() and similar shader modify calls to create effects like round points or custom masking. The callback receives a boolean:
* - `willDiscard`: true if the fragment would be discarded by default
Expand Down Expand Up @@ -1918,8 +1924,7 @@ if (typeof p5 !== 'undefined') {
/**
* @method getFinalColor
* @description
* Registers a callback to change the final color of each pixel after all lighting and mixing is done in the fragment shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.modify() and similar shader modify calls to adjust the color before it appears on the screen. The callback receives a four component vector representing red, green, blue, and alpha:
* - `[r, g, b, a]`: the current color (red, green, blue, alpha)
* Registers a callback to change the final color of each pixel after all lighting and mixing is done in the fragment shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.modify() and similar shader modify calls to adjust the color before it appears on the screen. The callback receives a four component vector representing red, green, blue, and alpha.
*
* Return a new color array to change the output color.
*
Expand Down Expand Up @@ -2009,7 +2014,6 @@ if (typeof p5 !== 'undefined') {
* - `texCoord`: a vector with two components representing the texture coordinates (u, v)
* - `canvasSize`: a vector with two components representing the canvas size in pixels (width, height)
* - `texelSize`: a vector with two components representing the size of a single texel in texture space
* - `color`: a vector with four components representing the current pixel color (red, green, blue, alpha)
* - `canvasContent`: a texture containing the sketch's contents before the filter is applied
*
* Return a four-component vector `[r, g, b, a]` for the pixel.
Expand Down Expand Up @@ -2075,7 +2079,7 @@ if (typeof p5 !== 'undefined') {
* let t = uniformFloat(() => millis());
* getObjectInputs(inputs => {
* // Create a sine wave along the x axis in object space
* inputs.position.y += 0.5 * sin(inputs.position.x * 0.1 + t * 0.002);
* inputs.position.y += 20 * sin(t * 0.001 + inputs.position.x * 0.05);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A very minor suggestion, 20 is too high, the sphere goes off the canvas for long time. Use 2 or 3 instead, so the wave stays visible and the sphere stays in view.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point 🙂 I’ve reduced the sine wave amplitude to 3 so the sphere stays visible within the canvas.

* return inputs;
* });
* });
Expand All @@ -2085,7 +2089,7 @@ if (typeof p5 !== 'undefined') {
* shader(myShader);
* noStroke();
* fill('orange');
* box(100);
* sphere(100);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perminder-17 mentioned it on another example, but on here too sphere(100) fills the canvas entirely, I think sphere(50) leaves some room for it to go up and down:

Screen.Recording.2025-08-19.at.7.02.27.PM.mov

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for catching that! I’ve updated sphere(100) to sphere(50) so it fits better within the canvas.

* }
* </code>
* </div>
Expand Down
Loading