Update internal strands shaders to use manual uniform names

Author: davepagurek

src/core/filterShaders.js

@@ -1,7 +1,13 @@
 import * as constants from './constants';
 
 /*
- * Creates p5.strands filter shaders for cross-platform compatibility
+ * Creates p5.strands filter shaders for cross-platform compatibility.
+ *
+ * NOTE: These work a little differently than p5.js web editor shaders work!
+ * Firstly, it uses instance mode, so we have to explicitly pass in context
+ * variables in an argument to your callback and as a second argument to `modify`.
+ * Secondly, always manually specify uniform names, as variable names will change
+ * in minified builds.
  */
 export function makeFilterShader(renderer, operation, p5) {
   switch (operation) {
@@ -26,7 +32,7 @@ export function makeFilterShader(renderer, operation, p5) {
 
     case constants.THRESHOLD:
       return renderer.baseFilterShader().modify(({ p5 }) => {
-        const filterParameter = p5.uniformFloat();
+        const filterParameter = p5.uniformFloat('filterParameter');
         p5.getColor((inputs, canvasContent) => {
           const color = p5.getTexture(canvasContent, inputs.texCoord);
           // weighted grayscale with luminance values
@@ -39,7 +45,7 @@ export function makeFilterShader(renderer, operation, p5) {
 
     case constants.POSTERIZE:
       return renderer.baseFilterShader().modify(({ p5 }) => {
-        const filterParameter = p5.uniformFloat();
+        const filterParameter = p5.uniformFloat('filterParameter');
         const quantize = (color, n) => {
           // restrict values to N options/bins
           // and floor each channel to nearest value
@@ -61,8 +67,8 @@ export function makeFilterShader(renderer, operation, p5) {
 
     case constants.BLUR:
       return renderer.baseFilterShader().modify(({ p5 }) => {
-        const radius = p5.uniformFloat();
-        const direction = p5.uniformVec2();
+        const radius = p5.uniformFloat('radius');
+        const direction = p5.uniformVec2('direction');
 
         // This isn't a real Gaussian weight, it's a quadratic weight
         const quadWeight = (x, e) => {

src/core/p5.Renderer3D.js

@@ -1912,13 +1912,13 @@ export class Renderer3D extends Renderer {
     if (!this.sphereMapping) {
       const p5 = this._pInst;
       this.sphereMapping = this.baseFilterShader().modify(({ p5 }) => {
-        const uEnvMap = p5.uniformTexture();
-        const uFovY = p5.uniformFloat();
-        const uAspect = p5.uniformFloat();
+        const uEnvMap = p5.uniformTexture('uEnvMap');
+        const uFovY = p5.uniformFloat('uFovY');
+        const uAspect = p5.uniformFloat('uAspect');
         // Hack: we don't have matrix uniforms yet; use three vectors
-        const uN1 = p5.uniformVec3();
-        const uN2 = p5.uniformVec3();
-        const uN3 = p5.uniformVec3();
+        const uN1 = p5.uniformVec3('uN1');
+        const uN2 = p5.uniformVec3('uN2');
+        const uN3 = p5.uniformVec3('uN3');
         p5.getColor((inputs) => {
           const uFovX = uFovY * uAspect;
           const angleY = p5.mix(uFovY/2.0,  -uFovY/2.0, inputs.texCoord.y);

src/webgl/p5.Shader.js

@@ -243,15 +243,20 @@ class Shader {
    * then be passed into your function as an argument. If you are
    * using instance mode, you will need to pass your sketch object in this way.
    *
+   * If you are also using a build system for your sketch, variable names may be changed as
+   * part of minification. When creating a uniform, you can pass the name of the uniform in
+   * as a first parameter to ensure it doesn't get changed.
+   *
    * ```js example
    * new p5((sketch) => {
    *   let myShader;
    *
    *   sketch.setup = function() {
    *     sketch.createCanvas(200, 200, sketch.WEBGL);
    *     myShader = sketch.baseMaterialShader().modify(({ sketch }) => {
+   *       let b = uniformFloat('b');
    *       sketch.getPixelInputs((inputs) => {
-   *         inputs.color = [inputs.texCoord, 0, 1];
+   *         inputs.color = [inputs.texCoord, b, 1];
    *         return inputs;
    *       });
    *     }, { sketch });
@@ -260,6 +265,7 @@ class Shader {
    *   sketch.draw = function() {
    *     sketch.background(255);
    *     sketch.noStroke();
+   *     myShader.setUniform('b', 0.5);
    *     sketch.shader(myShader); // Apply the custom shader
    *     sketch.plane(sketch.width, sketch.height); // Draw a plane with the shader applied
    *   }