Added faceUV and faceColors to ExtrudePolygon

src/Mesh/babylon.mesh.vertexData.ts

@@ -1621,12 +1621,50 @@
         /**
          * Re-creates the VertexData of the Polygon for sideOrientation.  
          */
-        public static CreatePolygon(polygon: Mesh, sideOrientation: number, frontUVs?: Vector4, backUVs?: Vector4) {
-			var positions = polygon.getVerticesData(VertexBuffer.PositionKind);
+        public static CreatePolygon(polygon: Mesh, sideOrientation: number, fUV?, fColors?, frontUVs?: Vector4, backUVs?: Vector4) {
+			var faceUV: Vector4[] = fUV || new Array<Vector4>(3);
+            var faceColors: Color4[] = fColors;
+            var colors = [];
+
+            // default face colors and UV if undefined
+            for (var f = 0; f < 3; f++) {
+                if (faceUV[f] === undefined) {
+                    faceUV[f] = new Vector4(0, 0, 1, 1);
+                }
+                if (faceColors && faceColors[f] === undefined) {
+                    faceColors[f] = new Color4(1, 1, 1, 1);
+                }
+            }
+            
+            var positions = polygon.getVerticesData(VertexBuffer.PositionKind);
 			var normals = polygon.getVerticesData(VertexBuffer.NormalKind);
 			var uvs = polygon.getVerticesData(VertexBuffer.UVKind);
 			var indices = polygon.getIndices();
 
+            // set face colours and textures
+            var idx: number = 0;
+            var face: number = 0;
+            for (var index = 0; index < normals.length; index += 3) { 
+                //Edge Face  no. 1
+                if(Math.abs(normals[index + 1]) == 0) {
+                   face = 1; 
+                }
+                //Top Face  no. 0
+                if(normals[index + 1] == 1) {
+                   face = 0; 
+                }
+                //Bottom Face  no. 2
+                if(normals[index + 1] == -1) {
+                   face = 2; 
+                }
+                idx = index / 3;
+                uvs[2*idx] = (1 - uvs[2*idx])*faceUV[face].x + uvs[2*idx]*faceUV[face].z;
+                uvs[2*idx + 1] = (1 - uvs[2*idx + 1])*faceUV[face].y + uvs[2*idx + 1]*faceUV[face].w;
+                if (faceColors) {
+                    colors.push(faceColors[face].r, faceColors[face].g, faceColors[face].b, faceColors[face].a);
+                }
+            }
+
 			// sides
             VertexData._ComputeSides(sideOrientation, positions, indices, normals, uvs, frontUVs, backUVs);
             
@@ -1636,6 +1674,12 @@
             vertexData.positions = positions;
             vertexData.normals = normals;
             vertexData.uvs = uvs;
+
+            if (faceColors) {
+                var totalColors = (sideOrientation === Mesh.DOUBLESIDE) ? colors.concat(colors) : colors;
+                vertexData.colors = totalColors;
+            }
+
             return vertexData;
 			
 		}

src/Mesh/babylon.meshBuilder.ts

@@ -790,13 +790,14 @@
          * If you create a double-sided mesh, you can choose what parts of the texture image to crop and stick respectively on the front and the back sides with the parameters `frontUVs` and `backUVs` (Vector4).  
          * Remember you can only change the shape positions, not their number when updating a polygon.
          */
-        public static CreatePolygon(name: string, options: {shape: Vector3[], holes?: Vector3[][], depth?: number, updatable?: boolean, sideOrientation?: number, frontUVs?: Vector4, backUVs?: Vector4}, scene: Scene): Mesh {
+        public static CreatePolygon(name: string, options: {shape: Vector3[], holes?: Vector3[][], depth?: number, faceUV?: Vector4[], faceColors?: Color4[], updatable?: boolean, sideOrientation?: number, frontUVs?: Vector4, backUVs?: Vector4}, scene: Scene): Mesh {
             options.sideOrientation = MeshBuilder.updateSideOrientation(options.sideOrientation, scene);
 			var shape = options.shape;
 			var holes = options.holes || [];
 			var depth = options.depth || 0;
 			var contours: Array<Vector2> = [];
 			var hole: Array<Vector2> = [];
+            
 			for(var i=0; i < shape.length; i++) {
 				contours[i] = new Vector2(shape[i].x, shape[i].z);
 			}
@@ -815,7 +816,7 @@
 			}
 			var polygon = polygonTriangulation.build(options.updatable, depth);
             polygon.sideOrientation = options.sideOrientation;
-			var vertexData = VertexData.CreatePolygon(polygon, options.sideOrientation, options.frontUVs, options.backUVs);
+			var vertexData = VertexData.CreatePolygon(polygon, options.sideOrientation, options.faceUV, options.faceColors, options.frontUVs, options.backUVs);
             vertexData.applyToMesh(polygon, options.updatable);			
 			
             return polygon;
@@ -823,9 +824,11 @@
 
         /**
          * Creates an extruded polygon mesh, with depth in the Y direction. 
+         * You can set different colors and different images to the top, bottom and extruded side by using the parameters `faceColors` (an array of 3 Color3 elements) and `faceUV` (an array of 3 Vector4 elements).
+         * Please read this tutorial : http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors  
 		*/
 
-		public static ExtrudePolygon(name: string, options: {shape: Vector3[], holes?: Vector3[][], depth?: number, updatable?: boolean, sideOrientation?: number, frontUVs?: Vector4, backUVs?: Vector4}, scene: Scene): Mesh {
+		public static ExtrudePolygon(name: string, options: {shape: Vector3[], holes?: Vector3[][], depth?: number, faceUV?: Vector4[], faceColors?: Color4[], updatable?: boolean, sideOrientation?: number, frontUVs?: Vector4, backUVs?: Vector4}, scene: Scene): Mesh {
 			return MeshBuilder.CreatePolygon(name, options, scene);
 		};