Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

Conflicts:
	dist/preview release/babylon.core.js
	dist/preview release/babylon.d.ts
	dist/preview release/babylon.js
	dist/preview release/babylon.max.js
	dist/preview release/babylon.noworker.js
	src/Mesh/babylon.mesh.vertexData.ts

materialsLibrary/test/add/addlava.js

@@ -0,0 +1,46 @@
+window.prepareLava = function() {
+    var lava = new BABYLON.LavaMaterial("lava", scene);
+    lava.diffuseTexture = new BABYLON.Texture("textures/lava/lavatile.jpg", scene);
+    lava.diffuseTexture.uScale = 0.5;
+    lava.diffuseTexture.vScale = 0.5;
+    lava.noiseTexture = new BABYLON.Texture("textures/lava/cloud.png", scene);
+    lava.fogColor = BABYLON.Color3.Black();
+    lava.speed = 2.5;
+
+    // Fog color
+    registerColorPicker("lava", "fogColor", "#ff0000", function(value) {
+        lava.fogColor = BABYLON.Color3.FromHexString(value);
+    }, function() {
+        return lava.fogColor.toHexString();
+    });
+
+    // fog density
+    registerRangeUI("lava", "fogDensity", 0, 1, function(value) {
+        lava.fogDensity = value;
+    }, function() {
+        return lava.fogDensity;
+    });
+
+    // Speed
+    registerRangeUI("lava", "speed", 0, 10, function(value) {
+        lava.speed = value;
+    }, function() {
+        return lava.speed;
+    });
+
+    // low frequency speed
+    registerRangeUI("lava", "lowFrequencySpeed", 0, 10, function(value) {
+        lava.lowFrequencySpeed = value;
+    }, function() {
+        return lava.lowFrequencySpeed;
+    });
+
+    // moving speed
+    registerRangeUI("lava", "movingSpeed", 0, 100, function(value) {
+        lava.movingSpeed = value;
+    }, function() {
+        return lava.movingSpeed;
+    });
+
+    return lava;
+};

materialsLibrary/test/add/addnormal.js

@@ -0,0 +1,5 @@
+window.prepareNormal = function() {
+    var normal = new BABYLON.NormalMaterial("normal", scene);
+
+    return normal;
+};

proceduralTexturesLibrary/config.json

@@ -0,0 +1,14 @@
+{
+  "proceduralTextures": [
+    {
+      "file": "proceduralTextures/fire/babylon.fireProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/fire/fireProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.fireProceduralTexture.js"
+    }
+  ],
+  "build": {
+    "distOutputDirectory": "dist/"
+  }
+}

proceduralTexturesLibrary/gulp-srcToVariable.js

@@ -0,0 +1,68 @@
+var through = require('through2');
+var gutil = require('gulp-util');
+var PluginError = gutil.PluginError;
+var path = require('path');
+var File = gutil.File;
+
+// Consts
+const PLUGIN_NAME = 'gulp-srcToVariable';
+
+var srcToVariable = function srcToVariable(varName, asMap, namingCallback) {
+
+    var content;
+    var firstFile;
+
+    namingCallback = namingCallback || function (filename) { return filename; };
+
+    function bufferContents(file, enc, cb) {
+        // ignore empty files
+        if (file.isNull()) {
+            cb();
+            return;
+        }
+
+        // no stream support, only files.
+        if (file.isStream()) {
+            this.emit('error', new PluginError('gulp-concat', 'Streaming not supported'));
+            cb();
+            return;
+        }
+
+        // set first file if not already set
+        if (!firstFile) {
+            firstFile = file;
+        }
+
+        // construct concat instance
+        if (!content) {
+            content = "";
+        }
+        var name = namingCallback(file.relative);
+        content += varName + "['" + name + "'] = " + JSON.stringify(file.contents.toString()) + ";\r\n";
+        cb();
+    }
+
+    function endStream(cb) {
+        if (!firstFile || !content) {
+            cb();
+            return;
+        }
+
+        var joinedPath = path.join(firstFile.base, varName);
+
+        var joinedFile = new File({
+            cwd: firstFile.cwd,
+            base: firstFile.base,
+            path: joinedPath,
+            contents: new Buffer(content)
+        });
+
+        this.push(joinedFile);
+
+        cb();
+    }
+
+    return through.obj(bufferContents, endStream);
+}
+
+module.exports = srcToVariable;

proceduralTexturesLibrary/gulpfile.js

@@ -0,0 +1,66 @@
+var gulp = require("gulp");
+var typescript = require("gulp-typescript");
+var srcToVariable = require("./gulp-srcToVariable");
+var merge2 = require("merge2");
+var concat = require("gulp-concat");
+var rename = require("gulp-rename");
+var cleants = require('gulp-clean-ts-extends');
+var replace = require("gulp-replace");
+var webserver = require('gulp-webserver');
+var uglify = require("gulp-uglify");
+
+var config = require("./config.json");
+var extendsSearchRegex = /var\s__extends[\s\S]+?\};/g;
+
+//function to convert the shaders' filenames to variable names.
+function shadersName(filename) {
+    return filename.replace('.fragment', 'Pixel')
+      .replace('.vertex', 'Vertex')
+      .replace('.fx', 'Shader');
+}
+
+gulp.task('copyReference', function () {
+    return gulp.src("../dist/preview release/babylon.max.js").pipe(gulp.dest("test"));
+});
+
+/*
+Compiles all typescript files and creating a declaration file.
+*/
+gulp.task('default', ["copyReference"], function () {
+    var tasks = config.proceduralTextures.map(function (proceduralTexture) {
+        var js = gulp.src(proceduralTexture.file)
+            .pipe(typescript({
+                noExternalResolve: false,
+                target: 'ES5',
+                declarationFiles: true,
+                typescript: require('typescript')
+            })).js;
+
+        var shader = gulp.src(proceduralTexture.shaderFiles).pipe(srcToVariable("BABYLON.Effect.ShadersStore", true, shadersName));
+
+        return merge2(js, shader)
+            .pipe(cleants())
+            .pipe(replace(extendsSearchRegex, ""))
+            .pipe(concat(proceduralTexture.output))
+            .pipe(gulp.dest(config.build.distOutputDirectory))
+            .pipe(rename({extname: ".min.js"}))
+            .pipe(uglify())
+            .pipe(gulp.dest(config.build.distOutputDirectory));
+    });
+
+    return tasks;
+});
+
+/**
+ * Web server task to serve a local test page
+ */
+gulp.task('webserver', function() {
+  gulp.src('.')
+    .pipe(webserver({
+      livereload: false,
+      open: 'http://localhost:1338/test/index.html',
+      port: 1338,
+      fallback: 'index.html'
+    }));
+});
+

proceduralTexturesLibrary/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "BabylonJS_ShadersLibrary",
+  "version": "2.3.0",
+  "description": "Shaders library for Babylon.js",
+  "main": "",
+  "repository": { "url": "https://github.com/BabylonJS/Babylon.js/" },
+  "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
+  "license": "(Apache-2.0)",
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-uglify": "~1.4.2",
+    "typescript": "~1.6.2",
+    "gulp-typescript": "~2.9.0",
+    "through2": "~0.6.5",
+    "gulp-util": "~3.0.4",
+    "gulp-concat": "~2.6.0",
+    "merge2": "~0.3.5",
+    "gulp-rename": "~1.2.2",
+    "gulp-clean-ts-extends": "~0.1.1",
+    "gulp-replace": "~0.5.3",
+    "gulp-webserver": "^0.9.1"
+  }
+}

proceduralTexturesLibrary/proceduralTextures/fire/babylon.fireProceduralTexture.ts

@@ -0,0 +1,118 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+ export class FireProceduralTexture2 extends ProceduralTexture {
+        private _time: number = 0.0;
+        private _speed = new Vector2(0.5, 0.3);
+        private _autoGenerateTime: boolean = true;
+        private _fireColors: Color3[];
+        private _alphaThreshold: number = 0.5;
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "firetexture", scene, fallbackTexture, generateMipMaps);
+            this._fireColors = FireProceduralTexture.RedFireColors;
+            this.updateShaderUniforms();
+            this.refreshRate = 1;
+        }
+
+        public updateShaderUniforms() {
+            this.setFloat("time", this._time);
+            this.setVector2("speed", this._speed);
+            this.setColor3("c1", this._fireColors[0]);
+            this.setColor3("c2", this._fireColors[1]);
+            this.setColor3("c3", this._fireColors[2]);
+            this.setColor3("c4", this._fireColors[3]);
+            this.setColor3("c5", this._fireColors[4]);
+            this.setColor3("c6", this._fireColors[5]);
+            this.setFloat("alphaThreshold", this._alphaThreshold);
+        }
+
+        public render(useCameraPostProcess?: boolean) {
+            if (this._autoGenerateTime) {
+                this._time += this.getScene().getAnimationRatio() * 0.03;
+                this.updateShaderUniforms();
+            }
+            super.render(useCameraPostProcess);
+        }
+
+        public static get PurpleFireColors(): Color3[] {
+            return [
+                new Color3(0.5, 0.0, 1.0),
+                new Color3(0.9, 0.0, 1.0),
+                new Color3(0.2, 0.0, 1.0),
+                new Color3(1.0, 0.9, 1.0),
+                new Color3(0.1, 0.1, 1.0),
+                new Color3(0.9, 0.9, 1.0)
+            ];
+        }
+
+        public static get GreenFireColors(): Color3[] {
+            return [
+                new Color3(0.5, 1.0, 0.0),
+                new Color3(0.5, 1.0, 0.0),
+                new Color3(0.3, 0.4, 0.0),
+                new Color3(0.5, 1.0, 0.0),
+                new Color3(0.2, 0.0, 0.0),
+                new Color3(0.5, 1.0, 0.0)
+            ];
+        }
+
+        public static get RedFireColors(): Color3[] {
+            return [
+                new Color3(0.5, 0.0, 0.1),
+                new Color3(0.9, 0.0, 0.0),
+                new Color3(0.2, 0.0, 0.0),
+                new Color3(1.0, 0.9, 0.0),
+                new Color3(0.1, 0.1, 0.1),
+                new Color3(0.9, 0.9, 0.9)
+            ];
+        }
+
+        public static get BlueFireColors(): Color3[] {
+            return [
+                new Color3(0.1, 0.0, 0.5),
+                new Color3(0.0, 0.0, 0.5),
+                new Color3(0.1, 0.0, 0.2),
+                new Color3(0.0, 0.0, 1.0),
+                new Color3(0.1, 0.2, 0.3),
+                new Color3(0.0, 0.2, 0.9)
+            ];
+        }
+
+        public get fireColors(): Color3[] {
+            return this._fireColors;
+        }
+
+        public set fireColors(value: Color3[]) {
+            this._fireColors = value;
+            this.updateShaderUniforms();
+        }
+
+        public get time(): number {
+            return this._time;
+        }
+
+        public set time(value: number) {
+            this._time = value;
+            this.updateShaderUniforms();
+        }
+
+        public get speed(): Vector2 {
+            return this._speed;
+        }
+
+        public set speed(value: Vector2) {
+            this._speed = value;
+            this.updateShaderUniforms();
+        }
+
+        public get alphaThreshold(): number {
+            return this._alphaThreshold;
+        }
+
+        public set alphaThreshold(value: number) {
+            this._alphaThreshold = value;
+            this.updateShaderUniforms();
+        }
+    }
+}

proceduralTexturesLibrary/proceduralTextures/fire/fireProceduralTexture.fragment.fx

@@ -0,0 +1,45 @@
+precision highp float;
+
+uniform float time;
+uniform vec3 c1;
+uniform vec3 c2;
+uniform vec3 c3;
+uniform vec3 c4;
+uniform vec3 c5;
+uniform vec3 c6;
+uniform vec2 speed;
+uniform float shift;
+uniform float alphaThreshold;
+
+varying vec2 vUV;
+
+float rand(vec2 n) {
+	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float noise(vec2 n) {
+	const vec2 d = vec2(0.0, 1.0);
+	vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+	return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+
+float fbm(vec2 n) {
+	float total = 0.0, amplitude = 1.0;
+	for (int i = 0; i < 4; i++) {
+		total += noise(n) * amplitude;
+		n += n;
+		amplitude *= 0.5;
+	}
+	return total;
+}
+
+void main() {
+	vec2 p = vUV * 8.0;
+	float q = fbm(p - time * 0.1);
+	vec2 r = vec2(fbm(p + q + time * speed.x - p.x - p.y), fbm(p + q - time * speed.y));
+	vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);
+	vec3 color = c * cos(shift * vUV.y);
+	float luminance = dot(color.rgb, vec3(0.3, 0.59, 0.11));
+
+	gl_FragColor = vec4(color, luminance * alphaThreshold + (1.0 - alphaThreshold));
+}

proceduralTexturesLibrary/readme.md

@@ -0,0 +1,76 @@
+# Materials library
+
+To get a detailled tutorial, please read the [documentation](http://doc.babylonjs.com/tutorials/How_to_create_a_material_for_materialsLibrary)
+
+For every material, you can find a detailled documentation [here](http://doc.babylonjs.com/extensions) under **materials library** tag.
+
+## Using a procedural texture from the library
+
+You can find multiple procedural textures that just works with Babylon.js in *dist* folder. To use then, you only need to reference the associated .js file and use the new provided texture:
+
+```
+var fire = new BABYLON.FireProceduralTexture2("firePT", 256, scene);
+sphere.material.diffuseTexture = fire;
+```
+
+## Adding a new procedural texture to the library
+
+To add a new procedural texture, you have to create your own folder in *proceduralTextures* folder. Then you need to add a .ts file and one .fragment.fx files:
+* The .ts is the TypeScript code of your procedural texture
+* .fx file: GLSL code for fragment shaders
+
+## Integrating the material in the build process
+
+To build all procedural textures and generate the *dist* folder, just run:
+
+```
+gulp
+```
+
+To integrate your new procedural texture to the build process, you have to edit the config.sjon file and add an entry in the "proceduralTextures" section of the file:
+
+```
+{
+  "proceduralTextures": [
+    {
+      "file": "proceduralTextures/fire/babylon.fireProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/fire/fireProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.fireProceduralTexture.js"
+    }
+  ],
+  "build": {
+    "distOutputDirectory": "dist/"
+  }
+}
+```
+
+## Testing your procedural texture
+
+To test your procedural texture, you can use the /test/index.html file by adding a reference to your .js file. Then you will need to update the code to create an instance of your procedural texture and reference it in the UI system:
+
+```
+gui.add(options, 'material', ['none','fire']).onFinishChange(function () {
+  switch (options.material) {
+    case "fire":
+      currentMaterial = fireMaterial;
+      break;
+    case "none":
+    default:
+      currentMaterial = std;
+      break;
+  }
+
+  currentMesh.material = currentMaterial;
+  window.enableMaterial(options.material);
+});
+```
+
+This page allows you to test your code with animated meshes, shadows, various kinds of lights and fog. Just use the UI on the right to turn features on and off.
+
+To serve this page, you can start:
+
+```
+gulp webserver
+```

proceduralTexturesLibrary/test/add/addFirePT.js

@@ -0,0 +1,5 @@
+window.addFirePT = function() {
+    var fire = new BABYLON.FireProceduralTexture2("firePT", 256, scene);
+
+    return fire;
+};

proceduralTexturesLibrary/test/index.html

@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<title>Procedural textures Library</title>
+	<script src="refs/dat.gui.min.js"></script>
+	<script src="refs/babylon.max.js"></script>
+	<script src="../dist/babylon.fireProceduralTexture.js"></script>
+
+	<style>
+		html, body {
+			width: 100%;
+			height: 100%;
+			padding: 0;
+			margin: 0;
+			overflow: hidden;
+		}
+
+		#renderCanvas {
+			width: 100%;
+			height: 100%;
+		}
+
+		#fps {
+			position: absolute;
+			background-color: black;
+			border: 2px solid red;
+			text-align: center;
+			font-size: 16px;
+			color: white;
+			top: 15px;
+			left: 10px;
+			width: 60px;
+			height: 20px;
+		}
+	</style>
+</head>
+<body>
+	<div id="fps">0</div>
+	<canvas id="renderCanvas"></canvas>
+
+	<script src="index.js"></script>
+    <script src="add/addFirePT.js"></script>
+	<script>
+		if (BABYLON.Engine.isSupported()) {
+			var canvas = document.getElementById("renderCanvas");
+			var engine = new BABYLON.Engine(canvas, true);
+			var divFps = document.getElementById("fps");
+
+			var scene = new BABYLON.Scene(engine);
+
+			var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
+			camera.attachControl(canvas, true);
+
+			// Lights
+			var hemisphericLight = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
+			var pointLight = new BABYLON.PointLight("point", new BABYLON.Vector3(20, 20, 10), scene);
+			pointLight.setEnabled(false);
+			var directionalLight = new BABYLON.DirectionalLight("directional", new BABYLON.Vector3(0,-1, 0), scene);
+			directionalLight.setEnabled(false);
+			var spotLight = new BABYLON.SpotLight("spot", new BABYLON.Vector3(0, -30, 0), new BABYLON.Vector3(0, 1, 0), 1.1, 1, scene);
+			spotLight.setEnabled(false);
+
+			// Create meshes
+			var sphere = BABYLON.Mesh.CreateSphere("sphere", 32, 30.0, scene);
+			
+			var plane = BABYLON.MeshBuilder.CreateBox("plane", { width: 30, height: 1, depth:30 }, scene);
+			plane.setEnabled(false);
+			
+			var ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, scene, false);
+			ground.scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
+			ground.setEnabled(false);
+			
+			var knot = BABYLON.Mesh.CreateTorusKnot("knot", 10, 3, 128, 64, 2, 3, scene);
+			knot.setEnabled(false);
+			
+			// Skybox
+			var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
+			var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+			skyboxMaterial.backFaceCulling = false;
+			skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox/TropicalSunnyDay", scene);
+			skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+			skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+			skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+			skyboxMaterial.disableLighting = true;
+			skybox.material = skyboxMaterial;
+			skybox.setEnabled(false);
+
+			var currentMesh = sphere;
+
+			// Rabbit
+			var rabbit;
+			BABYLON.SceneLoader.ImportMesh("Rabbit", "meshes/", "Rabbit.babylon", scene, function (newMeshes, particleSystems, skeletons) {
+				rabbit = newMeshes[1];
+				rabbit.setEnabled(false);
+				rabbit.scaling = new BABYLON.Vector3(0.3, 0.3, 0.3);
+				scene.beginAnimation(skeletons[0], 0, 100, true, 0.8);
+
+				// Shadow caster
+				var shadowCaster = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
+				shadowCaster.setEnabled(false);
+				shadowCaster.position = new BABYLON.Vector3(0, 30, 0);
+				
+				var shadowCaster2 = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
+				shadowCaster2.setEnabled(false);
+				shadowCaster2.position = new BABYLON.Vector3(0, -30, 0);
+				
+				var shadowCaster3 = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
+				shadowCaster3.setEnabled(false);
+				shadowCaster3.position = new BABYLON.Vector3(20, 20, 10);
+
+				var shadowGenerator = new BABYLON.ShadowGenerator(1024, directionalLight);
+				shadowGenerator.getShadowMap().renderList.push(shadowCaster);
+				shadowGenerator.usePoissonSampling = true;
+				
+				var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, spotLight);
+				shadowGenerator2.getShadowMap().renderList.push(shadowCaster2);
+				shadowGenerator2.usePoissonSampling = true;
+				
+				var shadowGenerator3 = new BABYLON.ShadowGenerator(1024, pointLight);
+				shadowGenerator3.getShadowMap().renderList.push(shadowCaster3);
+				shadowGenerator3.usePoissonSampling = true;
+
+				// Register a render loop to repeatedly render the scene
+				engine.runRenderLoop(function () {
+					scene.render();
+					divFps.innerHTML = engine.getFps().toFixed() + " fps";
+
+					shadowCaster.rotation.x += 0.01;
+					shadowCaster.rotation.y += 0.01;
+
+					shadowCaster2.rotation.x += 0.01;
+					shadowCaster2.rotation.y += 0.01;
+
+					shadowCaster3.rotation.x += 0.01;
+					shadowCaster3.rotation.y += 0.01;
+				});
+
+				// Resize
+				window.addEventListener("resize", function () {
+					engine.resize();
+				});
+
+				// Fog
+				scene.fogMode = BABYLON.Scene.FOGMODE_NONE;
+				scene.fogDensity = 0.01;
+				
+				// Create shaders
+				var std = new BABYLON.StandardMaterial("std", scene);
+				std.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
+				std.diffuseTexture.uScale = 5;
+				std.diffuseTexture.vScale = 5;
+
+                // Fire Procedural Texture
+                var firePT = addFirePT();
+				var fireMaterial =  new BABYLON.StandardMaterial("fire", scene);
+				fireMaterial.diffuseTexture = firePT;
+								
+				// Default to std
+				var currentMaterial = std;
+				sphere.material = std;				
+				sphere.receiveShadows = true;
+
+				gui.add(options, 'material', ['none','fire']).onFinishChange(function () {
+					switch (options.material) {
+						case "fire":
+							currentMaterial = fireMaterial;
+							break;
+						case "none":
+						default:
+							currentMaterial = std;
+							break;
+					}
+
+					currentMesh.material = currentMaterial;
+					window.enableMaterial(options.material);
+				});
+
+				gui.add(options, 'mesh', ['sphere', 'knot', 'plane', 'ground', 'rabbit']).onFinishChange(function () {
+					currentMesh.setEnabled(false);
+					switch (options.mesh) {
+						case "sphere":
+							currentMesh = sphere;
+							break;
+						case "knot":
+							currentMesh = knot;
+							break;
+						case "plane":
+							currentMesh = plane;
+							break;
+						case "ground":
+							currentMesh = ground;
+							break;
+						case "rabbit":
+							currentMesh = rabbit;
+							break;
+					}
+					currentMesh.setEnabled(true);
+					currentMesh.receiveShadows = true;
+					currentMesh.material = currentMaterial;
+					
+					water.mesh = currentMesh;
+				});
+
+				var f1 = gui.addFolder('lights');
+				f1.add(options, 'hemisphericLight').onChange(function () {
+					hemisphericLight.setEnabled(options.hemisphericLight);
+				});
+
+				f1.add(options, 'pointLight').onChange(function () {
+					pointLight.setEnabled(options.pointLight);					
+					shadowCaster3.setEnabled(options.pointLight && options.castShadows);					
+				});
+				
+				f1.add(options, 'spotLight').onChange(function () {
+					spotLight.setEnabled(options.spotLight);
+					shadowCaster2.setEnabled(options.spotLight && options.castShadows);
+				});
+
+				f1.add(options, 'directionalLight').onChange(function () {
+					directionalLight.setEnabled(options.directionalLight);
+					shadowCaster.setEnabled(options.directionalLight && options.castShadows);
+				});
+
+				f1.add(options, 'castShadows').onChange(function () {
+					shadowCaster.setEnabled(options.directionalLight && options.castShadows);
+					shadowCaster2.setEnabled(options.spotLight && options.castShadows);	
+					shadowCaster3.setEnabled(options.pointLight && options.castShadows);				
+				});
+
+				gui.add(options, 'fog').onChange(function () {
+					scene.fogMode = options.fog ? BABYLON.Scene.FOGMODE_EXP : BABYLON.Scene.FOGMODE_NONE;
+				});
+				
+				gui.add(options, 'skybox').onChange(function() {
+					skybox.setEnabled(options.skybox);
+				});
+			});
+		}
+
+	</script>
+</body>
+</html>

proceduralTexturesLibrary/test/index.js

@@ -0,0 +1,74 @@
+//UI
+var gui = new dat.GUI();
+var options = {
+	material: "standard",
+	mesh: "sphere",
+	hemisphericLight: true,
+	pointLight: false,
+	directionalLight: false,
+	castShadows: false,
+	spotLight: false,
+	fog: false,
+	skybox: false
+}
+
+var registeredUIs = {};
+var materialgui;
+
+window.registerColorPicker = function(material, name, color, onChange, onSet) {
+    if (!registeredUIs[material]) {
+        registeredUIs[material] = [];
+    }
+
+    registeredUIs[material].push({
+        name: name,
+        color: "#ff0000",
+        onChange: onChange,
+        onSet: onSet
+    });
+};
+
+
+window.registerRangeUI = function(material, name, minValue, maxValue, onChange, onSet) {
+	if (!registeredUIs[material]) {
+		registeredUIs[material] = [];
+	}
+	
+	registeredUIs[material].push({
+		name: name,
+		minValue: minValue,
+		maxValue: maxValue,
+		onChange: onChange,
+		onSet: onSet
+	});
+}
+
+var setUi = function(ui) {
+	options[ui.name] = ui.onSet();
+
+    if (ui.color) {
+        materialgui.addColor(options, ui.name).onChange(function(value) {
+            ui.onChange(value);
+        });
+    } else {
+        materialgui.add(options, ui.name, ui.minValue, ui.maxValue).onChange(function(value) {
+            ui.onChange(value);
+        });
+    }
+}
+
+window.enableMaterial = function(material) {
+	if (materialgui) {
+		materialgui.domElement.parentElement.removeChild(materialgui.domElement);	
+		materialgui = null;
+	}
+	
+	if (registeredUIs[material]) {
+		materialgui = new dat.GUI();
+		for (var index = 0; index < registeredUIs[material].length; index++) {
+			var ui = registeredUIs[material][index];
+			
+			setUi(ui);
+		}	
+	}
+}

src/Animations/babylon.animation.js

@@ -9,6 +9,19 @@ var BABYLON;
         return AnimationRange;
     })();
     BABYLON.AnimationRange = AnimationRange;
+    /**
+     * Composed of a frame, and an action function
+     */
+    var AnimationEvent = (function () {
+        function AnimationEvent(frame, action, onlyOnce) {
+            this.frame = frame;
+            this.action = action;
+            this.onlyOnce = onlyOnce;
+            this.isDone = false;
+        }
+        return AnimationEvent;
+    })();
+    BABYLON.AnimationEvent = AnimationEvent;
     var Animation = (function () {
         function Animation(name, targetProperty, framePerSecond, dataType, loopMode) {
             this.name = name;
@@ -19,6 +32,8 @@ var BABYLON;
             this._offsetsCache = {};
             this._highLimitsCache = {};
             this._stopped = false;
+            // The set of event that will be linked to this animation
+            this._events = new Array();
             this.allowMatricesInterpolation = false;
             this._ranges = new Array();
             this.targetPropertyPath = targetProperty.split(".");
@@ -64,7 +79,25 @@ var BABYLON;
             node.animations.push(animation);
             return node.getScene().beginAnimation(node, 0, totalFrame, (animation.loopMode === 1), 1.0, onAnimationEnd);
         };
-        // Methods   
+        // Methods
+        /**
+         * Add an event to this animation.
+         */
+        Animation.prototype.addEvent = function (event) {
+            this._events.push(event);
+        };
+        /**
+         * Remove all events found at the given frame
+         * @param frame
+         */
+        Animation.prototype.removeEvents = function (frame) {
+            for (var index = 0; index < this._events.length; index++) {
+                if (this._events[index].frame === frame) {
+                    this._events.splice(index, 1);
+                    index--;
+                }
+            }
+        };
         Animation.prototype.createRange = function (name, from, to) {
             this._ranges.push(new AnimationRange(name, from, to));
         };
@@ -356,6 +389,25 @@ var BABYLON;
             var repeatCount = (ratio / range) >> 0;
             var currentFrame = returnValue ? from + ratio % range : to;
             var currentValue = this._interpolate(currentFrame, repeatCount, this.loopMode, offsetValue, highLimitValue);
+            // Check events
+            for (var index = 0; index < this._events.length; index++) {
+                if (currentFrame >= this._events[index].frame) {
+                    var event = this._events[index];
+                    if (!event.isDone) {
+                        // If event should be done only once, remove it.
+                        if (event.onlyOnce) {
+                            this._events.splice(index, 1);
+                            index--;
+                        }
+                        event.isDone = true;
+                        event.action();
+                    } // Don't do anything if the event has already be done.
+                }
+                else if (this._events[index].isDone && !this._events[index].onlyOnce) {
+                    // reset event, the animation is looping
+                    this._events[index].isDone = false;
+                }
+            }
             // Set value
             this.setValue(currentValue);
             if (!returnValue) {

src/Animations/babylon.animation.ts

@@ -1,6 +1,15 @@
 module BABYLON {
     export class AnimationRange {
-        constructor(public name: string, public from: number, public to: number) {            
+        constructor(public name: string, public from: number, public to: number) {
+        }
+    }
+
+    /**
+     * Composed of a frame, and an action function
+     */
+    export class AnimationEvent {
+        public isDone: boolean = false;
+        constructor(public frame: number, public action: () => void, public onlyOnce?: boolean) {
         }
     }
 
@@ -12,6 +21,9 @@
         public _target;
         private _easingFunction: IEasingFunction;
 
+        // The set of event that will be linked to this animation
+        private _events = new Array<AnimationEvent>();
+
         public targetPropertyPath: string[];
         public currentFrame: number;
 
@@ -79,7 +91,27 @@
             this.loopMode = loopMode === undefined ? Animation.ANIMATIONLOOPMODE_CYCLE : loopMode;
         }
 
-        // Methods   
+        // Methods
+        /**
+         * Add an event to this animation.
+         */
+        public addEvent(event: AnimationEvent): void {
+            this._events.push(event);
+        }
+
+        /**
+         * Remove all events found at the given frame
+         * @param frame
+         */
+        public removeEvents(frame: number): void {
+            for (var index = 0; index < this._events.length; index++) {
+                if (this._events[index].frame === frame) {
+                    this._events.splice(index, 1);
+                    index--;
+                }
+            }
+        }
+
         public createRange(name: string, from: number, to: number): void {
             this._ranges.push(new AnimationRange(name, from, to));
         }
@@ -95,7 +127,7 @@
 
         public getRange(name: string): AnimationRange {
             for (var index = 0; index < this._ranges.length; index++) {
-                if (this._ranges[index].name === name) {                    
+                if (this._ranges[index].name === name) {
                     return this._ranges[index];
                 }
             }
@@ -421,6 +453,25 @@
             var currentFrame = returnValue ? from + ratio % range : to;
             var currentValue = this._interpolate(currentFrame, repeatCount, this.loopMode, offsetValue, highLimitValue);
 
+            // Check events
+            for (var index = 0; index < this._events.length; index++) {
+                if (currentFrame >= this._events[index].frame) {
+                    var event = this._events[index];
+                    if (!event.isDone) {
+                        // If event should be done only once, remove it.
+                        if (event.onlyOnce) {
+                            this._events.splice(index, 1);
+                            index--;
+                        }
+                        event.isDone = true;
+                        event.action();
+                    } // Don't do anything if the event has already be done.
+                } else if (this._events[index].isDone && !this._events[index].onlyOnce) {
+                    // reset event, the animation is looping
+                    this._events[index].isDone = false;
+                }
+            }
+
             // Set value
             this.setValue(currentValue);
 
@@ -482,3 +533,4 @@
     }
 } 
 
+

src/Debug/babylon.debugLayer.js

@@ -96,10 +96,12 @@ var BABYLON;
                     var globalViewport = viewport.toGlobal(engine);
                     // Meshes
                     var meshes = _this._camera.getActiveMeshes();
-                    for (var index = 0; index < meshes.length; index++) {
+                    var index;
+                    var projectedPosition;
+                    for (index = 0; index < meshes.length; index++) {
                         var mesh = meshes.data[index];
                         var position = mesh.getBoundingInfo().boundingSphere.center;
-                        var projectedPosition = BABYLON.Vector3.Project(position, mesh.getWorldMatrix(), _this._transformationMatrix, globalViewport);
+                        projectedPosition = BABYLON.Vector3.Project(position, mesh.getWorldMatrix(), _this._transformationMatrix, globalViewport);
                         if (mesh.renderOverlay || _this.shouldDisplayAxis && _this.shouldDisplayAxis(mesh)) {
                             _this._renderAxis(projectedPosition, mesh, globalViewport);
                         }
@@ -594,6 +596,7 @@ var BABYLON;
                 + "Hardware instances: " + (engine.getCaps().instancedArrays ? "Yes" : "No") + "<br>"
                 + "Texture float: " + (engine.getCaps().textureFloat ? "Yes" : "No") + "<br>"
                 + "32bits indices: " + (engine.getCaps().uintIndices ? "Yes" : "No") + "<br>"
+                + "Fragment depth: " + (engine.getCaps().fragmentDepthSupported ? "Yes" : "No") + "<br>"
                 + "<b>Caps.</b><br>"
                 + "Max textures units: " + engine.getCaps().maxTexturesImageUnits + "<br>"
                 + "Max textures size: " + engine.getCaps().maxTextureSize + "<br>"

src/Debug/babylon.debugLayer.ts

@@ -147,13 +147,13 @@
 
                     // Meshes
                     var meshes = this._camera.getActiveMeshes();
-                    for (var index = 0; index < meshes.length; index++) {
+                    var index: number;
+                    var projectedPosition: Vector3;
+                    for (index = 0; index < meshes.length; index++) {
                         var mesh = meshes.data[index];
 
                         var position = mesh.getBoundingInfo().boundingSphere.center;
-
-                        var projectedPosition = Vector3.Project(position, mesh.getWorldMatrix(), this._transformationMatrix, globalViewport);
-
+                        projectedPosition = Vector3.Project(position, mesh.getWorldMatrix(), this._transformationMatrix, globalViewport);
                         if (mesh.renderOverlay || this.shouldDisplayAxis && this.shouldDisplayAxis(mesh)) {
                             this._renderAxis(projectedPosition, mesh, globalViewport);
                         }
@@ -742,6 +742,7 @@
                 + "Hardware instances: " + (engine.getCaps().instancedArrays ? "Yes" : "No") + "<br>"
                 + "Texture float: " + (engine.getCaps().textureFloat ? "Yes" : "No") + "<br>"
                 + "32bits indices: " + (engine.getCaps().uintIndices ? "Yes" : "No") + "<br>"
+                + "Fragment depth: " + (engine.getCaps().fragmentDepthSupported ? "Yes" : "No") + "<br>"
                 + "<b>Caps.</b><br>"
                 + "Max textures units: " + engine.getCaps().maxTexturesImageUnits + "<br>"
                 + "Max textures size: " + engine.getCaps().maxTextureSize + "<br>"

src/Materials/babylon.standardMaterial.js

@@ -103,6 +103,7 @@ var BABYLON;
             this.REFLECTIONMAP_EXPLICIT = false;
             this.REFLECTIONMAP_EQUIRECTANGULAR = false;
             this.INVERTCUBICMAP = false;
+            this.LOGARITHMICDEPTH = false;
             this._keys = Object.keys(this);
         }
         return StandardMaterialDefines;
@@ -140,6 +141,16 @@ var BABYLON;
                 return _this._renderTargets;
             };
         }
+        Object.defineProperty(StandardMaterial.prototype, "useLogarithmicDepth", {
+            get: function () {
+                return this._useLogarithmicDepth;
+            },
+            set: function (value) {
+                this._useLogarithmicDepth = value && this.getScene().getEngine().getCaps().fragmentDepthSupported;
+            },
+            enumerable: true,
+            configurable: true
+        });
         StandardMaterial.prototype.needAlphaBlending = function () {
             return (this.alpha < 1.0) || (this.opacityTexture != null) || this._shouldUseAlphaFromDiffuseTexture() || this.opacityFresnelParameters && this.opacityFresnelParameters.isEnabled;
         };
@@ -432,6 +443,9 @@ var BABYLON;
             if (this.useReflectionFresnelFromSpecular) {
                 this._defines.REFLECTIONFRESNELFROMSPECULAR = true;
             }
+            if (this.useLogarithmicDepth) {
+                this._defines.LOGARITHMICDEPTH = true;
+            }
             // Point size
             if (this.pointsCloud || scene.forcePointsCloud) {
                 this._defines.POINTSIZE = true;
@@ -520,6 +534,9 @@ var BABYLON;
                 if (this._defines.POINTSIZE) {
                     fallbacks.addFallback(0, "POINTSIZE");
                 }
+                if (this._defines.LOGARITHMICDEPTH) {
+                    fallbacks.addFallback(0, "LOGARITHMICDEPTH");
+                }
                 for (var lightIndex = 0; lightIndex < maxSimultaneousLights; lightIndex++) {
                     if (!this._defines["LIGHT" + lightIndex]) {
                         continue;
@@ -602,7 +619,8 @@ var BABYLON;
                     "mBones",
                     "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
                     "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3",
-                    "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor"
+                    "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor",
+                    "logarithmicDepthConstant"
                 ], ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler",
                     "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
                 ], join, fallbacks, this.onCompiled, this.onError);
@@ -736,6 +754,10 @@ var BABYLON;
                 this._effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
                 this._effect.setColor3("vFogColor", scene.fogColor);
             }
+            // Log. depth
+            if (this._defines.LOGARITHMICDEPTH) {
+                this._effect.setFloat("logarithmicDepthConstant", 2.0 / (Math.log(scene.activeCamera.maxZ + 1.0) / Math.LN2));
+            }
             _super.prototype.bind.call(this, world, mesh);
         };
         StandardMaterial.prototype.getAnimatables = function () {

src/Materials/babylon.standardMaterial.ts

@@ -95,6 +95,7 @@
         public REFLECTIONMAP_EXPLICIT = false;
         public REFLECTIONMAP_EQUIRECTANGULAR = false;
         public INVERTCUBICMAP = false;
+        public LOGARITHMICDEPTH = false;
 
         constructor() {
             super();
@@ -143,6 +144,8 @@
         private _defines = new StandardMaterialDefines();
         private _cachedDefines = new StandardMaterialDefines();
 
+        private _useLogarithmicDepth: boolean;
+
         constructor(name: string, scene: Scene) {
             super(name, scene);
 
@@ -159,6 +162,14 @@
             }
         }
 
+        public get useLogarithmicDepth(): boolean {
+            return this._useLogarithmicDepth;
+        }
+
+        public set useLogarithmicDepth(value: boolean) {
+            this._useLogarithmicDepth = value && this.getScene().getEngine().getCaps().fragmentDepthSupported;
+        }
+
         public needAlphaBlending(): boolean {
             return (this.alpha < 1.0) || (this.opacityTexture != null) || this._shouldUseAlphaFromDiffuseTexture() || this.opacityFresnelParameters && this.opacityFresnelParameters.isEnabled;
         }
@@ -497,6 +508,10 @@
                 this._defines.REFLECTIONFRESNELFROMSPECULAR = true;
             }
 
+            if (this.useLogarithmicDepth) {
+                this._defines.LOGARITHMICDEPTH = true;
+            }
+
             // Point size
             if (this.pointsCloud || scene.forcePointsCloud) {
                 this._defines.POINTSIZE = true;
@@ -606,6 +621,10 @@
                     fallbacks.addFallback(0, "POINTSIZE");
                 }
 
+                if (this._defines.LOGARITHMICDEPTH) {
+                    fallbacks.addFallback(0, "LOGARITHMICDEPTH");
+                }
+
                 for (var lightIndex = 0; lightIndex < maxSimultaneousLights; lightIndex++) {
                     if (!this._defines["LIGHT" + lightIndex]) {
                         continue;
@@ -709,7 +728,8 @@
                         "mBones",
                         "vClipPlane", "diffuseMatrix", "ambientMatrix", "opacityMatrix", "reflectionMatrix", "emissiveMatrix", "specularMatrix", "bumpMatrix", "lightmapMatrix",
                         "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3",
-                        "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor"
+                        "diffuseLeftColor", "diffuseRightColor", "opacityParts", "reflectionLeftColor", "reflectionRightColor", "emissiveLeftColor", "emissiveRightColor",
+                        "logarithmicDepthConstant"
                     ],
                     ["diffuseSampler", "ambientSampler", "opacitySampler", "reflectionCubeSampler", "reflection2DSampler", "emissiveSampler", "specularSampler", "bumpSampler", "lightmapSampler",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
@@ -886,6 +906,11 @@
                 this._effect.setColor3("vFogColor", scene.fogColor);
             }
 
+            // Log. depth
+            if (this._defines.LOGARITHMICDEPTH) {
+                this._effect.setFloat("logarithmicDepthConstant", 2.0 / (Math.log(scene.activeCamera.maxZ + 1.0) / Math.LN2));
+            }
+
             super.bind(world, mesh);
         }
 

src/Mesh/babylon.mesh.vertexData.js

@@ -704,11 +704,18 @@ var BABYLON;
             var j;
             var r;
             var ringIdx = 1;
+            var c = 1;
             for (i = 0; i <= subdivisions; i++) {
                 h = i / subdivisions;
                 radius = (h * (diameterTop - diameterBottom) + diameterBottom) / 2;
                 ringIdx = (hasRings && i !== 0 && i !== subdivisions) ? 2 : 1;
                 for (r = 0; r < ringIdx; r++) {
+                    if (hasRings) {
+                        c += r;
+                    }
+                    if (enclose) {
+                        c += 2 * r;
+                    }
                     for (j = 0; j <= tessellation; j++) {
                         angle = j * angle_step;
                         // position
@@ -728,7 +735,7 @@ var BABYLON;
                             ringNormal.y = Math.sqrt(ringNormal.x * ringNormal.x + ringNormal.z * ringNormal.z) * tan;
                             ringNormal.normalize();
                         }
-                        // keep first values for enclose
+                        // keep first ring vertex values for enclose
                         if (j === 0) {
                             ringFirstVertex.copyFrom(ringVertex);
                             ringFirstNormal.copyFrom(ringNormal);
@@ -737,7 +744,7 @@ var BABYLON;
                         normals.push(ringNormal.x, ringNormal.y, ringNormal.z);
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x) * j / tessellation, faceUV[1].y + (faceUV[1].w - faceUV[1].y) * h);
                         if (faceColors) {
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
+                            colors.push(faceColors[c].r, faceColors[c].g, faceColors[c].b, faceColors[c].a);
                         }
                     }
                     // if enclose, add four vertices and their dedicated normals
@@ -756,12 +763,10 @@ var BABYLON;
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x), faceUV[1].y + (faceUV[1].w - faceUV[1].y));
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x), faceUV[1].y + (faceUV[1].w - faceUV[1].y));
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x), faceUV[1].y + (faceUV[1].w - faceUV[1].y));
-                        if (faceColors) {
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                        }
+                        colors.push(faceColors[c + 1].r, faceColors[c + 1].g, faceColors[c + 1].b, faceColors[c + 1].a);
+                        colors.push(faceColors[c + 1].r, faceColors[c + 1].g, faceColors[c + 1].b, faceColors[c + 1].a);
+                        colors.push(faceColors[c + 2].r, faceColors[c + 2].g, faceColors[c + 2].b, faceColors[c + 2].a);
+                        colors.push(faceColors[c + 2].r, faceColors[c + 2].g, faceColors[c + 2].b, faceColors[c + 2].a);
                     }
                 }
             }
@@ -1206,31 +1211,99 @@ var BABYLON;
             ];
             // index of 3 vertex makes a face of icopshere
             var ico_indices = [
-                0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11,
-                1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8,
-                3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9,
-                4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1
+                0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 12, 22, 23,
+                1, 5, 20, 5, 11, 4, 23, 22, 13, 22, 18, 6, 7, 1, 8,
+                14, 21, 4, 14, 4, 2, 16, 13, 6, 15, 6, 19, 3, 8, 9,
+                4, 21, 5, 13, 17, 23, 6, 13, 22, 19, 6, 18, 9, 8, 1
+            ];
+            // vertex for uv have aliased position, not for UV
+            var vertices_unalias_id = [
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
+                // vertex alias
+                0,
+                2,
+                3,
+                3,
+                3,
+                4,
+                7,
+                8,
+                9,
+                9,
+                10,
+                11 // 23: B + 12
             ];
             // uv as integer step (not pixels !)
             var ico_vertexuv = [
-                4, 1, 2, 1, 6, 3, 5, 4,
-                4, 3, 3, 2, 7, 4, 3, 0,
-                1, 0, 0, 1, 5, 0, 5, 2 // v8-11
+                5, 1, 3, 1, 6, 4, 0, 0,
+                5, 3, 4, 2, 2, 2, 4, 0,
+                2, 0, 1, 1, 6, 0, 6, 2,
+                // vertex alias (for same vertex on different faces)
+                0, 4,
+                3, 3,
+                4, 4,
+                3, 1,
+                4, 2,
+                4, 4,
+                0, 2,
+                1, 1,
+                2, 2,
+                3, 3,
+                1, 3,
+                2, 4 // 23: B + 12
             ];
-            // Vertices [0, 1, ...9, A, B] : position on UV plane (7,8,9,10=A have duplicate position)
-            // v=5h          9+  8+  7+
-            // v=4h        9+  3   6   A+
-            // v=3h      9+  4   2   A+
-            // v=2h    9+  5   B   A+
-            // v=1h  9   1   0   A+
-            // v=0h    8   7   A
-            //     u=0 1 2 3 4 5 6 7 8 9   *a
-            //
+            // Vertices[0, 1, ...9, A, B] : position on UV plane
+            // '+' indicate duplicate position to be fixed (3,9:0,2,3,4,7,8,A,B)
+            // First island of uv mapping
+            // v = 4h          3+  2
+            // v = 3h        9+  4
+            // v = 2h      9+  5   B
+            // v = 1h    9   1   0
+            // v = 0h  3   8   7   A
+            //     u = 0 1 2 3 4 5 6  *a
+            // Second island of uv mapping
+            // v = 4h  0+  B+  4+
+            // v = 3h    A+  2+
+            // v = 2h  7+  6   3+
+            // v = 1h    8+  3+
+            // v = 0h
+            //     u = 0 1 2 3 4 5 6  *a
+            // Face layout on texture UV mapping
+            // ============
+            // \ 4  /\ 16 /   ======
+            //  \  /  \  /   /\ 11 /
+            //   \/ 7  \/   /  \  /
+            //    =======  / 10 \/
+            //   /\ 17 /\  =======
+            //  /  \  /  \ \ 15 /\
+            // / 8  \/ 12 \ \  /  \
+            // ============  \/ 6  \
+            // \ 18 /\  ============
+            //  \  /  \ \ 5  /\ 0  /
+            //   \/ 13 \ \  /  \  /
+            //   =======  \/ 1  \/
+            //       =============
+            //      /\ 19 /\  2 /\
+            //     /  \  /  \  /  \
+            //    / 14 \/ 9  \/  3 \
+            //   ===================
             // uv step is u:1 or 0.5, v:cos(30)=sqrt(3)/2, ratio approx is 84/97
-            var ustep = 97 / 1024;
-            var vstep = 168 / 1024;
-            var uoffset = 50 / 1024;
-            var voffset = 51 / 1024;
+            var ustep = 138 / 1024;
+            var vstep = 239 / 1024;
+            var uoffset = 60 / 1024;
+            var voffset = 26 / 1024;
+            // Second island should have margin, not to touch the first island
+            // avoid any borderline artefact in pixel rounding
+            var island_u_offset = -40 / 1024;
+            var island_v_offset = +20 / 1024;
+            // face is either island 0 or 1 :
+            // second island is for faces : [4, 7, 8, 12, 13, 16, 17, 18]
+            var island = [
+                0, 0, 0, 0, 1,
+                0, 0, 1, 1, 0,
+                0, 0, 1, 1, 0,
+                0, 1, 1, 1, 0 //  15 - 19
+            ];
             var indices = [];
             var positions = [];
             var normals = [];
@@ -1239,68 +1312,23 @@ var BABYLON;
             // prepare array of 3 vector (empty) (to be worked in place, shared for each face)
             var face_vertex_pos = new Array(3);
             var face_vertex_uv = new Array(3);
-            for (var v012 = 0; v012 < 3; v012++) {
+            var v012;
+            for (v012 = 0; v012 < 3; v012++) {
                 face_vertex_pos[v012] = BABYLON.Vector3.Zero();
                 face_vertex_uv[v012] = BABYLON.Vector2.Zero();
             }
             // create all with normals
             for (var face = 0; face < 20; face++) {
                 // 3 vertex per face
-                for (var v012 = 0; v012 < 3; v012++) {
-                    // look up vertex 0,1,2 to its index in 0 to 11
+                for (v012 = 0; v012 < 3; v012++) {
+                    // look up vertex 0,1,2 to its index in 0 to 11 (or 23 including alias)
                     var v_id = ico_indices[3 * face + v012];
                     // vertex have 3D position (x,y,z)
-                    face_vertex_pos[v012].copyFromFloats(ico_vertices[3 * v_id], ico_vertices[3 * v_id + 1], ico_vertices[3 * v_id + 2]);
+                    face_vertex_pos[v012].copyFromFloats(ico_vertices[3 * vertices_unalias_id[v_id]], ico_vertices[3 * vertices_unalias_id[v_id] + 1], ico_vertices[3 * vertices_unalias_id[v_id] + 2]);
                     // Normalize to get normal, then scale to radius
                     face_vertex_pos[v012].normalize().scaleInPlace(radius);
-                    // uv from vertex ID (may need fix due to unwrap on texture plan, unalias needed)
-                    // vertex may get to different UV according to belonging face (see fix below)
-                    var fix = 0;
-                    // Vertice 9 UV to be fixed
-                    if (face === 5 && v012 === 2) {
-                        fix = 1;
-                    }
-                    if (face === 15 && v012 === 1) {
-                        fix = 2;
-                    }
-                    if (face === 10 && v012 === 1) {
-                        fix = 3;
-                    }
-                    if (face === 14 && v012 === 2) {
-                        fix = 4;
-                    }
-                    // vertice 10 UV to be fixed
-                    if (face === 4 && v012 === 1) {
-                        fix = 1;
-                    }
-                    if (face === 7 && v012 === 1) {
-                        fix = 2;
-                    }
-                    if (face === 17 && v012 === 2) {
-                        fix = 3;
-                    }
-                    if (face === 8 && v012 === 0) {
-                        fix = 4;
-                    }
-                    // vertice 7 UV to be fixed
-                    if (face === 8 && v012 === 1) {
-                        fix = 5;
-                    }
-                    if (face === 18 && v012 === 0) {
-                        fix = 5;
-                    }
-                    // vertice 8 UV to be fixed
-                    if (face === 13 && v012 === 2) {
-                        fix = 5;
-                    }
-                    if (face === 14 && v012 === 1) {
-                        fix = 5;
-                    }
-                    if (face === 18 && v012 === 2) {
-                        fix = 5;
-                    }
-                    //
-                    face_vertex_uv[v012].copyFromFloats((ico_vertexuv[2 * v_id] + fix) * ustep + uoffset, (ico_vertexuv[2 * v_id + 1] + fix) * vstep + voffset);
+                    // uv Coordinates from vertex ID
+                    face_vertex_uv[v012].copyFromFloats(ico_vertexuv[2 * v_id] * ustep + uoffset + island[face] * island_u_offset, ico_vertexuv[2 * v_id + 1] * vstep + voffset + island[face] * island_v_offset);
                 }
                 // Subdivide the face (interpolate pos, norm, uv)
                 // - pos is linear interpolation, then projected to sphere (converge polyhedron to sphere)

src/Mesh/babylon.mesh.vertexData.ts

@@ -857,12 +857,19 @@
             var j: number;
             var r: number;
             var ringIdx: number = 1;
+            var c: number = 1;
 
             for (i = 0; i <= subdivisions; i++) {
                 h = i / subdivisions;
                 radius = (h * (diameterTop - diameterBottom) + diameterBottom) / 2;
                 ringIdx = (hasRings && i !== 0 && i !== subdivisions) ? 2 : 1;
                 for (r = 0; r < ringIdx; r++) {
+                    if (hasRings) {
+                        c += r;
+                    }
+                    if (enclose) {
+                        c += 2 * r;
+                    }
                     for (j = 0; j <= tessellation; j++) {
                         angle = j * angle_step;
 
@@ -885,7 +892,7 @@
                             ringNormal.normalize();
                         }
 
-                        // keep first values for enclose
+                        // keep first ring vertex values for enclose
                         if (j === 0) {
                             ringFirstVertex.copyFrom(ringVertex);
                             ringFirstNormal.copyFrom(ringNormal);
@@ -895,7 +902,7 @@
                         normals.push(ringNormal.x, ringNormal.y, ringNormal.z);
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x) * j / tessellation, faceUV[1].y + (faceUV[1].w - faceUV[1].y) * h);
                         if (faceColors) {
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
+                            colors.push(faceColors[c].r, faceColors[c].g, faceColors[c].b, faceColors[c].a);
                         }
                     }
 
@@ -915,14 +922,13 @@
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x), faceUV[1].y + (faceUV[1].w - faceUV[1].y));
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x), faceUV[1].y + (faceUV[1].w - faceUV[1].y));
                         uvs.push(faceUV[1].x + (faceUV[1].z - faceUV[1].x), faceUV[1].y + (faceUV[1].w - faceUV[1].y));
-                        if (faceColors) {
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                            colors.push(faceColors[1].r, faceColors[1].g, faceColors[1].b, faceColors[1].a);
-                        }
+                        colors.push(faceColors[c + 1].r, faceColors[c + 1].g, faceColors[c + 1].b, faceColors[c + 1].a);
+                        colors.push(faceColors[c + 1].r, faceColors[c + 1].g, faceColors[c + 1].b, faceColors[c + 1].a);
+                        colors.push(faceColors[c + 2].r, faceColors[c + 2].g, faceColors[c + 2].b, faceColors[c + 2].a);
+                        colors.push(faceColors[c + 2].r, faceColors[c + 2].g, faceColors[c + 2].b, faceColors[c + 2].a);
                     }
                 }
+
             }
 
             // indices
@@ -1469,33 +1475,105 @@
 
             // index of 3 vertex makes a face of icopshere
             var ico_indices = [
-                0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11,
-                1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8,
-                3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9,
-                4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1
+                0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 12, 22, 23,
+                1, 5, 20, 5, 11, 4, 23, 22, 13, 22, 18, 6, 7, 1, 8,
+                14, 21, 4, 14, 4, 2, 16, 13, 6, 15, 6, 19, 3, 8, 9,
+                4, 21, 5, 13, 17, 23, 6, 13, 22, 19, 6, 18, 9, 8, 1
             ];
+            // vertex for uv have aliased position, not for UV
+            var vertices_unalias_id = [
+                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,
+            // vertex alias
+                0,  // 12: 0 + 12
+                2,  // 13: 2 + 11
+                3,  // 14: 3 + 11
+                3,  // 15: 3 + 12
+                3,  // 16: 3 + 13
+                4,  // 17: 4 + 13
+                7,  // 18: 7 + 11
+                8,  // 19: 8 + 11
+                9,  // 20: 9 + 11
+                9,  // 21: 9 + 12
+                10, // 22: A + 12
+                11 // 23: B + 12
+            ];
+
 
             // uv as integer step (not pixels !)
             var ico_vertexuv = [
-                4, 1, 2, 1, 6, 3, 5, 4,  // v0-3
-                4, 3, 3, 2, 7, 4, 3, 0,  // v4-7
-                1, 0, 0, 1, 5, 0, 5, 2   // v8-11
+                5, 1, 3, 1, 6, 4, 0, 0,  // v0-3
+                5, 3, 4, 2, 2, 2, 4, 0,  // v4-7
+                2, 0, 1, 1, 6, 0, 6, 2,  // v8-11
+            // vertex alias (for same vertex on different faces)
+                0, 4, // 12: 0 + 12
+                3, 3, // 13: 2 + 11
+                4, 4, // 14: 3 + 11
+                3, 1, // 15: 3 + 12
+                4, 2, // 16: 3 + 13
+                4, 4, // 17: 4 + 13
+                0, 2, // 18: 7 + 11
+                1, 1, // 19: 8 + 11
+                2, 2, // 20: 9 + 11
+                3, 3, // 21: 9 + 12
+                1, 3, // 22: A + 12
+                2, 4  // 23: B + 12
             ];
-            // Vertices [0, 1, ...9, A, B] : position on UV plane (7,8,9,10=A have duplicate position)
-            // v=5h          9+  8+  7+
-            // v=4h        9+  3   6   A+
-            // v=3h      9+  4   2   A+
-            // v=2h    9+  5   B   A+
-            // v=1h  9   1   0   A+
-            // v=0h    8   7   A
-            //     u=0 1 2 3 4 5 6 7 8 9   *a
-            //
+
+            // Vertices[0, 1, ...9, A, B] : position on UV plane
+            // '+' indicate duplicate position to be fixed (3,9:0,2,3,4,7,8,A,B)
+            // First island of uv mapping
+            // v = 4h          3+  2
+            // v = 3h        9+  4
+            // v = 2h      9+  5   B
+            // v = 1h    9   1   0
+            // v = 0h  3   8   7   A
+            //     u = 0 1 2 3 4 5 6  *a
+
+            // Second island of uv mapping
+            // v = 4h  0+  B+  4+
+            // v = 3h    A+  2+
+            // v = 2h  7+  6   3+
+            // v = 1h    8+  3+
+            // v = 0h
+            //     u = 0 1 2 3 4 5 6  *a
+
+            // Face layout on texture UV mapping
+            // ============
+            // \ 4  /\ 16 /   ======
+            //  \  /  \  /   /\ 11 /
+            //   \/ 7  \/   /  \  /
+            //    =======  / 10 \/
+            //   /\ 17 /\  =======
+            //  /  \  /  \ \ 15 /\
+            // / 8  \/ 12 \ \  /  \
+            // ============  \/ 6  \
+            // \ 18 /\  ============
+            //  \  /  \ \ 5  /\ 0  /
+            //   \/ 13 \ \  /  \  /
+            //   =======  \/ 1  \/
+            //       =============
+            //      /\ 19 /\  2 /\
+            //     /  \  /  \  /  \
+            //    / 14 \/ 9  \/  3 \
+            //   ===================
 
             // uv step is u:1 or 0.5, v:cos(30)=sqrt(3)/2, ratio approx is 84/97
-            var ustep = 97 / 1024;
-            var vstep = 168 / 1024;
-            var uoffset = 50 / 1024;
-            var voffset = 51 / 1024;
+            var ustep = 138 / 1024;
+            var vstep = 239 / 1024;
+            var uoffset = 60 / 1024;
+            var voffset = 26 / 1024;
+            // Second island should have margin, not to touch the first island
+            // avoid any borderline artefact in pixel rounding
+            var island_u_offset = -40 / 1024;
+            var island_v_offset = +20 / 1024;
+            // face is either island 0 or 1 :
+            // second island is for faces : [4, 7, 8, 12, 13, 16, 17, 18]
+            var island = [
+                0, 0, 0, 0, 1, //  0 - 4
+                0, 0, 1, 1, 0, //  5 - 9
+                0, 0, 1, 1, 0, //  10 - 14
+                0, 1, 1, 1, 0 //  15 - 19
+            ];
 
             var indices = [];
             var positions = [];
@@ -1506,49 +1584,29 @@
             // prepare array of 3 vector (empty) (to be worked in place, shared for each face)
             var face_vertex_pos = new Array(3);
             var face_vertex_uv = new Array(3);
-            for (var v012 = 0; v012 < 3; v012++) {
+            var v012;
+            for (v012 = 0; v012 < 3; v012++) {
                 face_vertex_pos[v012] = Vector3.Zero();
                 face_vertex_uv[v012] = Vector2.Zero();
             }
             // create all with normals
             for (var face = 0; face < 20; face++) {
                 // 3 vertex per face
-                for (var v012 = 0; v012 < 3; v012++) {
-                    // look up vertex 0,1,2 to its index in 0 to 11
+                for (v012 = 0; v012 < 3; v012++) {
+                    // look up vertex 0,1,2 to its index in 0 to 11 (or 23 including alias)
                     var v_id = ico_indices[3 * face + v012];
                     // vertex have 3D position (x,y,z)
                     face_vertex_pos[v012].copyFromFloats(
-                        ico_vertices[3 * v_id],
-                        ico_vertices[3 * v_id + 1],
-                        ico_vertices[3 * v_id + 2]);
+                        ico_vertices[3 * vertices_unalias_id[v_id]],
+                        ico_vertices[3 * vertices_unalias_id[v_id] + 1],
+                        ico_vertices[3 * vertices_unalias_id[v_id] + 2]);
                     // Normalize to get normal, then scale to radius
                     face_vertex_pos[v012].normalize().scaleInPlace(radius);
 
-                    // uv from vertex ID (may need fix due to unwrap on texture plan, unalias needed)
-                    // vertex may get to different UV according to belonging face (see fix below)
-                    var fix = 0;
-                    // Vertice 9 UV to be fixed
-                    if (face === 5 && v012 === 2) { fix = 1; }
-                    if (face === 15 && v012 === 1) { fix = 2; }
-                    if (face === 10 && v012 === 1) { fix = 3; }
-                    if (face === 14 && v012 === 2) { fix = 4; }
-                    // vertice 10 UV to be fixed
-                    if (face === 4 && v012 === 1) { fix = 1; }
-                    if (face === 7 && v012 === 1) { fix = 2; }
-                    if (face === 17 && v012 === 2) { fix = 3; }
-                    if (face === 8 && v012 === 0) { fix = 4; }
-                    // vertice 7 UV to be fixed
-                    if (face === 8 && v012 === 1) { fix = 5; }
-                    if (face === 18 && v012 === 0) { fix = 5; }
-                    // vertice 8 UV to be fixed
-                    if (face === 13 && v012 === 2) { fix = 5; }
-                    if (face === 14 && v012 === 1) { fix = 5; }
-                    if (face === 18 && v012 === 2) { fix = 5; }
-                    //
+                    // uv Coordinates from vertex ID
                     face_vertex_uv[v012].copyFromFloats(
-                        (ico_vertexuv[2 * v_id] + fix) * ustep + uoffset,
-                        (ico_vertexuv[2 * v_id + 1] + fix) * vstep + voffset);
-
+                        ico_vertexuv[2 * v_id] * ustep + uoffset + island[face] * island_u_offset,
+                        ico_vertexuv[2 * v_id + 1] * vstep + voffset + island[face] * island_v_offset);
                 }
 
                 // Subdivide the face (interpolate pos, norm, uv)

src/PostProcess/babylon.lensRenderingPipeline.js

@@ -1,3 +1,7 @@
+// BABYLON.JS Chromatic Aberration GLSL Shader
+// Author: Olivier Guyot
+// Separates very slightly R, G and B colors on the edges of the screen
+// Inspired by Francois Tarlier & Martins Upitis
 var __extends = (this && this.__extends) || function (d, b) {
     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
     function __() { this.constructor = d; }

src/PostProcess/babylon.lensRenderingPipeline.ts

@@ -1,3 +1,9 @@
+// BABYLON.JS Chromatic Aberration GLSL Shader
+// Author: Olivier Guyot
+// Separates very slightly R, G and B colors on the edges of the screen
+// Inspired by Francois Tarlier & Martins Upitis
+
+
 module BABYLON {
     export class LensRenderingPipeline extends PostProcessRenderPipeline {
 
@@ -268,6 +274,5 @@ module BABYLON {
             }
             (<DynamicTexture>this._grainTexture).update(false);
         }
-
     }
 }

src/Shaders/chromaticAberration.fragment.fx

@@ -1,8 +1,3 @@
-// BABYLON.JS Chromatic Aberration GLSL Shader
-// Author: Olivier Guyot
-// Separates very slightly R, G and B colors on the edges of the screen
-// Inspired by Francois Tarlier & Martins Upitis
-
 precision highp float;
 
 // samplers

src/Shaders/default.fragment.fx

@@ -1,4 +1,12 @@
-precision highp float;
+#ifdef BUMP
+#extension GL_OES_standard_derivatives : enable
+#endif
+
+#ifdef LOGARITHMICDEPTH
+#extension GL_EXT_frag_depth : enable
+#endif
+
+precision highp float;
 
 // Constants
 #define RECIPROCAL_PI2 0.15915494
@@ -409,7 +417,6 @@ float computeShadowWithVSM(vec4 vPositionFromLight, sampler2D shadowSampler, flo
 
 // Bump
 #ifdef BUMP
-#extension GL_OES_standard_derivatives : enable
 varying vec2 vBumpUV;
 uniform vec2 vBumpInfos;
 uniform sampler2D bumpSampler;
@@ -447,6 +454,11 @@ vec3 perturbNormal(vec3 viewDir)
 varying float fClipDistance;
 #endif
 
+#ifdef LOGARITHMICDEPTH
+uniform float logarithmicDepthConstant;
+varying float vFragmentDepth;
+#endif
+
 // Fog
 #ifdef FOG
 
@@ -534,16 +546,15 @@ lightingInfo computeSpotLighting(vec3 viewDirectionW, vec3 vNormal, vec4 lightDa
 
 	// diffuse
 	float cosAngle = max(0., dot(-lightDirection.xyz, lightVectorW));
-	float spotAtten = 0.0;
 
 	if (cosAngle >= lightDirection.w)
 	{
 		cosAngle = max(0., pow(cosAngle, lightData.w));
-		spotAtten = clamp((cosAngle - lightDirection.w) / (1. - cosAngle), 0.0, 1.0);
+		attenuation *= cosAngle;
 
 		// Diffuse
 		float ndl = max(0., dot(vNormal, -lightDirection.xyz));
-		result.diffuse = ndl * spotAtten * diffuseColor * attenuation;
+		result.diffuse = ndl * diffuseColor * attenuation;
 
 #ifdef SPECULARTERM
 		// Specular
@@ -551,7 +562,7 @@ lightingInfo computeSpotLighting(vec3 viewDirectionW, vec3 vNormal, vec4 lightDa
 		float specComp = max(0., dot(vNormal, angleW));
 		specComp = pow(specComp, max(1., glossiness));
 
-		result.specular = specComp * specularColor * spotAtten * attenuation;
+		result.specular = specComp * specularColor * attenuation;
 #endif
 
 		return result;
@@ -953,6 +964,10 @@ void main(void) {
 #endif
 #endif
 
+#ifdef LOGARITHMICDEPTH
+	gl_FragDepthEXT = log2(vFragmentDepth) * logarithmicDepthConstant * 0.5;
+#endif
+
 #ifdef FOG
 	float fog = CalcFogFactor();
 	color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;

src/Shaders/default.vertex.fx

@@ -14,9 +14,8 @@ attribute vec2 uv2;
 #ifdef VERTEXCOLOR
 attribute vec4 color;
 #endif
-#if NUM_BONE_INFLUENCERS > 0
 
-	// having bone influencers implies you have bones
+#if NUM_BONE_INFLUENCERS > 0
 	uniform mat4 mBones[BonesPerMesh];
 
 	attribute vec4 matricesIndices;
@@ -83,10 +82,6 @@ uniform vec2 vBumpInfos;
 uniform mat4 bumpMatrix;
 #endif
 
-#ifdef BONES
-uniform mat4 mBones[BonesPerMesh];
-#endif
-
 #ifdef POINTSIZE
 uniform float pointSize;
 #endif
@@ -137,6 +132,11 @@ varying vec3 vPositionUVW;
 varying vec3 vDirectionW;
 #endif
 
+#ifdef LOGARITHMICDEPTH
+uniform float logarithmicDepthConstant;
+varying float vFragmentDepth;
+#endif
+
 void main(void) {
 #ifdef REFLECTIONMAP_SKYBOX
 	vPositionUVW = position;
@@ -310,4 +310,10 @@ void main(void) {
 #ifdef POINTSIZE
 	gl_PointSize = pointSize;
 #endif
+
+	// Log. depth
+#ifdef LOGARITHMICDEPTH
+	vFragmentDepth = 1.0 + gl_Position.w;
+	gl_Position.z = log2(max(0.000001, vFragmentDepth)) * logarithmicDepthConstant;
+#endif
 }

src/babylon.engine.js

@@ -436,6 +436,7 @@ var BABYLON;
             this._caps.maxAnisotropy = this._caps.textureAnisotropicFilterExtension ? this._gl.getParameter(this._caps.textureAnisotropicFilterExtension.MAX_TEXTURE_MAX_ANISOTROPY_EXT) : 0;
             this._caps.instancedArrays = this._gl.getExtension('ANGLE_instanced_arrays');
             this._caps.uintIndices = this._gl.getExtension('OES_element_index_uint') !== null;
+            this._caps.fragmentDepthSupported = this._gl.getExtension('EXT_frag_depth') !== null;
             this._caps.highPrecisionShaderSupported = true;
             if (this._gl.getShaderPrecisionFormat) {
                 var highp = this._gl.getShaderPrecisionFormat(this._gl.FRAGMENT_SHADER, this._gl.HIGH_FLOAT);

src/babylon.engine.ts

@@ -379,6 +379,7 @@
         public instancedArrays;
         public uintIndices: boolean;
         public highPrecisionShaderSupported: boolean;
+        public fragmentDepthSupported: boolean;
     }
 
     /**
@@ -634,6 +635,7 @@
             this._caps.maxAnisotropy = this._caps.textureAnisotropicFilterExtension ? this._gl.getParameter(this._caps.textureAnisotropicFilterExtension.MAX_TEXTURE_MAX_ANISOTROPY_EXT) : 0;
             this._caps.instancedArrays = this._gl.getExtension('ANGLE_instanced_arrays');
             this._caps.uintIndices = this._gl.getExtension('OES_element_index_uint') !== null;
+            this._caps.fragmentDepthSupported = this._gl.getExtension('EXT_frag_depth') !== null;
             this._caps.highPrecisionShaderSupported = true;
 
             if (this._gl.getShaderPrecisionFormat) {