Updated documentation for shaders.

src/webgl/material.js

@@ -16,6 +16,9 @@ import './p5.Texture';
  * The shader files are loaded asynchronously in the
  * background, so this method should be used in <a href="#/p5/preload">preload()</a>.
  *
+ * Shaders can alter the positioning of shapes drawn with them.
+ * To ensure consistency in rendering, it's recommended to use the vertex shader in the <a href="#/p5/createShader">createShader example</a>
+ *
  * Note, shaders can only be used in WEBGL mode.
  *
  * @method loadShader
@@ -127,11 +130,25 @@ p5.prototype.loadShader = function(
  * // the 'varying's are shared between both vertex & fragment shaders
  * let varying = 'precision highp float; varying vec2 vPos;';
  *
+ * Shaders can alter the positioning of shapes drawn with them.
+ * To ensure consistency in rendering, it's recommended to use the vertex shader, as in the example below.
+ *
  * // the vertex shader is called for each vertex
- * let vs =
- *   varying +
- *   'attribute vec3 aPosition;' +
- *   'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';
+ *let vs = `
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ *
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ *
+ * void main() {
+ *   vTexCoord = aTexCoord;
+ *   vec4 positionVec4 = vec4(aPosition, 1.0);
+ *   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ *  }
+ *`;
+ *
  *
  * // the fragment shader is called for each pixel
  * let fs =
@@ -313,6 +330,9 @@ p5.prototype.createFilterShader = function(fragSrc) {
  * Sets the <a href="#/p5.Shader">p5.Shader</a> object to
  * be used to render subsequent shapes.
  *
+ * Shaders can alter the positioning of shapes drawn with them.
+ * To ensure consistency in rendering, it's recommended to use the vertex shader in the <a href="#/p5/createShader">createShader example</a>
+ *
  * Custom shaders can be created using the
  * <a href="#/p5/createShader">createShader()</a> and
  * <a href="#/p5/loadShader">loadShader()</a> functions.