Allow uniform names to be manually specified

Author: davepagurek

src/strands/strands_transpiler.js

@@ -111,19 +111,34 @@ const ASTCallbacks = {
   VariableDeclarator(node, _state, ancestors) {
     if (ancestors.some(nodeIsUniform)) { return; }
     if (nodeIsUniform(node.init)) {
-      const uniformNameLiteral = {
-        type: 'Literal',
-        value: node.id.name
+      // Only inject the variable name if the first argument isn't already a string
+      if (node.init.arguments.length === 0 ||
+          node.init.arguments[0].type !== 'Literal' ||
+          typeof node.init.arguments[0].value !== 'string') {
+        const uniformNameLiteral = {
+          type: 'Literal',
+          value: node.id.name
+        }
+        node.init.arguments.unshift(uniformNameLiteral);
       }
-      node.init.arguments.unshift(uniformNameLiteral);
     }
     if (nodeIsVarying(node.init)) {
-      const varyingNameLiteral = {
-        type: 'Literal',
-        value: node.id.name
+      // Only inject the variable name if the first argument isn't already a string
+      if (
+        node.init.arguments.length === 0 ||
+        node.init.arguments[0].type !== 'Literal' ||
+        typeof node.init.arguments[0].value !== 'string'
+      ) {
+        const varyingNameLiteral = {
+          type: 'Literal',
+          value: node.id.name
+        }
+        node.init.arguments.unshift(varyingNameLiteral);
+        _state.varyings[node.id.name] = varyingNameLiteral;
+      } else {
+        // Still track it as a varying even if name wasn't injected
+        _state.varyings[node.id.name] = node.init.arguments[0];
       }
-      node.init.arguments.unshift(varyingNameLiteral);
-      _state.varyings[node.id.name] = varyingNameLiteral;
     }
   },
   Identifier(node, _state, ancestors) {

test/unit/webgl/p5.Shader.js

@@ -426,6 +426,54 @@ suite('p5.Shader', function() {
         myp5.plane(myp5.width, myp5.height);
       }).not.toThrowError();
     });
+
+    test('handle custom uniform names with automatic values', () => {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+      const testShader = myp5.baseMaterialShader().modify(() => {
+        // Variable name is 'brightness' but uniform name is 'customBrightness'
+        const brightness = myp5.uniformFloat('customBrightness', () => 0.8);
+        myp5.getPixelInputs(inputs => {
+          inputs.color = [brightness, brightness, brightness, 1.0];
+          return inputs;
+        });
+      }, { myp5 });
+
+      myp5.noStroke();
+      myp5.shader(testShader);
+      myp5.plane(myp5.width, myp5.height);
+
+      // Check that the shader uses the automatic value (0.8)
+      const pixelColor = myp5.get(25, 25);
+      assert.approximately(pixelColor[0], 204, 5); // 0.8 * 255 = 204
+      assert.approximately(pixelColor[1], 204, 5);
+      assert.approximately(pixelColor[2], 204, 5);
+    });
+
+    test('handle custom uniform names with manual setUniform', () => {
+      myp5.createCanvas(50, 50, myp5.WEBGL);
+      const testShader = myp5.baseMaterialShader().modify(() => {
+        // Variable name is 'brightness' but uniform name is 'customBrightness'
+        const brightness = myp5.uniformFloat('customBrightness');
+        myp5.getPixelInputs(inputs => {
+          inputs.color = [brightness, brightness, brightness, 1.0];
+          return inputs;
+        });
+      }, { myp5 });
+
+      // Set the uniform using the custom name
+      testShader.setUniform('customBrightness', 0.6);
+
+      myp5.noStroke();
+      myp5.shader(testShader);
+      myp5.plane(myp5.width, myp5.height);
+
+      // Check that the shader uses the manual value (0.6)
+      const pixelColor = myp5.get(25, 25);
+      assert.approximately(pixelColor[0], 153, 5); // 0.6 * 255 = 153
+      assert.approximately(pixelColor[1], 153, 5);
+      assert.approximately(pixelColor[2], 153, 5);
+    });
+
     suite('if statement conditionals', () => {
       test('handle simple if statement with true condition', () => {
         myp5.createCanvas(50, 50, myp5.WEBGL);