Fix rotating normal map bug (issue phaserjs#3870)

Author: sercant

src/renderer/webgl/pipelines/ForwardDiffuseLightPipeline.js

@@ -48,6 +48,15 @@ var ForwardDiffuseLightPipeline = new Class({
          * @since 3.11.0
          */
         this.defaultNormalMap;
+
+        /**
+         * Inverse rotation matrix for normal map rotation fixing.
+         */
+        this.inverseRotationMatrix = new Float32Array([
+            1, 0, 0,
+            0, 1, 0,
+            0, 0, 1
+        ]);
     },
 
     /**
@@ -244,6 +253,7 @@ var ForwardDiffuseLightPipeline = new Class({
         }
 
         this.setTexture2D(normalTexture.glTexture, 1);
+        this.setNormalMapRotation(rotation);
 
         var camMatrix = this._tempMatrix1;
         var spriteMatrix = this._tempMatrix2;
@@ -412,6 +422,33 @@ var ForwardDiffuseLightPipeline = new Class({
         this.renderer.setPipeline(gameObject.defaultPipeline);
     },
 
+    /**
+     * Rotates the normal map vectors inversely by the given angle.
+     * Only works in 2D space.
+     * @param {number} rotation rotation in angles
+     */
+    setNormalMapRotation: function (rotation)
+    {
+        var inverseRotationMatrix = this.inverseRotationMatrix;
+        if (rotation)
+        {
+            var rot = -rotation;
+            var c = Math.cos(rot);
+            var s = Math.sin(rot);
+
+            inverseRotationMatrix[1] = s;
+            inverseRotationMatrix[3] = -s;
+            inverseRotationMatrix[0] = inverseRotationMatrix[4] = c;
+        }
+        else
+        {
+            inverseRotationMatrix[0] = inverseRotationMatrix[4] = 1;
+            inverseRotationMatrix[1] = inverseRotationMatrix[3] = 0;
+        }
+
+        this.renderer.setMatrix3(this.program, 'uInverseRotationMatrix', false, inverseRotationMatrix);
+    },
+
     /**
      * Takes a Sprite Game Object, or any object that extends it, which has a normal texture and adds it to the batch.
      *
@@ -437,6 +474,7 @@ var ForwardDiffuseLightPipeline = new Class({
             this.renderer.setPipeline(this);
 
             this.setTexture2D(normalTexture.glTexture, 1);
+            this.setNormalMapRotation(sprite.rotation);
 
             TextureTintPipeline.prototype.batchSprite.call(this, sprite, camera, parentTransformMatrix);
         }

src/renderer/webgl/shaders/ForwardDiffuse-frag.js

@@ -19,6 +19,7 @@ module.exports = [
     'uniform sampler2D uNormSampler;',
     'uniform vec3 uAmbientLightColor;',
     'uniform Light uLights[kMaxLights];',
+    'uniform mat3 uInverseRotationMatrix;',
     '',
     'varying vec2 outTexCoord;',
     'varying vec4 outTint;',
@@ -28,7 +29,7 @@ module.exports = [
     '    vec3 finalColor = vec3(0.0, 0.0, 0.0);',
     '    vec4 color = texture2D(uMainSampler, outTexCoord) * vec4(outTint.rgb * outTint.a, outTint.a);',
     '    vec3 normalMap = texture2D(uNormSampler, outTexCoord).rgb;',
-    '    vec3 normal = normalize(vec3(normalMap * 2.0 - 1.0));',
+    '    vec3 normal = normalize(uInverseRotationMatrix * vec3(normalMap * 2.0 - 1.0));',
     '    vec2 res = vec2(min(uResolution.x, uResolution.y)) * uCamera.w;',
     '',
     '    for (int index = 0; index < kMaxLights; ++index)',

src/renderer/webgl/shaders/src/ForwardDiffuse.frag

@@ -18,6 +18,7 @@ uniform sampler2D uMainSampler;
 uniform sampler2D uNormSampler;
 uniform vec3 uAmbientLightColor;
 uniform Light uLights[kMaxLights];
+uniform mat3 uInverseRotationMatrix;
 
 varying vec2 outTexCoord;
 varying vec4 outTint;
@@ -27,7 +28,7 @@ void main()
     vec3 finalColor = vec3(0.0, 0.0, 0.0);
     vec4 color = texture2D(uMainSampler, outTexCoord) * vec4(outTint.rgb * outTint.a, outTint.a);
     vec3 normalMap = texture2D(uNormSampler, outTexCoord).rgb;
-    vec3 normal = normalize(vec3(normalMap * 2.0 - 1.0));
+    vec3 normal = normalize(uInverseRotationMatrix * vec3(normalMap * 2.0 - 1.0));
     vec2 res = vec2(min(uResolution.x, uResolution.y)) * uCamera.w;
 
     for (int index = 0; index < kMaxLights; ++index)