Skip to content

Commit 1146190

Browse files
committed
Update ShaderGenerator docs and examples
1 parent 6b54ecd commit 1146190

File tree

1 file changed

+32
-24
lines changed

1 file changed

+32
-24
lines changed

src/webgl/ShaderGenerator.js

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @module 3D
3-
* @submodule ShaderGenerator
3+
* @submodule Material
44
* @for p5
55
* @requires core
66
*/
@@ -1643,7 +1643,7 @@ if (typeof p5 !== 'undefined') {
16431643

16441644
/* ------------------------------------------------------------- */
16451645
/**
1646-
* @function getWorldInputs
1646+
* @method getWorldInputs
16471647
* @description
16481648
* Registers a callback to modify the world-space properties of each vertex in a shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.modify() and similar shader modify calls to customize vertex positions, normals, texture coordinates, and colors before rendering. "World space" refers to the coordinate system of the 3D scene, before any camera or projection transformations are applied.
16491649
*
@@ -1666,7 +1666,8 @@ if (typeof p5 !== 'undefined') {
16661666
* getWorldInputs(inputs => {
16671667
* // Move the vertex up and down in a wave in world space
16681668
* // In world space, moving the object (e.g., with translate()) will affect these coordinates
1669-
* inputs.position.y += 20 * sin(millis() * 0.001 + inputs.position.x * 0.05);
1669+
* let t = uniformFloat(() => millis());
1670+
* inputs.position.y += 20 * sin(t * 0.001 + inputs.position.x * 0.05);
16701671
* return inputs;
16711672
* });
16721673
* });
@@ -1684,7 +1685,7 @@ if (typeof p5 !== 'undefined') {
16841685
*/
16851686

16861687
/**
1687-
* @function combineColors
1688+
* @method combineColors
16881689
* @description
16891690
* Registers a callback to customize how color components are combined in the fragment shader. This hook can be used inside <a href="#/p5/baseMaterialShader">baseMaterialShader()</a>.modify() and similar shader modify calls to control the final color output of a material. The callback receives an object with the following properties:
16901691
*
@@ -1743,7 +1744,8 @@ if (typeof p5 !== 'undefined') {
17431744
*/
17441745

17451746
/**
1746-
* @function beforeVertex
1747+
* @method beforeVertex
1748+
* @private
17471749
* @description
17481750
* Registers a callback to run custom code at the very start of the vertex shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.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.
17491751
*
@@ -1760,7 +1762,8 @@ if (typeof p5 !== 'undefined') {
17601762
*/
17611763

17621764
/**
1763-
* @function afterVertex
1765+
* @method afterVertex
1766+
* @private
17641767
* @description
17651768
* Registers a callback to run custom code at the very end of the vertex shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.modify() and similar shader modify calls to perform cleanup or final calculations after all vertex processing is done. The callback receives no arguments.
17661769
*
@@ -1777,7 +1780,8 @@ if (typeof p5 !== 'undefined') {
17771780
*/
17781781

17791782
/**
1780-
* @function beforeFragment
1783+
* @method beforeFragment
1784+
* @private
17811785
* @description
17821786
* Registers a callback to run custom code at the very start of the fragment shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.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.
17831787
*
@@ -1803,7 +1807,7 @@ if (typeof p5 !== 'undefined') {
18031807
* });
18041808
* getFinalColor(color => {
18051809
* // Use the value set in beforeFragment to tint the color
1806-
* color[0] *= this.brightness; // Tint red channel
1810+
* color.r *= this.brightness; // Tint red channel
18071811
* return color;
18081812
* });
18091813
* });
@@ -1820,7 +1824,7 @@ if (typeof p5 !== 'undefined') {
18201824
*/
18211825

18221826
/**
1823-
* @function getPixelInputs
1827+
* @method getPixelInputs
18241828
* @description
18251829
* 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 <a href="#/p5/baseMaterialShader">baseMaterialShader()</a>.modify() and similar shader modify calls to change opacity or other per-pixel properties. The callback receives an object with the following properties:
18261830
* - `opacity`: a number between 0 and 1 for the pixel's transparency
@@ -1844,7 +1848,8 @@ if (typeof p5 !== 'undefined') {
18441848
* myShader = baseMaterialShader().modify(() => {
18451849
* getPixelInputs(inputs => {
18461850
* // Animate opacity based on x position
1847-
* inputs.opacity = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + millis() * 0.002);
1851+
* let t = uniformFloat(() => millis());
1852+
* inputs.opacity = 0.5 + 0.5 * sin(inputs.texCoord.x * 10.0 + t * 0.002);
18481853
* return inputs;
18491854
* });
18501855
* });
@@ -1862,7 +1867,7 @@ if (typeof p5 !== 'undefined') {
18621867
*/
18631868

18641869
/**
1865-
* @function shouldDiscard
1870+
* @method shouldDiscard
18661871
* @description
18671872
* Registers a callback to decide whether to discard (skip drawing) a fragment (pixel) in the fragment shader. This hook can be used inside <a href="#/p5/baseStrokeShader">baseStrokeShader()</a>.modify() and similar shader modify calls to create effects like round points or custom masking. The callback receives a boolean:
18681873
* - `willDiscard`: true if the fragment would be discarded by default
@@ -1899,7 +1904,7 @@ if (typeof p5 !== 'undefined') {
18991904
*/
19001905

19011906
/**
1902-
* @function getFinalColor
1907+
* @method getFinalColor
19031908
* @description
19041909
* Registers a callback to change the final color of each pixel after all lighting and mixing is done in the fragment shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.modify() and similar shader modify calls to adjust the color before it appears on the screen. The callback receives a color array:
19051910
* - `[r, g, b, a]`: the current color (red, green, blue, alpha)
@@ -1924,8 +1929,8 @@ if (typeof p5 !== 'undefined') {
19241929
* myShader = baseColorShader().modify(() => {
19251930
* getFinalColor(color => {
19261931
* // Make the output color fully opaque and add a green tint
1927-
* color[3] = 1.0;
1928-
* color[1] += 0.2;
1932+
* color.a = 1;
1933+
* color.g += 0.2;
19291934
* return color;
19301935
* });
19311936
* });
@@ -1942,7 +1947,8 @@ if (typeof p5 !== 'undefined') {
19421947
*/
19431948

19441949
/**
1945-
* @function afterFragment
1950+
* @method afterFragment
1951+
* @private
19461952
* @description
19471953
* Registers a callback to run custom code at the very end of the fragment shader. This hook can be used inside <a href="#/p5/baseColorShader">baseColorShader()</a>.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.
19481954
*
@@ -1964,7 +1970,7 @@ if (typeof p5 !== 'undefined') {
19641970
* myShader = baseColorShader().modify(() => {
19651971
* getFinalColor(color => {
19661972
* // Add a purple tint to the color
1967-
* color[2] += 0.2;
1973+
* color.b += 0.2;
19681974
* return color;
19691975
* });
19701976
* afterFragment(() => {
@@ -1985,7 +1991,7 @@ if (typeof p5 !== 'undefined') {
19851991
*/
19861992

19871993
/**
1988-
* @function getColor
1994+
* @method getColor
19891995
* @description
19901996
* Registers a callback to set the final color for each pixel in a filter shader. This hook can be used inside <a href="#/p5/baseFilterShader">baseFilterShader()</a>.modify() and similar shader modify calls to control the output color for each pixel. The callback receives the following arguments:
19911997
* - `inputs`: an object with properties like `texCoord`, `canvasSize`, `texelSize`, etc.
@@ -2017,15 +2023,15 @@ if (typeof p5 !== 'undefined') {
20172023
* background(180);
20182024
* // Draw something to the canvas
20192025
* fill('yellow');
2020-
* ellipse(0, 0, 150, 150);
2026+
* circle(0, 0, 150);
20212027
* filter(myShader);
20222028
* }
20232029
* </code>
20242030
* </div>
20252031
*/
20262032

20272033
/**
2028-
* @function getObjectInputs
2034+
* @method getObjectInputs
20292035
* @description
20302036
* 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 <a href="#/p5/baseColorShader">baseColorShader()</a>.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:
20312037
* - `position`: a vector with three components representing the original position of the vertex
@@ -2053,7 +2059,8 @@ if (typeof p5 !== 'undefined') {
20532059
* myShader = baseColorShader().modify(() => {
20542060
* getObjectInputs(inputs => {
20552061
* // Create a sine wave along the x axis in object space
2056-
* inputs.position.y += 20 * sin(inputs.position.x * 0.1 + millis() * 0.002);
2062+
* let t = uniformFloat(() => millis());
2063+
* inputs.position.y += 20 * sin(inputs.position.x * 0.1 + t * 0.002);
20572064
* return inputs;
20582065
* });
20592066
* });
@@ -2070,7 +2077,7 @@ if (typeof p5 !== 'undefined') {
20702077
*/
20712078

20722079
/**
2073-
* @function getCameraInputs
2080+
* @method getCameraInputs
20742081
* @description
20752082
* 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 <a href="#/p5/baseColorShader">baseColorShader()</a>.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:
20762083
* - `position`: a vector with three components representing the position after camera transformation
@@ -2098,9 +2105,10 @@ if (typeof p5 !== 'undefined') {
20982105
* myShader = baseColorShader().modify(() => {
20992106
* getCameraInputs(inputs => {
21002107
* // Move vertices in camera space based on their x position
2101-
* inputs.position.y += 30 * sin(inputs.position.x * 0.05 + millis() * 0.001);
2108+
* let t = uniformFloat(() => millis());
2109+
* inputs.position.y += 30 * sin(inputs.position.x * 0.05 + t * 0.001);
21022110
* // Tint all vertices blue
2103-
* inputs.color.b = 1.0;
2111+
* inputs.color.b = 1;
21042112
* return inputs;
21052113
* });
21062114
* });
@@ -2110,7 +2118,7 @@ if (typeof p5 !== 'undefined') {
21102118
* shader(myShader);
21112119
* noStroke();
21122120
* fill('blue');
2113-
* box(100);
2121+
* sphere(100);
21142122
* }
21152123
* </code>
21162124
* </div>

0 commit comments

Comments
 (0)