diff --git a/src/webgl/material.js b/src/webgl/material.js index 9439e2cb9c..22702c9606 100644 --- a/src/webgl/material.js +++ b/src/webgl/material.js @@ -274,6 +274,79 @@ p5.prototype.shader = function(s) { * * @method resetShader * @chainable + * @example + *
+ * + * // This variable will hold our shader object + * let shaderProgram; + * + * // This variable will hold our vertex shader source code + * let vertSrc = ` + * attribute vec3 aPosition; + * attribute vec2 aTexCoord; + * uniform mat4 uProjectionMatrix; + * uniform mat4 uModelViewMatrix; + * varying vec2 vTexCoord; + * + * void main() { + * vTexCoord = aTexCoord; + * vec4 position = vec4(aPosition, 1.0); + * gl_Position = uProjectionMatrix * uModelViewMatrix * position; + * } + * `; + * + * // This variable will hold our fragment shader source code + * let fragSrc = ` + * precision mediump float; + * + * varying vec2 vTexCoord; + * + * void main() { + * vec2 uv = vTexCoord; + * vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0)); + * gl_FragColor = vec4(color, 1.0); + * } + * `; + * + * function setup() { + * // Shaders require WEBGL mode to work + * createCanvas(100, 100, WEBGL); + * + * // Create our shader + * shaderProgram = createShader(vertSrc, fragSrc); + * } + * + * // prettier-ignore + * function draw() { + * // Clear the scene + * background(200); + * + * // Draw a box using our shader + * // shader() sets the active shader with our shader + * shader(shaderProgram); + * push(); + * translate(-width / 4, 0, 0); + * rotateX(millis() * 0.00025); + * rotateY(millis() * 0.0005); + * box(width / 4); + * pop(); + * + * // Draw a box using the default fill shader + * // resetShader() restores the default fill shader + * resetShader(); + * fill(255, 0, 0); + * push(); + * translate(width / 4, 0, 0); + * rotateX(millis() * 0.00025); + * rotateY(millis() * 0.0005); + * box(width / 4); + * pop(); + * } + * + *
+ * @alt + * Two rotating cubes. The left one is painted using a custom (user-defined) shader, + * while the right one is painted using the default fill shader. */ p5.prototype.resetShader = function() { this._renderer.userFillShader = this._renderer.userStrokeShader = null;