Merge branch 'main' into dependabot/npm_and_yarn/brace-expansion-2.1.4

Author: limzykenneth

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,

src/webgl/material.js

@@ -2590,6 +2590,11 @@ function material(p5, fn) {
    * <a href="#/p5/loadModel">`loadModel()`</a> apply their own normal map from
    * the `.mtl` file's `map_Bump`.
    *
+   * Note: On a shape whose texture coordinates wrap all the way around, such as
+   * <a href="#/p5/sphere">`sphere()`</a>, the two edges of the image meet. The
+   * image has to tile for them to line up, otherwise a seam shows where they
+   * join.
+   *
    * Note: `normalTexture()` can only be used in WebGL mode.
    *
    * @method normalTexture
@@ -2682,6 +2687,13 @@ function material(p5, fn) {
    *
    * A light source is needed to see the effect.
    *
+   * Note: On a shape whose texture coordinates wrap all the way around, such as
+   * <a href="#/p5/sphere">`sphere()`</a>, the two edges of the image meet. The
+   * image has to tile for them to line up. Because a bump map is read by
+   * comparing neighbouring pixels, also call
+   * <a href="#/p5/textureWrap">`textureWrap(REPEAT)`</a> so those comparisons
+   * carry across the join instead of stopping at the edge.
+   *
    * Note: `bumpTexture()` can only be used in WebGL mode.
    *
    * @method bumpTexture

src/webgl/shaders/phong.frag

@@ -76,12 +76,17 @@ void main(void) {
     vec3 mapN;
     if (uNormalMapMode == 1) {
       // bump map: brightness is height, so the tangent-space normal comes from
-      // how fast that height changes between neighbouring texels.
-      float h = TEXTURE(uNormalSampler, vTexCoord).r;
-      float hu = TEXTURE(uNormalSampler, vTexCoord + vec2(uNormalTexelSize.x, 0.0)).r;
-      float hv = TEXTURE(uNormalSampler, vTexCoord + vec2(0.0, uNormalTexelSize.y)).r;
+      // how fast that height changes between neighbouring texels. sampling both
+      // sides keeps the slope right at the edges of the map, where reaching past
+      // one side would otherwise clamp and read back the same texel.
+      vec2 du = vec2(uNormalTexelSize.x, 0.0);
+      vec2 dv = vec2(0.0, uNormalTexelSize.y);
+      float hl = TEXTURE(uNormalSampler, vTexCoord - du).r;
+      float hr = TEXTURE(uNormalSampler, vTexCoord + du).r;
+      float hd = TEXTURE(uNormalSampler, vTexCoord - dv).r;
+      float hu = TEXTURE(uNormalSampler, vTexCoord + dv).r;
       // the surface leans away from the direction height increases in
-      mapN = normalize(vec3(h - hu, h - hv, 1.0));
+      mapN = normalize(vec3((hl - hr) * 0.5, (hd - hu) * 0.5, 1.0));
     } else {
       // normal map: rgb already holds the tangent-space normal
       mapN = TEXTURE(uNormalSampler, vTexCoord).rgb * 2.0 - 1.0;

src/webgpu/shaders/material.js

@@ -401,12 +401,17 @@ ${useTextureMaps ? `  if (material.uHasNormalMap == 1) {
     var mapN: vec3<f32>;
     if (material.uNormalMapMode == 1u) {
       // bump map: brightness is height, so the tangent-space normal comes from
-      // how fast that height changes between neighbouring texels.
-      let h = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord).r;
-      let hu = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord + vec2<f32>(material.uNormalTexelSize.x, 0.0)).r;
-      let hv = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord + vec2<f32>(0.0, material.uNormalTexelSize.y)).r;
+      // how fast that height changes between neighbouring texels. sampling both
+      // sides keeps the slope right at the edges of the map, where reaching past
+      // one side would otherwise clamp and read back the same texel.
+      let du = vec2<f32>(material.uNormalTexelSize.x, 0.0);
+      let dv = vec2<f32>(0.0, material.uNormalTexelSize.y);
+      let hl = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord - du).r;
+      let hr = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord + du).r;
+      let hd = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord - dv).r;
+      let hu = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord + dv).r;
       // the surface leans away from the direction height increases in
-      mapN = normalize(vec3<f32>(h - hu, h - hv, 1.0));
+      mapN = normalize(vec3<f32>((hl - hr) * 0.5, (hd - hu) * 0.5, 1.0));
     } else {
       // normal map: rgb already holds the tangent-space normal
       mapN = textureSample(uNormalSampler, uNormalSampler_sampler, input.vTexCoord).rgb * 2.0 - 1.0;

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(