Normal Map Rotation Issue with sprites sharing a texture

[PaulB-H]

Version

• Phaser Version: 3.8.1

• Operating system: Windows 10

• Browser:
  Firefox 126.0.1 (64-bit)
  Chrome Version 125.0.6422.142 (Official Build) (64-bit)
  Other browsers untested

Description

Normal maps for turrets on right side of ship not being applied unless they are at the exact same angle as other sprites with the same normal map on the left side.

Additional:

Workaround

This can be remedied by loading a separate texture for each sprite. I guess this could be done dynamically somehow / upon sprite creation? See Update Below

  this.load.image("turret1", ["turret.png", "turret_n.png"]);
  this.load.image("turret2", ["turret.png", "turret_n.png"]);
  this.load.image("turret3", ["turret.png", "turret_n.png"]);
  this.load.image("turret4", ["turret.png", "turret_n.png"]);
  // ... etc

Based on the workaround, could this possibly be resolved by creating a separate normal map automatically for each sprite created with the same texture, if the texture contains a normal map? Since we could assume not all sprites created with that texture would be at the same location, and thus each need their own normal map information accordingly.

Update: If you ran into this issue you can easily generate a new texture based on one you already loaded in a preload function like so:

preload() {
  this.load.image("turret", ["turret.png", "turret_n.png"]);
}

// Where we need a unique texture key / normal map per sprite

for (let i = 0; i < 8; i++){
  const baseTexture = scene.textures.get("turret");

  const copiedTexture = scene.textures.addImage(
    `turret${i}`,
    baseTexture.getSourceImage(),
    baseTexture.getDataSourceImage()
  );

  const newTurret = scene.add.sprite(this.x, this.y, copiedTexture);
}

This will ensure the newly created sprite has a completely unique normal map and associated data, and avoid possible normal map issues when sharing a texture across different sprites. I'm not sure what if any overhead this adds or other impacts.

Example Test Code

https://github.com/PaulB-H/phaserbug2

To implement the workaround, just comment out line 28

const turretTexture = "turret";

And un-comment line 31

// const turretTexture = `turret${i}`;

Additional Information

When all turrets are created using the same texture:

Edit: Had a thought, the reason the normals are not working on the right side, something to do with the FIRST turret that gets placed, controls properties of the normal map they are all referencing?

Hence all left side that do some normal calculation based on the first turret placed are OKAY, whereas all the others that would need normal map calculations based on right side placement do not... However, if the right side turrets match the left side angle exactly its OKAY.