Adding Normal Map Procedural Texture

Tools/Gulp/config.json

@@ -411,6 +411,13 @@
           "../../proceduralTexturesLibrary/src/starfield/starfieldProceduralTexture.fragment.fx"
         ],
         "output": "babylon.starfieldProceduralTexture.js"
+      },
+      {
+        "files": ["../../proceduralTexturesLibrary/src/normalMap/babylon.normalMapProceduralTexture.ts"],
+        "shaderFiles": [
+          "../../proceduralTexturesLibrary/src/normalMap/normalMapProceduralTexture.fragment.fx"
+        ],
+        "output": "babylon.normalMapProceduralTexture.js"
       }
     ],
     "build": {

dist/preview release/proceduralTexturesLibrary/babylon.waterProceduralTexture.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON {
+    class WaterProceduralTexture extends ProceduralTexture {
+        private _time;
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
+        render(useCameraPostProcess?: boolean): void;
+    }
+}

proceduralTexturesLibrary/index.html

@@ -49,6 +49,7 @@
 	<script src="test/addBrickPT.js"></script>
 	<script src="test/addMarblePT.js"></script>
 	<script src="test/addStarfieldPT.js"></script>
+	<script src="test/addNormalMapPT.js"></script>
 	<script>
 		BABYLONDEVTOOLS.Loader.load(function() {
 		if (BABYLON.Engine.isSupported()) {
@@ -186,6 +187,10 @@
 				
 				// Starfield Procedural Texture
                 var starfieldPT = addStarfieldPT();
+
+				// Normal Map Procedural Texture
+				var normalMapPT = addNormalMapPT();
+				normalMapPT.baseTexture = diffuseTexture;
 								
 				// Default to std
 				var currentTexture = diffuseTexture;
@@ -302,7 +307,7 @@
 					}
 				}
 				
-				gui.add(options, 'texture', ['default', 'fire', 'wood', 'cloud', 'grass', 'road', 'brick', 'marble', 'starfield']).onFinishChange(function () {
+				gui.add(options, 'texture', ['default', 'fire', 'wood', 'cloud', 'grass', 'road', 'brick', 'marble', 'starfield', 'normalMap']).onFinishChange(function () {
 					resetPTOptions();
 					switch (options.texture) {
 						case "fire":
@@ -337,6 +342,9 @@
 							currentTexture = starfieldPT;
 							addPToptions(starfieldPT, ['saturation', 'distfading', 'darkmatter', 'alpha', 'time', 'beta', 'zoom', 'formuparam', 'stepsize', 'tile', 'brightness']);
 							break;
+						case "normalMap":
+							currentTexture = normalMapPT;
+							break;
 						case "none":
 						default:
 							currentTexture = diffuseTexture;

proceduralTexturesLibrary/src/normalMap/babylon.normalMapProceduralTexture.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+    export class NormalMapProceduralTexture extends ProceduralTexture {
+        private _baseTexture: Texture;
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "normalMapProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setTexture("baseSampler", this._baseTexture);
+            this.setFloat("size", this.getRenderSize());
+        }
+
+        public render(useCameraPostProcess?: boolean) {
+            super.render(useCameraPostProcess);
+        }
+
+        public resize(size: any, generateMipMaps: any): void {
+            super.resize(size, generateMipMaps);
+
+            // We need to update the "size" uniform
+            this.updateShaderUniforms();
+        }
+
+        public get baseTexture(): Texture {
+            return this._baseTexture;
+        }
+
+        public set baseTexture(texture: Texture) {
+            this._baseTexture = texture;
+            this.updateShaderUniforms();
+        }
+    }
+}

proceduralTexturesLibrary/src/normalMap/normalMapProceduralTexture.fragment.fx

@@ -0,0 +1,30 @@
+precision highp float;
+
+// Uniforms
+uniform sampler2D baseSampler;
+uniform float size;
+
+// Varyings
+varying vec2 vUV;
+
+// Constants
+const vec3 LUMA_COEFFICIENT = vec3(0.2126, 0.7152, 0.0722);
+
+float lumaAtCoord(vec2 coord)
+{
+	vec3 pixel = texture2D(baseSampler, coord).rgb;
+	float luma = dot(pixel, LUMA_COEFFICIENT);
+	return luma;
+}
+
+void main()
+{
+	float lumaU0 = lumaAtCoord(vUV + vec2(-1.0,  0.0) / size);
+	float lumaU1 = lumaAtCoord(vUV + vec2( 1.0,  0.0) / size);
+	float lumaV0 = lumaAtCoord(vUV + vec2( 0.0, -1.0) / size);
+	float lumaV1 = lumaAtCoord(vUV + vec2( 0.0,  1.0) / size);
+
+	vec2 slope = (vec2(lumaU0 - lumaU1, lumaV0 - lumaV1) + 1.0) * 0.5;
+
+	gl_FragColor = vec4(slope, 1.0, 1.0);
+}

proceduralTexturesLibrary/test/addNormalMapPT.js

@@ -0,0 +1,6 @@
+window.addNormalMapPT = function() {
+    // 128 = the size of the base texture which is "amiga" here
+    var nm = new BABYLON.NormalMapProceduralTexture("normalMapPT", 128, scene);
+
+    return nm;
+};