Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve documentation clarity of shader methods #5307

Merged
merged 1 commit into from
Jul 28, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions src/webgl/material.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,21 @@ import * as constants from '../core/constants';
import './p5.Texture';

/**
* Loads a custom shader from the provided vertex and fragment
* shader paths. The shader files are loaded asynchronously in the
* Creates a new <a href="#/p5.Shader">p5.Shader</a> object
* from the provided vertex and fragment shader files.
*
* The shader files are loaded asynchronously in the
* background, so this method should be used in <a href="#/p5/preload">preload()</a>.
*
* For now, there are three main types of shaders. p5 will automatically
* supply appropriate vertices, normals, colors, and lighting attributes
* if the parameters defined in the shader match the names.
* Note, shaders can only be used in WEBGL mode.
*
* @method loadShader
* @param {String} vertFilename path to file containing vertex shader
* source code
* @param {String} fragFilename path to file containing fragment shader
* source code
* @param {function} [callback] callback to be executed after loadShader
* completes. On success, the Shader object is passed as the first argument.
* completes. On success, the p5.Shader object is passed as the first argument.
* @param {function} [errorCallback] callback to be executed when an error
* occurs inside loadShader. On error, the error is passed as the first
* argument.
Expand Down Expand Up @@ -109,6 +109,11 @@ p5.prototype.loadShader = function(
};

/**
* Creates a new <a href="#/p5.Shader">p5.Shader</a> object
* from the provided vertex and fragment shader code.
*
* Note, shaders can only be used in WEBGL mode.
*
* @method createShader
* @param {String} vertSrc source code for the vertex shader
* @param {String} fragSrc source code for the fragment shader
Expand Down Expand Up @@ -177,15 +182,22 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
};

/**
* The <a href="#/p5/shader">shader()</a> function lets the user provide a custom shader
* to fill in shapes in WEBGL mode. Users can create their
* own shaders by loading vertex and fragment shaders with
* <a href="#/p5/loadShader">loadShader()</a>.
* Sets the <a href="#/p5.Shader">p5.Shader</a> object to
* be used to render subsequent shapes.
*
* Custom shaders can be created using the
* <a href="#/p5/createShader">createShader()</a> and
* <a href="#/p5/loadShader">loadShader()</a> functions.
*
* Use <a href="#/p5/resetShader">resetShader()</a> to
* restore the default shaders.
*
* Note, shaders can only be used in WEBGL mode.
*
* @method shader
* @chainable
* @param {p5.Shader} [s] the desired <a href="#/p5.Shader">p5.Shader</a> to use for rendering
* shapes.
* @param {p5.Shader} s the <a href="#/p5.Shader">p5.Shader</a> object
* to use for rendering shapes.
*
* @example
* <div modernizr='webgl'>
Expand Down Expand Up @@ -268,9 +280,9 @@ p5.prototype.shader = function(s) {
};

/**
* This function restores the default shaders in WEBGL mode. Code that runs
* after resetShader() will not be affected by previously defined
* shaders. Should be run after <a href="#/p5/shader">shader()</a>.
* Restores the default shaders. Code that runs after resetShader()
* will not be affected by the shader previously set by
* <a href="#/p5/shader">shader()</a>
*
* @method resetShader
* @chainable
Expand Down
22 changes: 13 additions & 9 deletions src/webgl/p5.Shader.js
Original file line number Diff line number Diff line change
Expand Up @@ -294,17 +294,21 @@ p5.Shader.prototype.useProgram = function() {
};

/**
* Wrapper around gl.uniform functions.
* As we store uniform info in the shader we can use that
* to do type checking on the supplied data and call
* the appropriate function.
* Used to set the uniforms of a
* <a href="#/p5.Shader">p5.Shader</a> object.
*
* Uniforms are used as a way to provide shader programs
* (which run on the GPU) with values from a sketch
* (which runs on the CPU).
*
* @method setUniform
* @chainable
* @param {String} uniformName the name of the uniform in the
* shader program
* @param {Object|Number|Boolean|Number[]} data the data to be associated
* with that uniform; type varies (could be a single numerical value, array,
* matrix, or texture / sampler reference)
* @param {String} uniformName the name of the uniform.
* Must correspond to the name used in the vertex and fragment shaders
* @param {Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement}
* data the data to associate with the uniform. The type can be
* a boolean (true/false), a number, an array of numbers, or
* an image (p5.Image, p5.Graphics, p5.MediaElement)
*
* @example
* <div modernizr='webgl'>
Expand Down