New Mesh.applyDisplacementMap function

Babylon/Cameras/babylon.followCamera.js

@@ -24,7 +24,7 @@ var BABYLON;
             if (!cameraTarget)
                 return;
 
-            var radians = this.getRadians(this.rotationOffset)+cameraTarget.rotation.y;
+            var radians = this.getRadians(this.rotationOffset) + cameraTarget.rotation.y;
             var targetX = cameraTarget.position.x + Math.sin(radians) * this.radius;
 
             var targetZ = cameraTarget.position.z + Math.cos(radians) * this.radius;

Babylon/Cameras/babylon.followCamera.ts

@@ -20,7 +20,7 @@
             if (!cameraTarget)
                 return;
 
-            var radians:number = this.getRadians(this.rotationOffset)+cameraTarget.rotation.y;
+            var radians = this.getRadians(this.rotationOffset) + cameraTarget.rotation.y;
             var targetX:number = cameraTarget.position.x + Math.sin(radians) * this.radius;
 
             var targetZ:number = cameraTarget.position.z + Math.cos(radians) * this.radius;
@@ -52,4 +52,4 @@
             this.follow(this.target);
         }
     }
-} 
+} 

Babylon/Math/babylon.math.js

@@ -331,6 +331,11 @@
             return new Vector2(array[offset], array[offset + 1]);
         };
 
+        Vector2.FromArrayToRef = function (array, offset, result) {
+            result.x = array[offset];
+            result.y = array[offset + 1];
+        };
+
         Vector2.CatmullRom = function (value1, value2, value3, value4, amount) {
             var squared = amount * amount;
             var cubed = amount * squared;

Babylon/Math/babylon.math.ts

@@ -298,6 +298,11 @@
             return new Vector2(array[offset], array[offset + 1]);
         }
 
+        public static FromArrayToRef(array: number[], offset: number, result: Vector2): void {
+            result.x = array[offset];
+            result.y = array[offset + 1];
+        }
+
         public static CatmullRom(value1: Vector2, value2: Vector2, value3: Vector2, value4: Vector2, amount: number): Vector2 {
             var squared = amount * amount;
             var cubed = amount * squared;

Babylon/Mesh/babylon.mesh.js

@@ -681,6 +681,73 @@ var BABYLON;
         };
 
         // Geometric tools
+        Mesh.prototype.applyDisplacementMap = function (url, minHeight, maxHeight) {
+            var _this = this;
+            var scene = this.getScene();
+
+            var onload = function (img) {
+                // Getting height map data
+                var canvas = document.createElement("canvas");
+                var context = canvas.getContext("2d");
+                var heightMapWidth = img.width;
+                var heightMapHeight = img.height;
+                canvas.width = heightMapWidth;
+                canvas.height = heightMapHeight;
+
+                context.drawImage(img, 0, 0);
+
+                // Create VertexData from map data
+                var buffer = context.getImageData(0, 0, heightMapWidth, heightMapHeight).data;
+
+                _this.applyDisplacementMapFromBuffer(buffer, heightMapWidth, heightMapHeight, minHeight, maxHeight);
+            };
+
+            BABYLON.Tools.LoadImage(url, onload, function () {
+            }, scene.database);
+        };
+
+        Mesh.prototype.applyDisplacementMapFromBuffer = function (buffer, heightMapWidth, heightMapHeight, minHeight, maxHeight) {
+            if (!this.isVerticesDataPresent(BABYLON.VertexBuffer.PositionKind) || !this.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind) || !this.isVerticesDataPresent(BABYLON.VertexBuffer.UVKind)) {
+                BABYLON.Tools.Warn("Cannot call applyDisplacementMap: Given mesh is not complete. Position, Normal or UV are missing");
+                return;
+            }
+
+            var positions = this.getVerticesData(BABYLON.VertexBuffer.PositionKind);
+            var normals = this.getVerticesData(BABYLON.VertexBuffer.NormalKind);
+            var uvs = this.getVerticesData(BABYLON.VertexBuffer.UVKind);
+            var position = BABYLON.Vector3.Zero();
+            var normal = BABYLON.Vector3.Zero();
+            var uv = BABYLON.Vector2.Zero();
+
+            for (var index = 0; index < positions.length; index += 3) {
+                BABYLON.Vector3.FromArrayToRef(positions, index, position);
+                BABYLON.Vector3.FromArrayToRef(normals, index, normal);
+                BABYLON.Vector2.FromArrayToRef(uvs, (index / 3) * 2, uv);
+
+                // Compute height
+                var u = ((Math.abs(uv.x) * heightMapWidth) % heightMapWidth) | 0;
+                var v = ((Math.abs(uv.y) * heightMapHeight) % heightMapHeight) | 0;
+
+                var pos = (u + v * heightMapWidth) * 4;
+                var r = buffer[pos] / 255.0;
+                var g = buffer[pos + 1] / 255.0;
+                var b = buffer[pos + 2] / 255.0;
+
+                var gradient = r * 0.3 + g * 0.59 + b * 0.11;
+
+                normal.normalize();
+                normal.scaleInPlace(minHeight + (maxHeight - minHeight) * gradient);
+                position = position.add(normal);
+
+                position.toArray(positions, index);
+            }
+
+            BABYLON.VertexData.ComputeNormals(positions, this.getIndices(), normals);
+
+            this.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
+            this.updateVerticesData(BABYLON.VertexBuffer.NormalKind, normals);
+        };
+
         Mesh.prototype.convertToFlatShadedMesh = function () {
             /// <summary>Update normals and vertices to get a flat shading rendering.</summary>
             /// <summary>Warning: This may imply adding vertices to the mesh in order to get exactly 3 vertices per face</summary>

Babylon/Mesh/babylon.mesh.ts

@@ -13,7 +13,7 @@
 
         // Private
         public _geometry: Geometry;
-        private _onBeforeRenderCallbacks = new Array<()=> void >();
+        private _onBeforeRenderCallbacks = new Array<() => void>();
         private _onAfterRenderCallbacks = new Array<() => void>();
         public _delayInfo; //ANY
         public _delayLoadingFunction: (any, Mesh) => void;
@@ -688,6 +688,74 @@
         }
 
         // Geometric tools
+        public applyDisplacementMap(url: string, minHeight: number, maxHeight: number): void {
+            var scene = this.getScene();
+
+            var onload = img => {
+                // Getting height map data
+                var canvas = document.createElement("canvas");
+                var context = canvas.getContext("2d");
+                var heightMapWidth = img.width;
+                var heightMapHeight = img.height;
+                canvas.width = heightMapWidth;
+                canvas.height = heightMapHeight;
+
+                context.drawImage(img, 0, 0);
+
+                // Create VertexData from map data
+                var buffer = context.getImageData(0, 0, heightMapWidth, heightMapHeight).data;
+
+                this.applyDisplacementMapFromBuffer(buffer, heightMapWidth, heightMapHeight, minHeight, maxHeight);
+            };
+
+            Tools.LoadImage(url, onload, () => { }, scene.database);
+        }
+
+        public applyDisplacementMapFromBuffer(buffer: Uint8Array, heightMapWidth: number, heightMapHeight: number, minHeight: number, maxHeight: number): void {
+            if (!this.isVerticesDataPresent(VertexBuffer.PositionKind)
+                || !this.isVerticesDataPresent(VertexBuffer.NormalKind)
+                || !this.isVerticesDataPresent(VertexBuffer.UVKind)) {
+                Tools.Warn("Cannot call applyDisplacementMap: Given mesh is not complete. Position, Normal or UV are missing");
+                return;
+            }
+
+            var positions = this.getVerticesData(VertexBuffer.PositionKind);
+            var normals = this.getVerticesData(VertexBuffer.NormalKind);
+            var uvs = this.getVerticesData(VertexBuffer.UVKind);
+            var position = Vector3.Zero();
+            var normal = Vector3.Zero();
+            var uv = Vector2.Zero();
+
+            for (var index = 0; index < positions.length; index += 3) {
+                Vector3.FromArrayToRef(positions, index, position);
+                Vector3.FromArrayToRef(normals, index, normal);
+                Vector2.FromArrayToRef(uvs, (index / 3) * 2, uv);
+
+                // Compute height
+                var u = ((Math.abs(uv.x) * heightMapWidth) % heightMapWidth) | 0;
+                var v = ((Math.abs(uv.y) * heightMapHeight) % heightMapHeight) | 0;
+
+                var pos = (u + v * heightMapWidth) * 4;
+                var r = buffer[pos] / 255.0;
+                var g = buffer[pos + 1] / 255.0;
+                var b = buffer[pos + 2] / 255.0;
+
+                var gradient = r * 0.3 + g * 0.59 + b * 0.11;
+
+                normal.normalize();
+                normal.scaleInPlace(minHeight + (maxHeight - minHeight) * gradient);
+                position = position.add(normal);
+
+                position.toArray(positions, index);
+            }
+
+            VertexData.ComputeNormals(positions, this.getIndices(), normals);
+
+            this.updateVerticesData(VertexBuffer.PositionKind, positions);
+            this.updateVerticesData(VertexBuffer.NormalKind, normals);
+        }
+
+
         public convertToFlatShadedMesh(): void {
             /// <summary>Update normals and vertices to get a flat shading rendering.</summary>
             /// <summary>Warning: This may imply adding vertices to the mesh in order to get exactly 3 vertices per face</summary>

Babylon/babylon.engine.js

@@ -286,7 +286,7 @@
 
         Object.defineProperty(Engine, "Version", {
             get: function () {
-                return "1.13.0";
+                return "1.14.0";
             },
             enumerable: true,
             configurable: true

Babylon/babylon.engine.ts

@@ -165,7 +165,7 @@
         }
 
         public static get Version(): string {
-            return "1.13.0";
+            return "1.14.0";
         }
 
         // Updatable statics so stick with vars here