diff --git a/src/strands/strands_transpiler.js b/src/strands/strands_transpiler.js index f3367620a9..95d23765c8 100644 --- a/src/strands/strands_transpiler.js +++ b/src/strands/strands_transpiler.js @@ -564,8 +564,13 @@ const ASTCallbacks = { // 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' + !( + ( + node.init.arguments[0].type === 'Literal' && + typeof node.init.arguments[0].value === 'string' + ) || + node.init.arguments[0].type === 'TemplateLiteral' + ) ) { const uniformName = getOrCreateInternalShaderName( state.shaderNameMap, diff --git a/test/unit/webgl/p5.Shader.js b/test/unit/webgl/p5.Shader.js index db552b92d8..93ef6be721 100644 --- a/test/unit/webgl/p5.Shader.js +++ b/test/unit/webgl/p5.Shader.js @@ -894,6 +894,31 @@ suite('p5.Shader', function () { assert.approximately(pixelColor[2], 204, 5); }); + test('handle custom uniform names with template strings', () => { + 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(