From a3aeaa29a0662f85393ce350508523e9b72acad1 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Tue, 24 Jun 2025 20:06:28 +0530 Subject: [PATCH 01/16] docs: Add initial draft of Strands documentation --- src/webgl/p5.strands.js | 152 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 src/webgl/p5.strands.js diff --git a/src/webgl/p5.strands.js b/src/webgl/p5.strands.js new file mode 100644 index 0000000000..f5d56011f2 --- /dev/null +++ b/src/webgl/p5.strands.js @@ -0,0 +1,152 @@ +/** + * @typedef {Object} Vertex + * @property {{x: number, y: number, z: number}} position - The position of the vertex in world space. + * @property {{x: number, y: number, z: number}} normal - The normal vector at the vertex in world space. + * @property {{x: number, y: number}} texCoord - The texture coordinates (x, y) for the vertex. + * @property {{r: number, g: number, b: number, a: number}} color - The color at the vertex. + */ + +/** + * @function getWorldInputs + * @experimental + * @description + * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside {@link p5.baseMaterialShader}.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. + * + * This hook is available in: + * - {@link p5.baseMaterialShader} + * - {@link p5.baseNormalShader} + * - {@link p5.baseColorShader} + * - {@link p5.baseStrokeShader} + * + * @param {function(Vertex): Vertex} callback + * A callback function which receives and returns a Vertex struct. + * + * @see {@link p5.baseMaterialShader} + * @see {@link p5.Shader#modify} + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * getWorldInputs(inputs => { + * // Move the vertex up and down in a wave + * inputs.position.y += 20 * sin( + * millis() * 0.001 + inputs.position.x * 0.05 + * ); + * return inputs; + * }); + * }); + * } + * function draw() { + * background(255); + * shader(myShader); + * lights(); + * noStroke(); + * fill('red'); + * sphere(50); + * } + * + *
+ */ + +/** + * @function combineColors + * @experimental + * @description + * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() and similar shader modify calls to control the final color output of a material. The callback receives a ColorComponents struct and should return an object with a `color` property ({ r, g, b }) and an `opacity` property (number). + * + * This hook is available in: + * - {@link p5.baseMaterialShader} + * - {@link p5.baseNormalShader} + * - {@link p5.baseColorShader} + * - {@link p5.baseStrokeShader} + * + * @param {function(ColorComponents): { color: {r: number, g: number, b: number}, opacity: number }} callback + * A callback function which receives a ColorComponents struct and returns the final color and opacity. + * + * @see {@link p5.baseMaterialShader} + * @see {@link p5.Shader#modify} + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * combineColors(components => { + * // Custom color combination: add a red tint + * let color = { + * r: components.baseColor.r * components.diffuse.r + + * components.ambientColor.r * components.ambient.r + + * components.specularColor.r * components.specular.r + + * components.emissive.r + 0.2, + * g: components.baseColor.g * components.diffuse.g + + * components.ambientColor.g * components.ambient.g + + * components.specularColor.g * components.specular.g + + * components.emissive.g, + * b: components.baseColor.b * components.diffuse.b + + * components.ambientColor.b * components.ambient.b + + * components.specularColor.b * components.specular.b + + * components.emissive.b + * }; + * return { color, opacity: components.opacity }; + * }); + * }); + * } + * function draw() { + * background(255); + * shader(myShader); + * lights(); + * noStroke(); + * fill('red'); + * sphere(50); + * } + * + *
+ */ + +/** + * @function getPointSize + * @experimental + * @description + * Registers a callback to modify the size of points when rendering with a shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() or similar, when drawing points (e.g., with the point() function in WEBGL mode). The callback receives the current point size (number) and should return the new size (number). + * + * This hook is available in: + * - {@link p5.baseMaterialShader} + * - {@link p5.baseNormalShader} + * - {@link p5.baseColorShader} + * - {@link p5.baseStrokeShader} + * + * @param {function(size: number): number} callback + * A callback function which receives and returns the point size. + * + * @see {@link p5.baseMaterialShader} + * @see {@link p5.Shader#modify} + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * getPointSize(size => { + * // Make points pulse in size over time + * return size * (1.0 + 0.5 * sin(millis() * 0.002)); + * }); + * }); + * } + * function draw() { + * background(255); + * shader(myShader); + * strokeWeight(20); + * stroke('blue'); + * point(0, 0); + * } + * + *
+ */ \ No newline at end of file From 8e199d84aa16ccbb24b301d2c6aefe2ac950a49d Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Thu, 26 Jun 2025 19:32:59 +0530 Subject: [PATCH 02/16] docs: move p5.strands JSDoc to end of shaderGenerator.js and remove separate file --- src/webgl/ShaderGenerator.js | 156 +++++++++++++++++++++++++++++++++++ src/webgl/p5.strands.js | 152 ---------------------------------- 2 files changed, 156 insertions(+), 152 deletions(-) delete mode 100644 src/webgl/p5.strands.js diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index d029ed44ef..fc9a6250c9 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1638,3 +1638,159 @@ export default shadergenerator; if (typeof p5 !== 'undefined') { p5.registerAddon(shadergenerator) } + + + +/* ------------------------------------------------------------- */ +/** + * @typedef {Object} Vertex + * @property {{x: number, y: number, z: number}} position - The position of the vertex in world space. + * @property {{x: number, y: number, z: number}} normal - The normal vector at the vertex in world space. + * @property {{x: number, y: number}} texCoord - The texture coordinates (x, y) for the vertex. + * @property {{r: number, g: number, b: number, a: number}} color - The color at the vertex. + */ + +/** + * @function getWorldInputs + * @experimental + * @description + * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside {@link p5.baseMaterialShader}.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. + * + * This hook is available in: + * - {@link p5.baseMaterialShader} + * - {@link p5.baseNormalShader} + * - {@link p5.baseColorShader} + * - {@link p5.baseStrokeShader} + * + * @param {function(Vertex): Vertex} callback + * A callback function which receives and returns a Vertex struct. + * + * @see {@link p5.baseMaterialShader} + * @see {@link p5.Shader#modify} + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * getWorldInputs(inputs => { + * // Move the vertex up and down in a wave + * inputs.position.y += 20 * sin( + * millis() * 0.001 + inputs.position.x * 0.05 + * ); + * return inputs; + * }); + * }); + * } + * function draw() { + * background(255); + * shader(myShader); + * lights(); + * noStroke(); + * fill('red'); + * sphere(50); + * } + * + *
+ */ + +/** + * @function combineColors + * @experimental + * @description + * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() and similar shader modify calls to control the final color output of a material. The callback receives a ColorComponents struct and should return an object with a `color` property ({ r, g, b }) and an `opacity` property (number). + * + * This hook is available in: + * - {@link p5.baseMaterialShader} + * - {@link p5.baseNormalShader} + * - {@link p5.baseColorShader} + * - {@link p5.baseStrokeShader} + * + * @param {function(ColorComponents): { color: {r: number, g: number, b: number}, opacity: number }} callback + * A callback function which receives a ColorComponents struct and returns the final color and opacity. + * + * @see {@link p5.baseMaterialShader} + * @see {@link p5.Shader#modify} + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * combineColors(components => { + * // Custom color combination: add a red tint + * let color = { + * r: components.baseColor.r * components.diffuse.r + + * components.ambientColor.r * components.ambient.r + + * components.specularColor.r * components.specular.r + + * components.emissive.r + 0.2, + * g: components.baseColor.g * components.diffuse.g + + * components.ambientColor.g * components.ambient.g + + * components.specularColor.g * components.specular.g + + * components.emissive.g, + * b: components.baseColor.b * components.diffuse.b + + * components.ambientColor.b * components.ambient.b + + * components.specularColor.b * components.specular.b + + * components.emissive.b + * }; + * return { color, opacity: components.opacity }; + * }); + * }); + * } + * function draw() { + * background(255); + * shader(myShader); + * lights(); + * noStroke(); + * fill('red'); + * sphere(50); + * } + * + *
+ */ + +/** + * @function getPointSize + * @experimental + * @description + * Registers a callback to modify the size of points when rendering with a shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() or similar, when drawing points (e.g., with the point() function in WEBGL mode). The callback receives the current point size (number) and should return the new size (number). + * + * This hook is available in: + * - {@link p5.baseMaterialShader} + * - {@link p5.baseNormalShader} + * - {@link p5.baseColorShader} + * - {@link p5.baseStrokeShader} + * + * @param {function(size: number): number} callback + * A callback function which receives and returns the point size. + * + * @see {@link p5.baseMaterialShader} + * @see {@link p5.Shader#modify} + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * getPointSize(size => { + * // Make points pulse in size over time + * return size * (1.0 + 0.5 * sin(millis() * 0.002)); + * }); + * }); + * } + * function draw() { + * background(255); + * shader(myShader); + * strokeWeight(20); + * stroke('blue'); + * point(0, 0); + * } + * + *
+ */ diff --git a/src/webgl/p5.strands.js b/src/webgl/p5.strands.js deleted file mode 100644 index f5d56011f2..0000000000 --- a/src/webgl/p5.strands.js +++ /dev/null @@ -1,152 +0,0 @@ -/** - * @typedef {Object} Vertex - * @property {{x: number, y: number, z: number}} position - The position of the vertex in world space. - * @property {{x: number, y: number, z: number}} normal - The normal vector at the vertex in world space. - * @property {{x: number, y: number}} texCoord - The texture coordinates (x, y) for the vertex. - * @property {{r: number, g: number, b: number, a: number}} color - The color at the vertex. - */ - -/** - * @function getWorldInputs - * @experimental - * @description - * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside {@link p5.baseMaterialShader}.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. - * - * This hook is available in: - * - {@link p5.baseMaterialShader} - * - {@link p5.baseNormalShader} - * - {@link p5.baseColorShader} - * - {@link p5.baseStrokeShader} - * - * @param {function(Vertex): Vertex} callback - * A callback function which receives and returns a Vertex struct. - * - * @see {@link p5.baseMaterialShader} - * @see {@link p5.Shader#modify} - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseMaterialShader().modify(() => { - * getWorldInputs(inputs => { - * // Move the vertex up and down in a wave - * inputs.position.y += 20 * sin( - * millis() * 0.001 + inputs.position.x * 0.05 - * ); - * return inputs; - * }); - * }); - * } - * function draw() { - * background(255); - * shader(myShader); - * lights(); - * noStroke(); - * fill('red'); - * sphere(50); - * } - * - *
- */ - -/** - * @function combineColors - * @experimental - * @description - * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() and similar shader modify calls to control the final color output of a material. The callback receives a ColorComponents struct and should return an object with a `color` property ({ r, g, b }) and an `opacity` property (number). - * - * This hook is available in: - * - {@link p5.baseMaterialShader} - * - {@link p5.baseNormalShader} - * - {@link p5.baseColorShader} - * - {@link p5.baseStrokeShader} - * - * @param {function(ColorComponents): { color: {r: number, g: number, b: number}, opacity: number }} callback - * A callback function which receives a ColorComponents struct and returns the final color and opacity. - * - * @see {@link p5.baseMaterialShader} - * @see {@link p5.Shader#modify} - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseMaterialShader().modify(() => { - * combineColors(components => { - * // Custom color combination: add a red tint - * let color = { - * r: components.baseColor.r * components.diffuse.r + - * components.ambientColor.r * components.ambient.r + - * components.specularColor.r * components.specular.r + - * components.emissive.r + 0.2, - * g: components.baseColor.g * components.diffuse.g + - * components.ambientColor.g * components.ambient.g + - * components.specularColor.g * components.specular.g + - * components.emissive.g, - * b: components.baseColor.b * components.diffuse.b + - * components.ambientColor.b * components.ambient.b + - * components.specularColor.b * components.specular.b + - * components.emissive.b - * }; - * return { color, opacity: components.opacity }; - * }); - * }); - * } - * function draw() { - * background(255); - * shader(myShader); - * lights(); - * noStroke(); - * fill('red'); - * sphere(50); - * } - * - *
- */ - -/** - * @function getPointSize - * @experimental - * @description - * Registers a callback to modify the size of points when rendering with a shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() or similar, when drawing points (e.g., with the point() function in WEBGL mode). The callback receives the current point size (number) and should return the new size (number). - * - * This hook is available in: - * - {@link p5.baseMaterialShader} - * - {@link p5.baseNormalShader} - * - {@link p5.baseColorShader} - * - {@link p5.baseStrokeShader} - * - * @param {function(size: number): number} callback - * A callback function which receives and returns the point size. - * - * @see {@link p5.baseMaterialShader} - * @see {@link p5.Shader#modify} - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseMaterialShader().modify(() => { - * getPointSize(size => { - * // Make points pulse in size over time - * return size * (1.0 + 0.5 * sin(millis() * 0.002)); - * }); - * }); - * } - * function draw() { - * background(255); - * shader(myShader); - * strokeWeight(20); - * stroke('blue'); - * point(0, 0); - * } - * - *
- */ \ No newline at end of file From c9d07c1c954d234cc99009429ca8a6cde9e774b2 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Sun, 29 Jun 2025 14:00:48 +0530 Subject: [PATCH 03/16] docs: fix JSDoc syntax for p5.js compatibility --- src/webgl/ShaderGenerator.js | 86 ++++++++++++++---------------------- 1 file changed, 34 insertions(+), 52 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index fc9a6250c9..afb492e757 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1642,31 +1642,20 @@ if (typeof p5 !== 'undefined') { /* ------------------------------------------------------------- */ -/** - * @typedef {Object} Vertex - * @property {{x: number, y: number, z: number}} position - The position of the vertex in world space. - * @property {{x: number, y: number, z: number}} normal - The normal vector at the vertex in world space. - * @property {{x: number, y: number}} texCoord - The texture coordinates (x, y) for the vertex. - * @property {{r: number, g: number, b: number, a: number}} color - The color at the vertex. - */ - /** * @function getWorldInputs * @experimental * @description - * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside {@link p5.baseMaterialShader}.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. + * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside baseMaterialShader().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. * * This hook is available in: - * - {@link p5.baseMaterialShader} - * - {@link p5.baseNormalShader} - * - {@link p5.baseColorShader} - * - {@link p5.baseStrokeShader} + * - baseMaterialShader() + * - baseNormalShader() + * - baseColorShader() + * - baseStrokeShader() * - * @param {function(Vertex): Vertex} callback - * A callback function which receives and returns a Vertex struct. - * - * @see {@link p5.baseMaterialShader} - * @see {@link p5.Shader#modify} + * @param {function} callback + * A callback function which receives a vertex object containing position (vec3), normal (vec3), texCoord (vec2), and color (vec4) properties. The function should return the modified vertex object. * * @example *
@@ -1700,19 +1689,16 @@ if (typeof p5 !== 'undefined') { * @function combineColors * @experimental * @description - * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() and similar shader modify calls to control the final color output of a material. The callback receives a ColorComponents struct and should return an object with a `color` property ({ r, g, b }) and an `opacity` property (number). + * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives color components (baseColor, diffuse, ambientColor, ambient, specularColor, specular, emissive, opacity) and returns a vec4 for the final color. * * This hook is available in: - * - {@link p5.baseMaterialShader} - * - {@link p5.baseNormalShader} - * - {@link p5.baseColorShader} - * - {@link p5.baseStrokeShader} - * - * @param {function(ColorComponents): { color: {r: number, g: number, b: number}, opacity: number }} callback - * A callback function which receives a ColorComponents struct and returns the final color and opacity. + * - baseMaterialShader() + * - baseNormalShader() + * - baseColorShader() + * - baseStrokeShader() * - * @see {@link p5.baseMaterialShader} - * @see {@link p5.Shader#modify} + * @param {function} callback + * A callback function which receives color components (baseColor, diffuse, ambientColor, ambient, specularColor, specular, emissive, opacity) and returns a vec4 for the final color. * * @example *
@@ -1723,21 +1709,20 @@ if (typeof p5 !== 'undefined') { * myShader = baseMaterialShader().modify(() => { * combineColors(components => { * // Custom color combination: add a red tint - * let color = { - * r: components.baseColor.r * components.diffuse.r + - * components.ambientColor.r * components.ambient.r + - * components.specularColor.r * components.specular.r + - * components.emissive.r + 0.2, - * g: components.baseColor.g * components.diffuse.g + - * components.ambientColor.g * components.ambient.g + - * components.specularColor.g * components.specular.g + - * components.emissive.g, - * b: components.baseColor.b * components.diffuse.b + - * components.ambientColor.b * components.ambient.b + - * components.specularColor.b * components.specular.b + - * components.emissive.b - * }; - * return { color, opacity: components.opacity }; + * let r = components.baseColor.r * components.diffuse.r + + * components.ambientColor.r * components.ambient.r + + * components.specularColor.r * components.specular.r + + * components.emissive.r + 0.2; + * let g = components.baseColor.g * components.diffuse.g + + * components.ambientColor.g * components.ambient.g + + * components.specularColor.g * components.specular.g + + * components.emissive.g; + * let b = components.baseColor.b * components.diffuse.b + + * components.ambientColor.b * components.ambient.b + + * components.specularColor.b * components.specular.b + + * components.emissive.b; + * let a = components.opacity; + * return vec4(r, g, b, a); * }); * }); * } @@ -1757,20 +1742,17 @@ if (typeof p5 !== 'undefined') { * @function getPointSize * @experimental * @description - * Registers a callback to modify the size of points when rendering with a shader. This hook can be used inside {@link p5.baseMaterialShader}.modify() or similar, when drawing points (e.g., with the point() function in WEBGL mode). The callback receives the current point size (number) and should return the new size (number). + * Registers a callback to modify the size of points when rendering with a shader. This hook can be used inside baseMaterialShader().modify() or similar, when drawing points (e.g., with the point() function in WEBGL mode). The callback receives the current point size (number) and should return the new size (number). * * This hook is available in: - * - {@link p5.baseMaterialShader} - * - {@link p5.baseNormalShader} - * - {@link p5.baseColorShader} - * - {@link p5.baseStrokeShader} + * - baseMaterialShader() + * - baseNormalShader() + * - baseColorShader() + * - baseStrokeShader() * - * @param {function(size: number): number} callback + * @param {function} callback * A callback function which receives and returns the point size. * - * @see {@link p5.baseMaterialShader} - * @see {@link p5.Shader#modify} - * * @example *
* From 06cf6197042b0ea31f0579e5ecddfd6592982a09 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Wed, 9 Jul 2025 20:06:27 +0530 Subject: [PATCH 04/16] docs: clarify combineColors and getPointSize documentation per maintainer feedback --- src/webgl/ShaderGenerator.js | 55 +++++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index afb492e757..ff000d5ce2 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1689,7 +1689,18 @@ if (typeof p5 !== 'undefined') { * @function combineColors * @experimental * @description - * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives color components (baseColor, diffuse, ambientColor, ambient, specularColor, specular, emissive, opacity) and returns a vec4 for the final color. + * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties: + * + * - `baseColor`: a vector with three components representing the base color (red, green, blue) + * - `diffuse`: a single number representing the diffuse reflection + * - `ambientColor`: a vector with three components representing the ambient color + * - `ambient`: a single number representing the ambient reflection + * - `specularColor`: a vector with three components representing the specular color + * - `specular`: a single number representing the specular reflection + * - `emissive`: a vector with three components representing the emissive color + * - `opacity`: a single number representing the opacity + * + * The callback should return a vector with four components (red, green, blue, alpha) for the final color. * * This hook is available in: * - baseMaterialShader() @@ -1698,7 +1709,7 @@ if (typeof p5 !== 'undefined') { * - baseStrokeShader() * * @param {function} callback - * A callback function which receives color components (baseColor, diffuse, ambientColor, ambient, specularColor, specular, emissive, opacity) and returns a vec4 for the final color. + * A callback function which receives the object described above and returns a vector with four components for the final color. * * @example *
@@ -1709,20 +1720,19 @@ if (typeof p5 !== 'undefined') { * myShader = baseMaterialShader().modify(() => { * combineColors(components => { * // Custom color combination: add a red tint - * let r = components.baseColor.r * components.diffuse.r + - * components.ambientColor.r * components.ambient.r + - * components.specularColor.r * components.specular.r + - * components.emissive.r + 0.2; - * let g = components.baseColor.g * components.diffuse.g + - * components.ambientColor.g * components.ambient.g + - * components.specularColor.g * components.specular.g + - * components.emissive.g; - * let b = components.baseColor.b * components.diffuse.b + - * components.ambientColor.b * components.ambient.b + - * components.specularColor.b * components.specular.b + - * components.emissive.b; - * let a = components.opacity; - * return vec4(r, g, b, a); + * let r = components.baseColor[0] * components.diffuse + + * components.ambientColor[0] * components.ambient + + * components.specularColor[0] * components.specular + + * components.emissive[0] + 0.2; + * let g = components.baseColor[1] * components.diffuse + + * components.ambientColor[1] * components.ambient + + * components.specularColor[1] * components.specular + + * components.emissive[1]; + * let b = components.baseColor[2] * components.diffuse + + * components.ambientColor[2] * components.ambient + + * components.specularColor[2] * components.specular + + * components.emissive[2]; + * return [r, g, b, components.opacity]; * }); * }); * } @@ -1742,13 +1752,24 @@ if (typeof p5 !== 'undefined') { * @function getPointSize * @experimental * @description - * Registers a callback to modify the size of points when rendering with a shader. This hook can be used inside baseMaterialShader().modify() or similar, when drawing points (e.g., with the point() function in WEBGL mode). The callback receives the current point size (number) and should return the new size (number). + * Registers a callback to modify the size of points when rendering with a shader. + * + * This hook can be used inside the following shader modify functions: + * - baseMaterialShader().modify() + * - baseNormalShader().modify() + * - baseColorShader().modify() + * - baseStrokeShader().modify() + * - baseFilterShader().modify() + * + * Use this hook when drawing points (for example, with the point() function in WEBGL mode). + * The callback receives the current point size (number) and should return the new size (number). * * This hook is available in: * - baseMaterialShader() * - baseNormalShader() * - baseColorShader() * - baseStrokeShader() + * - baseFilterShader() * * @param {function} callback * A callback function which receives and returns the point size. From 1d01ca8f085677adc172263b81ef1e4528577ac0 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Thu, 10 Jul 2025 12:07:28 +0530 Subject: [PATCH 05/16] docs: remove getPointSize documentation as it is not present in public shaders --- src/webgl/ShaderGenerator.js | 52 +----------------------------------- 1 file changed, 1 insertion(+), 51 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index ff000d5ce2..5fa695d4a9 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1746,54 +1746,4 @@ if (typeof p5 !== 'undefined') { * } * *
- */ - -/** - * @function getPointSize - * @experimental - * @description - * Registers a callback to modify the size of points when rendering with a shader. - * - * This hook can be used inside the following shader modify functions: - * - baseMaterialShader().modify() - * - baseNormalShader().modify() - * - baseColorShader().modify() - * - baseStrokeShader().modify() - * - baseFilterShader().modify() - * - * Use this hook when drawing points (for example, with the point() function in WEBGL mode). - * The callback receives the current point size (number) and should return the new size (number). - * - * This hook is available in: - * - baseMaterialShader() - * - baseNormalShader() - * - baseColorShader() - * - baseStrokeShader() - * - baseFilterShader() - * - * @param {function} callback - * A callback function which receives and returns the point size. - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseMaterialShader().modify(() => { - * getPointSize(size => { - * // Make points pulse in size over time - * return size * (1.0 + 0.5 * sin(millis() * 0.002)); - * }); - * }); - * } - * function draw() { - * background(255); - * shader(myShader); - * strokeWeight(20); - * stroke('blue'); - * point(0, 0); - * } - * - *
- */ + */ \ No newline at end of file From e73b52431c1ba48d05d406e7f33d5c3aa2032f73 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Fri, 11 Jul 2025 14:02:41 +0530 Subject: [PATCH 06/16] Add documentation for remaining public shader hooks in ShaderGenerator.js --- src/webgl/ShaderGenerator.js | 339 ++++++++++++++++++++++++++++++++++- 1 file changed, 333 insertions(+), 6 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 5fa695d4a9..999152e56b 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1644,9 +1644,8 @@ if (typeof p5 !== 'undefined') { /* ------------------------------------------------------------- */ /** * @function getWorldInputs - * @experimental * @description - * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside baseMaterialShader().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. + * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside baseColorShader().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. * * This hook is available in: * - baseMaterialShader() @@ -1687,7 +1686,6 @@ if (typeof p5 !== 'undefined') { /** * @function combineColors - * @experimental * @description * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties: * @@ -1704,9 +1702,6 @@ if (typeof p5 !== 'undefined') { * * This hook is available in: * - baseMaterialShader() - * - baseNormalShader() - * - baseColorShader() - * - baseStrokeShader() * * @param {function} callback * A callback function which receives the object described above and returns a vector with four components for the final color. @@ -1746,4 +1741,336 @@ if (typeof p5 !== 'undefined') { * } * *
+ */ + +/** + * @function beforeVertex + * @description + * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which is called before each vertex is processed. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * beforeVertex(() => { + * // Set up a variable for later use + * let wave = sin(millis() * 0.001); + * }); + * }); + * } + * + *
+ */ + +/** + * @function getObjectInputs + * @description + * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an object with the following properties: + * - `position`: `[x, y, z]` — the original position of the vertex + * - `normal`: `[x, y, z]` — the direction the surface is facing + * - `texCoord`: `[u, v]` — the texture coordinates + * - `color`: `[r, g, b, a]` — the color of the vertex + * + * Return the modified object to update the vertex. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives the vertex object and should return it after making any changes. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * getObjectInputs(inputs => { + * // Raise all vertices by 10 units + * inputs.position[1] += 10; + * return inputs; + * }); + * }); + * } + * + *
+ */ + +/** + * @function getCameraInputs + * @description + * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: + * - `position`: `[x, y, z]` — the position after camera transformation + * - `normal`: `[x, y, z]` — the normal after camera transformation + * - `texCoord`: `[u, v]` — the texture coordinates + * - `color`: `[r, g, b, a]` — the color of the vertex + * + * Return the modified object to update the vertex. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives the vertex object and should return it after making any changes. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * getCameraInputs(inputs => { + * // Tint all vertices blue + * inputs.color[2] = 1.0; + * return inputs; + * }); + * }); + * } + * + *
+ */ + +/** + * @function afterVertex + * @description + * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which is called after each vertex is processed. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * afterVertex(() => { + * // Example: store the y position for use in the fragment shader + * myVarying = position.y; + * }); + * }); + * } + * + *
+ */ + +/** + * @function beforeFragment + * @description + * Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every pixel before color calculations begin. The callback receives no arguments. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which is called before each fragment is processed. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * beforeFragment(() => { + * // Set up a variable for later use + * let brightness = 0.5; + * }); + * }); + * } + * + *
+ */ + +/** + * @function getPixelInputs + * @description + * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to change opacity or other per-pixel properties. The callback receives an object with the following properties: + * - `opacity`: a number between 0 and 1 for the pixel's transparency + * (Other properties may be available depending on the shader.) + * + * Return the modified object to update the fragment. + * + * This hook is available in: + * - baseMaterialShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives the fragment inputs object and should return it after making any changes. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseMaterialShader().modify(() => { + * getPixelInputs(inputs => { + * // Make the fragment half as opaque + * inputs.opacity *= 0.5; + * return inputs; + * }); + * }); + * } + * + *
+ */ + +/** + * @function shouldDiscard + * @description + * Registers a callback to decide whether to discard (skip drawing) a fragment (pixel) in the fragment shader. This hook can be used inside baseStrokeShader().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 + * + * Return true to discard the fragment, or false to keep it. + * + * This hook is available in: + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives a boolean and should return a boolean. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseStrokeShader().modify(() => { + * shouldDiscard(willDiscard => { + * // Never discard any fragments + * return false; + * }); + * }); + * } + * + *
+ */ + +/** + * @function 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 baseColorShader().modify() and similar shader modify calls to adjust the color before it appears on the screen. The callback receives a color array: + * - `[r, g, b, a]`: the current color (red, green, blue, alpha) + * + * Return a new color array to change the output color. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives the color array and should return a color array. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * getFinalColor(color => { + * // Make the output color fully opaque + * color[3] = 1.0; + * return color; + * }); + * }); + * } + * + *
+ */ + +/** + * @function afterFragment + * @description + * Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final per-pixel effects after all color calculations are done. The callback receives no arguments. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which is called after each fragment is processed. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * afterFragment(() => { + * // Example: darken the final color of each pixel + * finalColor.rgb *= 0.8; + * }); + * }); + * } + * + *
+ */ + +/** + * @function getColor + * @description + * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: + * - `inputs`: an object with properties like `texCoord`, `canvasSize`, `texelSize`, etc. + * - `canvasContent`: a sampler2D texture with the sketch's contents before the filter is applied + * + * Return a color array `[r, g, b, a]` for the pixel. + * + * This hook is available in: + * - baseFilterShader() + * + * @param {function} callback + * A callback function which receives the inputs object and canvasContent, and should return a color array. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseFilterShader().modify(() => { + * getColor((inputs, canvasContent) => { + * // Return the original color + * return getTexture(canvasContent, inputs.texCoord); + * }); + * }); + * } + * + *
*/ \ No newline at end of file From 6b54ecdfb9a056b6fdd8c8cfcd39fdf062920120 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Thu, 17 Jul 2025 13:34:47 +0530 Subject: [PATCH 07/16] Address maintainer feedback: update shader hook docs and examples for clarity and consistency --- src/webgl/ShaderGenerator.js | 315 ++++++++++++++++++++--------------- 1 file changed, 178 insertions(+), 137 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 999152e56b..94c1674673 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1664,10 +1664,9 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseMaterialShader().modify(() => { * getWorldInputs(inputs => { - * // Move the vertex up and down in a wave - * inputs.position.y += 20 * sin( - * millis() * 0.001 + inputs.position.x * 0.05 - * ); + * // 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 += 20 * sin(millis() * 0.001 + inputs.position.x * 0.05); * return inputs; * }); * }); @@ -1714,19 +1713,19 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseMaterialShader().modify(() => { * combineColors(components => { - * // Custom color combination: add a red tint - * let r = components.baseColor[0] * components.diffuse + - * components.ambientColor[0] * components.ambient + - * components.specularColor[0] * components.specular + - * components.emissive[0] + 0.2; - * let g = components.baseColor[1] * components.diffuse + - * components.ambientColor[1] * components.ambient + - * components.specularColor[1] * components.specular + - * components.emissive[1]; - * let b = components.baseColor[2] * components.diffuse + - * components.ambientColor[2] * components.ambient + - * components.specularColor[2] * components.specular + - * components.emissive[2]; + * // Custom color combination: add a red tint using vector properties + * let r = components.baseColor.r * components.diffuse + + * components.ambientColor.r * components.ambient + + * components.specularColor.r * components.specular + + * components.emissive.r + 0.2; + * let g = components.baseColor.g * components.diffuse + + * components.ambientColor.g * components.ambient + + * components.specularColor.g * components.specular + + * components.emissive.g; + * let b = components.baseColor.b * components.diffuse + + * components.ambientColor.b * components.ambient + + * components.specularColor.b * components.specular + + * components.emissive.b; * return [r, g, b, components.opacity]; * }); * }); @@ -1748,80 +1747,7 @@ if (typeof p5 !== 'undefined') { * @description * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. * - * This hook is available in: - * - baseColorShader() - * - baseMaterialShader() - * - baseNormalShader() - * - baseStrokeShader() - * - * @param {function} callback - * A callback function which is called before each vertex is processed. - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseColorShader().modify(() => { - * beforeVertex(() => { - * // Set up a variable for later use - * let wave = sin(millis() * 0.001); - * }); - * }); - * } - * - *
- */ - -/** - * @function getObjectInputs - * @description - * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an object with the following properties: - * - `position`: `[x, y, z]` — the original position of the vertex - * - `normal`: `[x, y, z]` — the direction the surface is facing - * - `texCoord`: `[u, v]` — the texture coordinates - * - `color`: `[r, g, b, a]` — the color of the vertex - * - * Return the modified object to update the vertex. - * - * This hook is available in: - * - baseColorShader() - * - baseMaterialShader() - * - baseNormalShader() - * - baseStrokeShader() - * - * @param {function} callback - * A callback function which receives the vertex object and should return it after making any changes. - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseColorShader().modify(() => { - * getObjectInputs(inputs => { - * // Raise all vertices by 10 units - * inputs.position[1] += 10; - * return inputs; - * }); - * }); - * } - * - *
- */ - -/** - * @function getCameraInputs - * @description - * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: - * - `position`: `[x, y, z]` — the position after camera transformation - * - `normal`: `[x, y, z]` — the normal after camera transformation - * - `texCoord`: `[u, v]` — the texture coordinates - * - `color`: `[r, g, b, a]` — the color of the vertex - * - * Return the modified object to update the vertex. + * Note: This hook is currently limited to per-vertex operations; storing variables for later use is not supported. * * This hook is available in: * - baseColorShader() @@ -1830,24 +1756,7 @@ if (typeof p5 !== 'undefined') { * - baseStrokeShader() * * @param {function} callback - * A callback function which receives the vertex object and should return it after making any changes. - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseColorShader().modify(() => { - * getCameraInputs(inputs => { - * // Tint all vertices blue - * inputs.color[2] = 1.0; - * return inputs; - * }); - * }); - * } - * - *
+ * A callback function which is called before each vertex is processed. */ /** @@ -1855,6 +1764,8 @@ if (typeof p5 !== 'undefined') { * @description * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. * + * Note: This hook is currently limited to per-vertex operations; storing variables for later use is not supported. + * * This hook is available in: * - baseColorShader() * - baseMaterialShader() @@ -1863,22 +1774,6 @@ if (typeof p5 !== 'undefined') { * * @param {function} callback * A callback function which is called after each vertex is processed. - * - * @example - *
- * - * let myShader; - * function setup() { - * createCanvas(200, 200, WEBGL); - * myShader = baseColorShader().modify(() => { - * afterVertex(() => { - * // Example: store the y position for use in the fragment shader - * myVarying = position.y; - * }); - * }); - * } - * - *
*/ /** @@ -1903,11 +1798,23 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseColorShader().modify(() => { * beforeFragment(() => { - * // Set up a variable for later use - * let brightness = 0.5; + * // Set a value for use in getFinalColor + * this.brightness = 0.5 + 0.5 * sin(millis() * 0.001); + * }); + * getFinalColor(color => { + * // Use the value set in beforeFragment to tint the color + * color[0] *= this.brightness; // Tint red channel + * return color; * }); * }); * } + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * fill('teal'); + * box(100); + * } * *
*/ @@ -1917,7 +1824,7 @@ if (typeof p5 !== 'undefined') { * @description * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to change opacity or other per-pixel properties. The callback receives an object with the following properties: * - `opacity`: a number between 0 and 1 for the pixel's transparency - * (Other properties may be available depending on the shader.) + * - (Other properties may be available depending on the shader.) * * Return the modified object to update the fragment. * @@ -1936,12 +1843,20 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseMaterialShader().modify(() => { * getPixelInputs(inputs => { - * // Make the fragment half as opaque - * inputs.opacity *= 0.5; + * // Animate opacity based on x position + * inputs.opacity = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + millis() * 0.002); * return inputs; * }); * }); * } + * function draw() { + * background(240); + * shader(myShader); + * lights(); + * noStroke(); + * fill('purple'); + * sphere(50); + * } * *
*/ @@ -1968,11 +1883,17 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseStrokeShader().modify(() => { * shouldDiscard(willDiscard => { - * // Never discard any fragments - * return false; + * // Discard fragments outside a circular region + * return willDiscard || (inputs.position.x * inputs.position.x + inputs.position.y * inputs.position.y > 2500.0); * }); * }); * } + * function draw() { + * background(255); + * strokeShader(myShader); + * strokeWeight(30); + * line(-width/3, 0, width/3, 0); + * } * * */ @@ -2002,12 +1923,20 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseColorShader().modify(() => { * getFinalColor(color => { - * // Make the output color fully opaque + * // Make the output color fully opaque and add a green tint * color[3] = 1.0; + * color[1] += 0.2; * return color; * }); * }); * } + * function draw() { + * background(230); + * shader(myShader); + * noStroke(); + * fill('green'); + * circle(0, 0, 100); + * } * * */ @@ -2033,12 +1962,24 @@ if (typeof p5 !== 'undefined') { * function setup() { * createCanvas(200, 200, WEBGL); * myShader = baseColorShader().modify(() => { + * getFinalColor(color => { + * // Add a purple tint to the color + * color[2] += 0.2; + * return color; + * }); * afterFragment(() => { - * // Example: darken the final color of each pixel - * finalColor.rgb *= 0.8; + * // This hook runs after the final color is set for each fragment. + * // You could use this for debugging or advanced effects. * }); * }); * } + * function draw() { + * background(240); + * shader(myShader); + * noStroke(); + * fill('purple'); + * sphere(60); + * } * * */ @@ -2066,11 +2007,111 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseFilterShader().modify(() => { * getColor((inputs, canvasContent) => { - * // Return the original color - * return getTexture(canvasContent, inputs.texCoord); + * // Warp the texture coordinates for a wavy effect + * let warped = [inputs.texCoord.x, inputs.texCoord.y + 0.1 * sin(inputs.texCoord.x * 10.0)]; + * return getTexture(canvasContent, warped); * }); * }); * } + * function draw() { + * background(180); + * // Draw something to the canvas + * fill('yellow'); + * ellipse(0, 0, 150, 150); + * filter(myShader); + * } + * + * + */ + +/** + * @function getObjectInputs + * @description + * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an 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) + * + * Return the modified object to update the vertex. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives the vertex object and should return it after making any changes. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * getObjectInputs(inputs => { + * // Create a sine wave along the x axis in object space + * inputs.position.y += 20 * sin(inputs.position.x * 0.1 + millis() * 0.002); + * return inputs; + * }); + * }); + * } + * function draw() { + * background(220); + * shader(myShader); + * noStroke(); + * fill('orange'); + * box(100); + * } + * + *
+ */ + +/** + * @function getCameraInputs + * @description + * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: + * - `position`: a vector with three components representing the position after camera transformation + * - `normal`: a vector with three components representing the normal after camera transformation + * - `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) + * + * Return the modified object to update the vertex. + * + * This hook is available in: + * - baseColorShader() + * - baseMaterialShader() + * - baseNormalShader() + * - baseStrokeShader() + * + * @param {function} callback + * A callback function which receives the vertex object and should return it after making any changes. + * + * @example + *
+ * + * let myShader; + * function setup() { + * createCanvas(200, 200, WEBGL); + * myShader = baseColorShader().modify(() => { + * getCameraInputs(inputs => { + * // Move vertices in camera space based on their x position + * inputs.position.y += 30 * sin(inputs.position.x * 0.05 + millis() * 0.001); + * // Tint all vertices blue + * inputs.color.b = 1.0; + * return inputs; + * }); + * }); + * } + * function draw() { + * background(200); + * shader(myShader); + * noStroke(); + * fill('blue'); + * box(100); + * } * *
*/ \ No newline at end of file From 1146190a6d82773f8095029dbc5d2819214400a4 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Thu, 7 Aug 2025 15:04:20 +0530 Subject: [PATCH 08/16] Update ShaderGenerator docs and examples --- src/webgl/ShaderGenerator.js | 56 ++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 94c1674673..30be8fb75d 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1,6 +1,6 @@ /** * @module 3D -* @submodule ShaderGenerator +* @submodule Material * @for p5 * @requires core */ @@ -1643,7 +1643,7 @@ if (typeof p5 !== 'undefined') { /* ------------------------------------------------------------- */ /** - * @function getWorldInputs + * @method getWorldInputs * @description * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside baseColorShader().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. * @@ -1666,7 +1666,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 += 20 * sin(millis() * 0.001 + inputs.position.x * 0.05); + * let t = uniformFloat(() => millis()); + * inputs.position.y += 20 * sin(t * 0.001 + inputs.position.x * 0.05); * return inputs; * }); * }); @@ -1684,7 +1685,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function combineColors + * @method combineColors * @description * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties: * @@ -1743,7 +1744,8 @@ if (typeof p5 !== 'undefined') { */ /** - * @function beforeVertex + * @method beforeVertex + * @private * @description * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. * @@ -1760,7 +1762,8 @@ if (typeof p5 !== 'undefined') { */ /** - * @function afterVertex + * @method afterVertex + * @private * @description * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. * @@ -1777,7 +1780,8 @@ if (typeof p5 !== 'undefined') { */ /** - * @function beforeFragment + * @method beforeFragment + * @private * @description * Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every pixel before color calculations begin. The callback receives no arguments. * @@ -1803,7 +1807,7 @@ if (typeof p5 !== 'undefined') { * }); * getFinalColor(color => { * // Use the value set in beforeFragment to tint the color - * color[0] *= this.brightness; // Tint red channel + * color.r *= this.brightness; // Tint red channel * return color; * }); * }); @@ -1820,7 +1824,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function getPixelInputs + * @method getPixelInputs * @description * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to change opacity or other per-pixel properties. The callback receives an object with the following properties: * - `opacity`: a number between 0 and 1 for the pixel's transparency @@ -1844,7 +1848,8 @@ if (typeof p5 !== 'undefined') { * myShader = baseMaterialShader().modify(() => { * getPixelInputs(inputs => { * // Animate opacity based on x position - * inputs.opacity = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + millis() * 0.002); + * let t = uniformFloat(() => millis()); + * inputs.opacity = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + t * 0.002); * return inputs; * }); * }); @@ -1862,7 +1867,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function shouldDiscard + * @method shouldDiscard * @description * Registers a callback to decide whether to discard (skip drawing) a fragment (pixel) in the fragment shader. This hook can be used inside baseStrokeShader().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 @@ -1899,7 +1904,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function getFinalColor + * @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 baseColorShader().modify() and similar shader modify calls to adjust the color before it appears on the screen. The callback receives a color array: * - `[r, g, b, a]`: the current color (red, green, blue, alpha) @@ -1924,8 +1929,8 @@ if (typeof p5 !== 'undefined') { * myShader = baseColorShader().modify(() => { * getFinalColor(color => { * // Make the output color fully opaque and add a green tint - * color[3] = 1.0; - * color[1] += 0.2; + * color.a = 1; + * color.g += 0.2; * return color; * }); * }); @@ -1942,7 +1947,8 @@ if (typeof p5 !== 'undefined') { */ /** - * @function afterFragment + * @method afterFragment + * @private * @description * Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final per-pixel effects after all color calculations are done. The callback receives no arguments. * @@ -1964,7 +1970,7 @@ if (typeof p5 !== 'undefined') { * myShader = baseColorShader().modify(() => { * getFinalColor(color => { * // Add a purple tint to the color - * color[2] += 0.2; + * color.b += 0.2; * return color; * }); * afterFragment(() => { @@ -1985,7 +1991,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function getColor + * @method getColor * @description * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: * - `inputs`: an object with properties like `texCoord`, `canvasSize`, `texelSize`, etc. @@ -2017,7 +2023,7 @@ if (typeof p5 !== 'undefined') { * background(180); * // Draw something to the canvas * fill('yellow'); - * ellipse(0, 0, 150, 150); + * circle(0, 0, 150); * filter(myShader); * } * @@ -2025,7 +2031,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function getObjectInputs + * @method getObjectInputs * @description * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an object with the following properties: * - `position`: a vector with three components representing the original position of the vertex @@ -2053,7 +2059,8 @@ if (typeof p5 !== 'undefined') { * myShader = baseColorShader().modify(() => { * getObjectInputs(inputs => { * // Create a sine wave along the x axis in object space - * inputs.position.y += 20 * sin(inputs.position.x * 0.1 + millis() * 0.002); + * let t = uniformFloat(() => millis()); + * inputs.position.y += 20 * sin(inputs.position.x * 0.1 + t * 0.002); * return inputs; * }); * }); @@ -2070,7 +2077,7 @@ if (typeof p5 !== 'undefined') { */ /** - * @function getCameraInputs + * @method getCameraInputs * @description * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: * - `position`: a vector with three components representing the position after camera transformation @@ -2098,9 +2105,10 @@ if (typeof p5 !== 'undefined') { * myShader = baseColorShader().modify(() => { * getCameraInputs(inputs => { * // Move vertices in camera space based on their x position - * inputs.position.y += 30 * sin(inputs.position.x * 0.05 + millis() * 0.001); + * let t = uniformFloat(() => millis()); + * inputs.position.y += 30 * sin(inputs.position.x * 0.05 + t * 0.001); * // Tint all vertices blue - * inputs.color.b = 1.0; + * inputs.color.b = 1; * return inputs; * }); * }); @@ -2110,7 +2118,7 @@ if (typeof p5 !== 'undefined') { * shader(myShader); * noStroke(); * fill('blue'); - * box(100); + * sphere(100); * } * * From 36c4c2d7c722b8432aa7d3d525acba7a80e5df75 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Fri, 8 Aug 2025 20:47:13 +0530 Subject: [PATCH 09/16] Address maintainer feedback: Update ShaderGenerator docs and examples --- src/webgl/ShaderGenerator.js | 59 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 30be8fb75d..e59ae0e220 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1663,11 +1663,11 @@ if (typeof p5 !== 'undefined') { * function setup() { * createCanvas(200, 200, WEBGL); * myShader = baseMaterialShader().modify(() => { + * let t = uniformFloat(() => millis()); * 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 - * let t = uniformFloat(() => millis()); - * inputs.position.y += 20 * sin(t * 0.001 + inputs.position.x * 0.05); + * inputs.position.y += 0.5 * sin(t * 0.001 + inputs.position.x * 0.05); * return inputs; * }); * }); @@ -1714,20 +1714,15 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseMaterialShader().modify(() => { * combineColors(components => { - * // Custom color combination: add a red tint using vector properties - * let r = components.baseColor.r * components.diffuse + - * components.ambientColor.r * components.ambient + - * components.specularColor.r * components.specular + - * components.emissive.r + 0.2; - * let g = components.baseColor.g * components.diffuse + - * components.ambientColor.g * components.ambient + - * components.specularColor.g * components.specular + - * components.emissive.g; - * let b = components.baseColor.b * components.diffuse + - * components.ambientColor.b * components.ambient + - * components.specularColor.b * components.specular + - * components.emissive.b; - * return [r, g, b, components.opacity]; + * // Custom color combination: add a green tint using vector properties + * return [ + * components.baseColor * components.diffuse + + * components.ambientColor * components.ambient + + * components.specularColor * components.specular + + * components.emissive + + * [0, 0.2, 0], // Green tint for visibility + * components.opacity + * ]; * }); * }); * } @@ -1846,10 +1841,12 @@ if (typeof p5 !== 'undefined') { * function setup() { * createCanvas(200, 200, WEBGL); * myShader = baseMaterialShader().modify(() => { + * let t = uniformFloat(() => millis()); * getPixelInputs(inputs => { - * // Animate opacity based on x position - * let t = uniformFloat(() => millis()); - * inputs.opacity = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + t * 0.002); + * // 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); + * } * return inputs; * }); * }); @@ -1888,9 +1885,8 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseStrokeShader().modify(() => { * shouldDiscard(willDiscard => { - * // Discard fragments outside a circular region - * return willDiscard || (inputs.position.x * inputs.position.x + inputs.position.y * inputs.position.y > 2500.0); - * }); + * // Discard fragments based only on the default logic + * return willDiscard; * }); * } * function draw() { @@ -1906,7 +1902,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 baseColorShader().modify() and similar shader modify calls to adjust the color before it appears on the screen. The callback receives a color array: + * 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 baseColorShader().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) * * Return a new color array to change the output color. @@ -1929,8 +1925,8 @@ if (typeof p5 !== 'undefined') { * myShader = baseColorShader().modify(() => { * getFinalColor(color => { * // Make the output color fully opaque and add a green tint - * color.a = 1; - * color.g += 0.2; + * // Add a blue tint to the output color + * color.b += 0.2; * return color; * }); * }); @@ -1994,10 +1990,15 @@ if (typeof p5 !== 'undefined') { * @method getColor * @description * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: - * - `inputs`: an object with properties like `texCoord`, `canvasSize`, `texelSize`, etc. + * - `inputs`: an object with the following properties: + * - `texCoord`: a vec2 representing the texture coordinates of the pixel + * - `canvasSize`: a vec2 representing the size of the canvas in pixels + * - `texelSize`: a vec2 representing the size of a single texel (pixel) in texture space + * - `color`: a vec4 representing the color of the pixel before the filter is applied + * - (other properties may be available depending on the shader) * - `canvasContent`: a sampler2D texture with the sketch's contents before the filter is applied * - * Return a color array `[r, g, b, a]` for the pixel. + * Return a four component vector `[r, g, b, a]` for the pixel. * * This hook is available in: * - baseFilterShader() @@ -2057,10 +2058,10 @@ if (typeof p5 !== 'undefined') { * function setup() { * createCanvas(200, 200, WEBGL); * myShader = baseColorShader().modify(() => { + * let t = uniformFloat(() => millis()); * getObjectInputs(inputs => { * // Create a sine wave along the x axis in object space - * let t = uniformFloat(() => millis()); - * inputs.position.y += 20 * sin(inputs.position.x * 0.1 + t * 0.002); + * inputs.position.y += 0.5 * sin(inputs.position.x * 0.1 + t * 0.002); * return inputs; * }); * }); From 6e1311db22b947f6472cfbc49244924067043ac4 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Fri, 8 Aug 2025 22:23:42 +0530 Subject: [PATCH 10/16] Fix shouldDiscard example --- src/webgl/ShaderGenerator.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index e59ae0e220..d1dab043e1 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1883,10 +1883,8 @@ if (typeof p5 !== 'undefined') { * let myShader; * function setup() { * createCanvas(200, 200, WEBGL); - * myShader = baseStrokeShader().modify(() => { - * shouldDiscard(willDiscard => { - * // Discard fragments based only on the default logic - * return willDiscard; + * myShader = baseStrokeShader().modify({ + * 'bool shouldDiscard': '(bool outside) { return outside; }' * }); * } * function draw() { From 58d8e5d280b736e86212616bfb70fa4f6888c187 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Fri, 8 Aug 2025 22:47:09 +0530 Subject: [PATCH 11/16] Fix getPixelInputs description and getFinalColor example --- src/webgl/ShaderGenerator.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index d1dab043e1..a32aeadf1e 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1821,9 +1821,23 @@ if (typeof p5 !== 'undefined') { /** * @method getPixelInputs * @description - * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to change opacity or other per-pixel properties. The callback receives an object with the following properties: - * - `opacity`: a number between 0 and 1 for the pixel's transparency - * - (Other properties may be available depending on the shader.) + * Registers a callback to modify per-fragment inputs before the final color is computed in the fragment shader. The available properties differ by shader: + * - For baseMaterialShader(): + * - `normal` (vec3): surface normal + * - `texCoord` (vec2): texture coordinates + * - `ambientLight` (vec3): ambient light color + * - `ambientMaterial` (vec3): ambient material color + * - `specularMaterial` (vec3): specular material color + * - `emissiveMaterial` (vec3): emissive material color + * - `color` (vec4): base color (unpremultiplied) + * - `shininess` (float) + * - `metalness` (float) + * - For baseStrokeShader(): + * - `color` (vec4): base color + * - `tangent` (vec2): tangent direction + * - `center` (vec2): stroke center for the current fragment + * - `position` (vec2): fragment position in stroke space + * - `strokeWeight` (float) * * Return the modified object to update the fragment. * @@ -1922,7 +1936,6 @@ if (typeof p5 !== 'undefined') { * createCanvas(200, 200, WEBGL); * myShader = baseColorShader().modify(() => { * getFinalColor(color => { - * // Make the output color fully opaque and add a green tint * // Add a blue tint to the output color * color.b += 0.2; * return color; From 483edcb3fba7276c719144a9792d4ee369792c6d Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Fri, 8 Aug 2025 23:03:11 +0530 Subject: [PATCH 12/16] Fix getPixelInputs description and getColor description --- src/webgl/ShaderGenerator.js | 53 +++++++++++++++++++----------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index a32aeadf1e..6ae29cb64b 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1821,23 +1821,27 @@ if (typeof p5 !== 'undefined') { /** * @method getPixelInputs * @description - * Registers a callback to modify per-fragment inputs before the final color is computed in the fragment shader. The available properties differ by shader: - * - For baseMaterialShader(): - * - `normal` (vec3): surface normal - * - `texCoord` (vec2): texture coordinates - * - `ambientLight` (vec3): ambient light color - * - `ambientMaterial` (vec3): ambient material color - * - `specularMaterial` (vec3): specular material color - * - `emissiveMaterial` (vec3): emissive material color - * - `color` (vec4): base color (unpremultiplied) - * - `shininess` (float) - * - `metalness` (float) - * - For baseStrokeShader(): - * - `color` (vec4): base color - * - `tangent` (vec2): tangent direction - * - `center` (vec2): stroke center for the current fragment - * - `position` (vec2): fragment position in stroke space - * - `strokeWeight` (float) + * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to adjust per-pixel data before lighting/mixing. + * + * The callback receives an `Inputs` object. Available fields depend on the shader: + * + * - In baseMaterialShader(): + * - `normal`: a vector with three components representing the surface normal + * - `texCoord`: a vector with two components representing the texture coordinates (u, v) + * - `ambientLight`: a vector with three components representing the ambient light color + * - `ambientMaterial`: a vector with three components representing the material's ambient color + * - `specularMaterial`: a vector with three components representing the material's specular color + * - `emissiveMaterial`: a vector with three components representing the material's emissive color + * - `color`: a vector with four components representing the base color (red, green, blue, alpha) + * - `shininess`: a number controlling specular highlights + * - `metalness`: a number controlling the metalness factor + * + * - In baseStrokeShader(): + * - `color`: a vector with four components representing the stroke color (red, green, blue, alpha) + * - `tangent`: a vector with two components representing the stroke tangent + * - `center`: a vector with two components representing the cap/join center + * - `position`: a vector with two components representing the current fragment position + * - `strokeWeight`: a number representing the stroke weight in pixels * * Return the modified object to update the fragment. * @@ -2001,15 +2005,14 @@ if (typeof p5 !== 'undefined') { * @method getColor * @description * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: - * - `inputs`: an object with the following properties: - * - `texCoord`: a vec2 representing the texture coordinates of the pixel - * - `canvasSize`: a vec2 representing the size of the canvas in pixels - * - `texelSize`: a vec2 representing the size of a single texel (pixel) in texture space - * - `color`: a vec4 representing the color of the pixel before the filter is applied - * - (other properties may be available depending on the shader) - * - `canvasContent`: a sampler2D texture with the sketch's contents before the filter is applied + * - `inputs`: an object with the following properties: + * - `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. + * Return a four-component vector `[r, g, b, a]` for the pixel. * * This hook is available in: * - baseFilterShader() From 29fbe520ee9deaa5c7e5adc604162d98847d79ec Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Sat, 9 Aug 2025 15:24:48 +0530 Subject: [PATCH 13/16] Address Maintainer feedbacks: Update ShaderGenerator docs and examples --- src/webgl/ShaderGenerator.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 6ae29cb64b..e4b3c6ca23 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -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 baseColorShader().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. - * + * + * 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: * - baseMaterialShader() * - baseNormalShader() @@ -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; * }); * }); @@ -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; * }); * }); @@ -1875,7 +1880,7 @@ if (typeof p5 !== 'undefined') { * lights(); * noStroke(); * fill('purple'); - * sphere(50); + * circle(0, 0, 100); * } * * @@ -1883,6 +1888,7 @@ if (typeof p5 !== 'undefined') { /** * @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 baseStrokeShader().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 @@ -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 baseColorShader().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 baseColorShader().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. * @@ -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. @@ -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); * return inputs; * }); * }); @@ -2085,7 +2089,7 @@ if (typeof p5 !== 'undefined') { * shader(myShader); * noStroke(); * fill('orange'); - * box(100); + * sphere(100); * } * * From be56924f788a3667f55a9a8a3048f8752f6b69fc Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Tue, 19 Aug 2025 13:00:23 +0530 Subject: [PATCH 14/16] Address maintainer feedback by refining references, param annotations, wording, and shader examples for clarity and consistency --- src/webgl/ShaderGenerator.js | 134 ++++++++++++++++++----------------- 1 file changed, 68 insertions(+), 66 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index e4b3c6ca23..110d3b32ee 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1645,13 +1645,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 baseColorShader().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. + * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside baseColorShader().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. * * 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) + * - `position`: a three-component vector representing the original position of the vertex. + * - `normal`: a three-component vector representing the direction the surface is facing. + * - `texCoord`: a two-component vector representing the texture coordinates. + * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha). * * This hook is available in: * - baseMaterialShader() @@ -1659,7 +1659,7 @@ if (typeof p5 !== 'undefined') { * - baseColorShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives a vertex object containing position (vec3), normal (vec3), texCoord (vec2), and color (vec4) properties. The function should return the modified vertex object. * * @example @@ -1694,23 +1694,23 @@ if (typeof p5 !== 'undefined') { /** * @method combineColors * @description - * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties: + * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties: * - * - `baseColor`: a vector with three components representing the base color (red, green, blue) - * - `diffuse`: a single number representing the diffuse reflection - * - `ambientColor`: a vector with three components representing the ambient color - * - `ambient`: a single number representing the ambient reflection - * - `specularColor`: a vector with three components representing the specular color - * - `specular`: a single number representing the specular reflection - * - `emissive`: a vector with three components representing the emissive color - * - `opacity`: a single number representing the opacity + * - `baseColor`: a three-component vector representing the base color (red, green, blue). + * - `diffuse`: a single number representing the diffuse reflection. + * - `ambientColor`: a three-component vector representing the ambient color. + * - `ambient`: a single number representing the ambient reflection. + * - `specularColor`: a three-component vector representing the specular color. + * - `specular`: a single number representing the specular reflection. + * - `emissive`: a three-component vector representing the emissive color. + * - `opacity`: a single number representing the opacity. * * The callback should return a vector with four components (red, green, blue, alpha) for the final color. * * This hook is available in: * - baseMaterialShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives the object described above and returns a vector with four components for the final color. * * @example @@ -1738,7 +1738,7 @@ if (typeof p5 !== 'undefined') { * shader(myShader); * lights(); * noStroke(); - * fill('red'); + * fill('white'); * sphere(50); * } * @@ -1749,7 +1749,7 @@ if (typeof p5 !== 'undefined') { * @method beforeVertex * @private * @description - * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. + * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. * * Note: This hook is currently limited to per-vertex operations; storing variables for later use is not supported. * @@ -1759,7 +1759,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which is called before each vertex is processed. */ @@ -1767,7 +1767,7 @@ if (typeof p5 !== 'undefined') { * @method afterVertex * @private * @description - * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. + * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. * * Note: This hook is currently limited to per-vertex operations; storing variables for later use is not supported. * @@ -1777,7 +1777,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which is called after each vertex is processed. */ @@ -1785,7 +1785,7 @@ if (typeof p5 !== 'undefined') { * @method beforeFragment * @private * @description - * Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every pixel before color calculations begin. The callback receives no arguments. + * Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every pixel before color calculations begin. The callback receives no arguments. * * This hook is available in: * - baseColorShader() @@ -1793,7 +1793,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which is called before each fragment is processed. * * @example @@ -1828,27 +1828,27 @@ if (typeof p5 !== 'undefined') { /** * @method getPixelInputs * @description - * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to adjust per-pixel data before lighting/mixing. + * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to adjust per-pixel data before lighting/mixing. * * The callback receives an `Inputs` object. Available fields depend on the shader: * * - In baseMaterialShader(): - * - `normal`: a vector with three components representing the surface normal - * - `texCoord`: a vector with two components representing the texture coordinates (u, v) - * - `ambientLight`: a vector with three components representing the ambient light color - * - `ambientMaterial`: a vector with three components representing the material's ambient color - * - `specularMaterial`: a vector with three components representing the material's specular color - * - `emissiveMaterial`: a vector with three components representing the material's emissive color - * - `color`: a vector with four components representing the base color (red, green, blue, alpha) - * - `shininess`: a number controlling specular highlights - * - `metalness`: a number controlling the metalness factor + * - `normal`: a three-component vector representing the surface normal. + * - `texCoord`: a two-component vector representing the texture coordinates (u, v). + * - `ambientLight`: a three-component vector representing the ambient light color. + * - `ambientMaterial`: a three-component vector representing the material's ambient color. + * - `specularMaterial`: a three-component vector representing the material's specular color. + * - `emissiveMaterial`: a three-component vector representing the material's emissive color. + * - `color`: a four-component vector representing the base color (red, green, blue, alpha). + * - `shininess`: a number controlling specular highlights. + * - `metalness`: a number controlling the metalness factor. * * - In baseStrokeShader(): - * - `color`: a vector with four components representing the stroke color (red, green, blue, alpha) - * - `tangent`: a vector with two components representing the stroke tangent - * - `center`: a vector with two components representing the cap/join center - * - `position`: a vector with two components representing the current fragment position - * - `strokeWeight`: a number representing the stroke weight in pixels + * - `color`: a four-component vector representing the stroke color (red, green, blue, alpha). + * - `tangent`: a two-component vector representing the stroke tangent. + * - `center`: a two-component vector representing the cap/join center. + * - `position`: a two-component vector representing the current fragment position. + * - `strokeWeight`: a number representing the stroke weight in pixels. * * Return the modified object to update the fragment. * @@ -1856,7 +1856,7 @@ if (typeof p5 !== 'undefined') { * - baseMaterialShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives the fragment inputs object and should return it after making any changes. * * @example @@ -1890,7 +1890,7 @@ if (typeof p5 !== 'undefined') { * @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 baseStrokeShader().modify() and similar shader modify calls to create effects like round points or custom masking. The callback receives a boolean: + * Registers a callback to decide whether to discard (skip drawing) a fragment (pixel) in the fragment shader. This hook can be used inside baseStrokeShader().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 * * Return true to discard the fragment, or false to keep it. @@ -1898,7 +1898,7 @@ if (typeof p5 !== 'undefined') { * This hook is available in: * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives a boolean and should return a boolean. * * @example @@ -1924,7 +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 baseColorShader().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. + * 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 baseColorShader().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. * @@ -1934,7 +1934,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives the color array and should return a color array. * * @example @@ -1946,7 +1946,7 @@ if (typeof p5 !== 'undefined') { * myShader = baseColorShader().modify(() => { * getFinalColor(color => { * // Add a blue tint to the output color - * color.b += 0.2; + * color.b += 0.4; * return color; * }); * }); @@ -1966,7 +1966,7 @@ if (typeof p5 !== 'undefined') { * @method afterFragment * @private * @description - * Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final per-pixel effects after all color calculations are done. The callback receives no arguments. + * Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final per-pixel effects after all color calculations are done. The callback receives no arguments. * * This hook is available in: * - baseColorShader() @@ -1974,7 +1974,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which is called after each fragment is processed. * * @example @@ -2009,19 +2009,19 @@ if (typeof p5 !== 'undefined') { /** * @method getColor * @description - * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: + * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: * - `inputs`: an object with the following properties: - * - `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 - * - `canvasContent`: a texture containing the sketch's contents before the filter is applied + * - `texCoord`: a two-component vector representing the texture coordinates (u, v). + * - `canvasSize`: a two-component vector representing the canvas size in pixels (width, height). + * - `texelSize`: a two-component vector representing the size of a single texel in texture space. + * - `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. * * This hook is available in: * - baseFilterShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives the inputs object and canvasContent, and should return a color array. * * @example @@ -2052,11 +2052,12 @@ if (typeof p5 !== 'undefined') { /** * @method getObjectInputs * @description - * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an 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) + * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an object with the following properties: + * + * - `position`: a three-component vector representing the original position of the vertex. + * - `normal`: a three-component vector representing the direction the surface is facing. + * - `texCoord`: a two-component vector representing the texture coordinates. + * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha). * * Return the modified object to update the vertex. * @@ -2066,7 +2067,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives the vertex object and should return it after making any changes. * * @example @@ -2079,7 +2080,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 += 20 * sin(t * 0.001 + inputs.position.x * 0.05); + * inputs.position.y += 3 * sin(t * 0.001 + inputs.position.x * 0.05); * return inputs; * }); * }); @@ -2098,11 +2099,12 @@ if (typeof p5 !== 'undefined') { /** * @method getCameraInputs * @description - * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: - * - `position`: a vector with three components representing the position after camera transformation - * - `normal`: a vector with three components representing the normal after camera transformation - * - `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) + * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: + * + * - `position`: a three-component vector representing the position after camera transformation. + * - `normal`: a three-component vector representing the normal after camera transformation. + * - `texCoord`: a two-component vector representing the texture coordinates. + * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha). * * Return the modified object to update the vertex. * @@ -2112,7 +2114,7 @@ if (typeof p5 !== 'undefined') { * - baseNormalShader() * - baseStrokeShader() * - * @param {function} callback + * @param {Function} callback * A callback function which receives the vertex object and should return it after making any changes. * * @example @@ -2137,7 +2139,7 @@ if (typeof p5 !== 'undefined') { * shader(myShader); * noStroke(); * fill('blue'); - * sphere(100); + * sphere(50); * } * * From 17992d75bdd6250f1d0d011e0089af80e6839b82 Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Tue, 19 Aug 2025 13:18:37 +0530 Subject: [PATCH 15/16] updated .modify() links --- src/webgl/ShaderGenerator.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 110d3b32ee..99431e6271 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -1645,7 +1645,7 @@ 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 baseColorShader().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. + * Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside baseColorShader().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. * * The callback receives a vertex object with the following properties: * - `position`: a three-component vector representing the original position of the vertex. @@ -1694,7 +1694,7 @@ if (typeof p5 !== 'undefined') { /** * @method combineColors * @description - * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties: + * Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify() calls to control the final color output of a material. The callback receives an object with the following properties: * * - `baseColor`: a three-component vector representing the base color (red, green, blue). * - `diffuse`: a single number representing the diffuse reflection. @@ -1749,7 +1749,7 @@ if (typeof p5 !== 'undefined') { * @method beforeVertex * @private * @description - * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. + * Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify() calls to set up variables or perform calculations that affect every vertex before processing begins. The callback receives no arguments. * * Note: This hook is currently limited to per-vertex operations; storing variables for later use is not supported. * @@ -1767,7 +1767,7 @@ if (typeof p5 !== 'undefined') { * @method afterVertex * @private * @description - * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. + * Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify() calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments. * * Note: This hook is currently limited to per-vertex operations; storing variables for later use is not supported. * @@ -1785,7 +1785,7 @@ if (typeof p5 !== 'undefined') { * @method beforeFragment * @private * @description - * Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to set up variables or perform calculations that affect every pixel before color calculations begin. The callback receives no arguments. + * Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify() calls to set up variables or perform calculations that affect every pixel before color calculations begin. The callback receives no arguments. * * This hook is available in: * - baseColorShader() @@ -1828,7 +1828,7 @@ if (typeof p5 !== 'undefined') { /** * @method getPixelInputs * @description - * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify calls to adjust per-pixel data before lighting/mixing. + * Registers a callback to modify the properties of each fragment (pixel) before the final color is calculated in the fragment shader. This hook can be used inside baseMaterialShader().modify() and similar shader modify() calls to adjust per-pixel data before lighting/mixing. * * The callback receives an `Inputs` object. Available fields depend on the shader: * @@ -1890,7 +1890,7 @@ if (typeof p5 !== 'undefined') { * @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 baseStrokeShader().modify() and similar shader modify calls to create effects like round points or custom masking. The callback receives a boolean: + * Registers a callback to decide whether to discard (skip drawing) a fragment (pixel) in the fragment shader. This hook can be used inside baseStrokeShader().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 * * Return true to discard the fragment, or false to keep it. @@ -1924,7 +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 baseColorShader().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. + * 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 baseColorShader().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. * @@ -1966,7 +1966,7 @@ if (typeof p5 !== 'undefined') { * @method afterFragment * @private * @description - * Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to perform cleanup or final per-pixel effects after all color calculations are done. The callback receives no arguments. + * Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside baseColorShader().modify() and similar shader modify() calls to perform cleanup or final per-pixel effects after all color calculations are done. The callback receives no arguments. * * This hook is available in: * - baseColorShader() @@ -2009,7 +2009,7 @@ if (typeof p5 !== 'undefined') { /** * @method getColor * @description - * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments: + * Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside baseFilterShader().modify() and similar shader modify() calls to control the output color for each pixel. The callback receives the following arguments: * - `inputs`: an object with the following properties: * - `texCoord`: a two-component vector representing the texture coordinates (u, v). * - `canvasSize`: a two-component vector representing the canvas size in pixels (width, height). @@ -2052,7 +2052,7 @@ if (typeof p5 !== 'undefined') { /** * @method getObjectInputs * @description - * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to move, color, or otherwise modify the raw model data. The callback receives an object with the following properties: + * Registers a callback to modify the properties of each vertex before any transformations are applied in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify() calls to move, color, or otherwise modify the raw model data. The callback receives an object with the following properties: * * - `position`: a three-component vector representing the original position of the vertex. * - `normal`: a three-component vector representing the direction the surface is facing. @@ -2099,7 +2099,7 @@ if (typeof p5 !== 'undefined') { /** * @method getCameraInputs * @description - * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify calls to create effects that depend on the camera's view. The callback receives an object with the following properties: + * Registers a callback to adjust vertex properties after the model has been transformed by the camera, but before projection, in the vertex shader. This hook can be used inside baseColorShader().modify() and similar shader modify() calls to create effects that depend on the camera's view. The callback receives an object with the following properties: * * - `position`: a three-component vector representing the position after camera transformation. * - `normal`: a three-component vector representing the normal after camera transformation. From ff8184729ec8c40414279ded36bea5be655a678e Mon Sep 17 00:00:00 2001 From: Abhayaj247 Date: Wed, 20 Aug 2025 11:06:37 +0530 Subject: [PATCH 16/16] Address maintainer feedback by updating fill color, adjusting sphere size, and simplifying sine wave example --- src/webgl/ShaderGenerator.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/webgl/ShaderGenerator.js b/src/webgl/ShaderGenerator.js index 99431e6271..db9c3bad7b 100644 --- a/src/webgl/ShaderGenerator.js +++ b/src/webgl/ShaderGenerator.js @@ -2080,7 +2080,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 += 3 * sin(t * 0.001 + inputs.position.x * 0.05); + * inputs.position.y += sin(t * 0.001 + inputs.position.x); * return inputs; * }); * }); @@ -2090,7 +2090,7 @@ if (typeof p5 !== 'undefined') { * shader(myShader); * noStroke(); * fill('orange'); - * sphere(100); + * sphere(50); * } * * @@ -2138,7 +2138,7 @@ if (typeof p5 !== 'undefined') { * background(200); * shader(myShader); * noStroke(); - * fill('blue'); + * fill('red'); * sphere(50); * } *