v1.0.7

Samples/Scenes/WorldMonger/Shaders/Ground/ground.fragment.fx

@@ -0,0 +1,103 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec3 vEyePosition;
+uniform vec3 vLimits;
+
+// Ground
+varying vec2 vGroundUV;
+uniform sampler2D groundSampler;
+
+// Sand
+varying vec2 vSandUV;
+uniform sampler2D sandSampler;
+
+// Rock
+varying vec2 vRockUV;
+uniform sampler2D rockSampler;
+
+// Snow
+varying vec2 vSnowUV;
+uniform sampler2D snowSampler;
+
+// Snow
+varying vec2 vGrassUV;
+uniform sampler2D grassSampler;
+
+// Snow
+varying vec2 vBlendUV;
+uniform sampler2D blendSampler;
+
+// Lights
+varying vec3 vPositionW;
+varying vec3 vNormalW;
+uniform vec3 vLightPosition;
+
+#ifdef CLIPPLANE
+varying float fClipDistance;
+#endif
+
+void main(void) {
+	// Clip plane
+#ifdef CLIPPLANE
+	if (fClipDistance > 0.0)
+		discard;
+#endif
+
+	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
+
+	// Light
+	vec3 lightVectorW = normalize(vLightPosition - vPositionW);
+
+	// diffuse
+	float ndl = max(0., dot(vNormalW, lightVectorW));
+
+	// Final composition
+	vec3 finalColor = vec3(0., 0., 0.);
+	vec2 uvOffset = vec2(1.0 / 512.0, 1.0 / 512.0);
+
+	if (vPositionW.y <= vLimits.x) 
+	{
+		float lowLimit = vLimits.x - 2.;
+		float gradient = clamp((vPositionW.y - lowLimit) / (vLimits.x - lowLimit), 0., 1.);
+
+		float blend = texture2D(blendSampler, vBlendUV).r;
+		vec3 groundColor = texture2D(groundSampler, vGroundUV).rgb * (1.0 - blend) + blend * texture2D(grassSampler, vGrassUV).rgb;
+
+		finalColor = ndl * (texture2D(sandSampler, vSandUV).rgb * (1.0 - gradient) + gradient * groundColor);
+	}
+	else if (vPositionW.y > vLimits.x && vPositionW.y <= vLimits.y)
+	{
+		float lowLimit = vLimits.y - 2.;
+		float gradient = clamp((vPositionW.y - lowLimit) / (vLimits.y - lowLimit), 0., 1.);
+
+		float blend = texture2D(blendSampler, vBlendUV).r;
+		vec3 currentColor = texture2D(groundSampler, vGroundUV).rgb * (1.0 - blend) + blend  * texture2D(grassSampler, vGrassUV).rgb;
+
+		finalColor = ndl * (currentColor * (1.0 - gradient) + gradient * texture2D(rockSampler, vRockUV + uvOffset).rgb);
+	}
+	else if (vPositionW.y > vLimits.y && vPositionW.y <= vLimits.z)
+	{
+		float lowLimit = vLimits.z - 1.;
+		float gradient = clamp((vPositionW.y - lowLimit) / (vLimits.z - lowLimit), 0., 1.);
+
+		// Specular
+		vec3 angleW = normalize(viewDirectionW + lightVectorW);
+		float specComp = dot(normalize(vNormalW), angleW);
+		specComp = pow(specComp, 256.);
+
+		finalColor = ndl * (texture2D(rockSampler, vRockUV + uvOffset).rgb * (1.0 - gradient)) + gradient *(ndl * texture2D(snowSampler, vSnowUV).rgb + specComp);
+	}
+	else
+	{
+		// Specular
+		vec3 angleW = normalize(viewDirectionW + lightVectorW);
+		float specComp = dot(normalize(vNormalW), angleW);
+		specComp = pow(specComp, 256.) * 0.8;
+
+		finalColor = texture2D(snowSampler, vSnowUV).rgb * ndl + specComp;
+	}
+
+	gl_FragColor = vec4(finalColor, 1.);
+}

Samples/Scenes/WorldMonger/Shaders/Ground/ground.vertex.fx

@@ -0,0 +1,61 @@
+// Attributes
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+
+// Uniforms
+uniform mat4 world;
+uniform mat4 worldViewProjection;
+
+// Ground
+varying vec2 vGroundUV;
+uniform mat4 groundMatrix;
+
+// Snow
+varying vec2 vSnowUV;
+uniform mat4 snowMatrix;
+
+// Rock
+varying vec2 vRockUV;
+uniform mat4 rockMatrix;
+
+// Sand
+varying vec2 vSandUV;
+uniform mat4 sandMatrix;
+
+// Grass
+varying vec2 vGrassUV;
+uniform mat4 grassMatrix;
+
+// Blend
+varying vec2 vBlendUV;
+uniform mat4 blendMatrix;
+
+// Normal
+varying vec3 vPositionW;
+varying vec3 vNormalW;
+
+#ifdef CLIPPLANE
+uniform vec4 vClipPlane;
+varying float fClipDistance;
+#endif
+
+void main(void) {
+	gl_Position = worldViewProjection * vec4(position, 1.0);   
+	
+	vec4 worldPos = world * vec4(position, 1.0);
+	vPositionW = vec3(worldPos);
+	vNormalW = normalize(vec3(world * vec4(normal, 0.0)));
+
+	vGroundUV = vec2(groundMatrix * vec4(uv, 1.0, 0.0));
+	vSnowUV = vec2(snowMatrix * vec4(uv, 1.0, 0.0));
+	vRockUV = vec2(rockMatrix * vec4(uv, 1.0, 0.0));
+	vSandUV = vec2(sandMatrix * vec4(uv, 1.0, 0.0));
+	vGrassUV = vec2(grassMatrix * vec4(uv, 1.0, 0.0));
+	vBlendUV = vec2(blendMatrix * vec4(uv, 1.0, 0.0));
+
+	// Clip plane
+#ifdef CLIPPLANE
+	fClipDistance = dot(worldPos, vClipPlane);
+#endif
+}

Samples/Scenes/WorldMonger/Shaders/Ground/groundMaterial.js

@@ -0,0 +1,160 @@
+var WORLDMONGER = WORLDMONGER || {};
+
+(function () {
+    WORLDMONGER.GroundMaterial = function (name, scene, light) {
+        this.name = name;
+        this.id = name;
+        this.light = light;
+
+        this._scene = scene;
+        scene.materials.push(this);
+        
+        this.groundTexture = new BABYLON.Texture("Shaders/Ground/ground.jpg", scene);
+        this.groundTexture.uScale = 6.0;
+        this.groundTexture.vScale = 6.0;
+        
+        this.grassTexture = new BABYLON.Texture("Shaders/Ground/grass.jpg", scene);
+        this.grassTexture.uScale = 6.0;
+        this.grassTexture.vScale = 6.0;
+
+        this.snowTexture = new BABYLON.Texture("Shaders/Ground/snow.jpg", scene);
+        this.snowTexture.uScale = 20.0;
+        this.snowTexture.vScale = 20.0;
+        
+        this.sandTexture = new BABYLON.Texture("Shaders/Ground/sand.jpg", scene);
+        this.sandTexture.uScale = 4.0;
+        this.sandTexture.vScale = 4.0;
+        
+        this.rockTexture = new BABYLON.Texture("Shaders/Ground/rock.jpg", scene);
+        this.rockTexture.uScale = 15.0;
+        this.rockTexture.vScale = 15.0;
+        
+        this.blendTexture = new BABYLON.Texture("Shaders/Ground/blend.png", scene);
+        this.blendTexture.uOffset = Math.random();
+        this.blendTexture.vOffset = Math.random();
+        this.blendTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
+        this.blendTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
+
+
+        this.sandLimit = 1;
+        this.rockLimit = 5;
+        this.snowLimit = 8;
+    };
+
+    WORLDMONGER.GroundMaterial.prototype = Object.create(BABYLON.Material.prototype);
+
+    // Properties   
+    WORLDMONGER.GroundMaterial.prototype.needAlphaBlending = function () {
+        return false;
+    };
+
+    WORLDMONGER.GroundMaterial.prototype.needAlphaTesting = function () {
+        return false;
+    };
+
+    // Methods   
+    WORLDMONGER.GroundMaterial.prototype.isReady = function (mesh) {
+        var engine = this._scene.getEngine();
+
+        if (!this.groundTexture.isReady)
+            return false;
+        if (!this.snowTexture.isReady)
+            return false;
+        if (!this.sandTexture.isReady)
+            return false;
+        if (!this.rockTexture.isReady)
+            return false;
+        if (!this.grassTexture.isReady)
+            return false;
+
+        var defines = [];
+        if (BABYLON.clipPlane) {
+            defines.push("#define CLIPPLANE");
+        }
+
+        var join = defines.join("\n");
+        if (this._cachedDefines != join) {
+            this._cachedDefines = join;
+
+            this._effect = engine.createEffect("Shaders/Ground/ground",
+                ["position", "normal", "uv"],
+                ["worldViewProjection", "groundMatrix", "sandMatrix", "rockMatrix", "snowMatrix", "grassMatrix", "blendMatrix", "world", "vLightPosition", "vEyePosition", "vLimits", "vClipPlane"],
+                ["groundSampler", "sandSampler", "rockSampler", "snowSampler", "grassSampler", "blendSampler"],
+                join);
+        }
+
+        if (!this._effect.isReady()) {
+            return false;
+        }
+
+        return true;
+    };
+
+    WORLDMONGER.GroundMaterial.prototype.bind = function (world, mesh) {
+        this._effect.setMatrix("world", world);
+        this._effect.setMatrix("worldViewProjection", world.multiply(this._scene.getTransformMatrix()));        
+        this._effect.setVector3("vEyePosition", this._scene.activeCamera.position);
+        this._effect.setVector3("vLightPosition", this.light.position);
+
+        // Textures
+        if (this.groundTexture) {
+            this._effect.setTexture("groundSampler", this.groundTexture);
+            this._effect.setMatrix("groundMatrix", this.groundTexture._computeTextureMatrix());
+        }
+        
+        if (this.sandTexture) {
+            this._effect.setTexture("sandSampler", this.sandTexture);
+            this._effect.setMatrix("sandMatrix", this.sandTexture._computeTextureMatrix());
+        }
+        
+        if (this.rockTexture) {
+            this._effect.setTexture("rockSampler", this.rockTexture);
+            this._effect.setMatrix("rockMatrix", this.rockTexture._computeTextureMatrix());
+        }
+        
+        if (this.snowTexture) {
+            this._effect.setTexture("snowSampler", this.snowTexture);
+            this._effect.setMatrix("snowMatrix", this.snowTexture._computeTextureMatrix());
+        }
+        
+        if (this.grassTexture) {
+            this._effect.setTexture("grassSampler", this.grassTexture);
+            this._effect.setMatrix("grassMatrix", this.grassTexture._computeTextureMatrix());
+        }
+        
+        if (this.blendTexture) {
+            this._effect.setTexture("blendSampler", this.blendTexture);
+            this._effect.setMatrix("blendMatrix", this.blendTexture._computeTextureMatrix());
+        }
+        
+        this._effect.setFloat3("vLimits", this.sandLimit, this.rockLimit, this.snowLimit);
+        
+        if (BABYLON.clipPlane) {
+            this._effect.setFloat4("vClipPlane", BABYLON.clipPlane.normal.x, BABYLON.clipPlane.normal.y, BABYLON.clipPlane.normal.z, BABYLON.clipPlane.d);
+        }
+    };
+    
+    WORLDMONGER.GroundMaterial.prototype.dispose = function () {
+        if (this.grassTexture) {
+            this.grassTexture.dispose();
+        }
+        
+        if (this.groundTexture) {
+            this.groundTexture.dispose();
+        }
+
+        if (this.snowTexture) {
+            this.snowTexture.dispose();
+        }
+
+        if (this.sandTexture) {
+            this.sandTexture.dispose();
+        }
+
+        if (this.rockTexture) {
+            this.rockTexture.dispose();
+        }
+
+        this.baseDispose();
+    };
+})();

Samples/Scenes/WorldMonger/Shaders/Water/water.fragment.fx

@@ -0,0 +1,59 @@
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec3 vEyePosition;
+uniform vec4 vLevels;
+uniform vec3 waterColor;
+uniform vec2 waveData;
+
+// Lights
+varying vec3 vPositionW;
+varying vec3 vNormalW;
+uniform vec3 vLightPosition;
+
+// Refs
+varying vec2 vBumpUV;
+varying vec4 vUV;
+uniform sampler2D refractionSampler;
+uniform sampler2D reflectionSampler;
+uniform sampler2D bumpSampler;
+
+void main(void) {
+	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
+
+	// Light
+	vec3 lightVectorW = normalize(vLightPosition - vPositionW);
+
+	// Wave
+	vec3 bumpNormal = 2.0 * texture2D(bumpSampler, vBumpUV).rgb - 1.0;
+	vec2 perturbation = waveData.y * bumpNormal.rg;
+
+	// diffuse
+	float ndl = max(0., dot(vNormalW, lightVectorW));
+
+	// Specular
+	vec3 angleW = normalize(viewDirectionW + lightVectorW);
+	float specComp = dot(normalize(vNormalW), angleW);
+	specComp = pow(specComp, 256.);
+
+	// Refraction
+	vec2 texCoords;
+	texCoords.x = vUV.x / vUV.w / 2.0 + 0.5;
+	texCoords.y = vUV.y / vUV.w / 2.0 + 0.5;
+
+	vec3 refractionColor = texture2D(refractionSampler, texCoords + perturbation).rgb;
+
+	// Reflection
+	vec3 reflectionColor = texture2D(reflectionSampler, texCoords + perturbation).rgb;
+
+	// Fresnel
+	float fresnelTerm = dot(viewDirectionW, vNormalW);
+	fresnelTerm = clamp((1.0 - fresnelTerm) * vLevels.y, 0., 1.);
+
+	// Water color
+	vec3 finalColor = (waterColor * ndl) * vLevels.x + (1.0 - vLevels.x) * (reflectionColor * fresnelTerm * vLevels.z + (1.0 - fresnelTerm) * refractionColor * vLevels.w) + specComp;
+
+	
+	gl_FragColor = vec4(finalColor, 1.);
+}

Samples/Scenes/WorldMonger/Shaders/Water/water.vertex.fx

@@ -0,0 +1,29 @@
+// Attributes
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+
+// Uniforms
+uniform vec2 waveData;
+uniform mat4 windMatrix;
+uniform mat4 world;
+uniform mat4 worldViewProjection;
+
+// Normal
+varying vec3 vPositionW;
+varying vec3 vNormalW;
+varying vec4 vUV;
+varying vec2 vBumpUV;
+
+void main(void) {
+	vec4 outPosition = worldViewProjection * vec4(position, 1.0);
+	gl_Position = outPosition;
+	
+	vPositionW = vec3(world * vec4(position, 1.0));
+	vNormalW = normalize(vec3(world * vec4(normal, 0.0)));
+
+	vUV = outPosition;
+
+	vec2 bumpTexCoord = vec2(windMatrix * vec4(uv, 0.0, 1.0));
+	vBumpUV = bumpTexCoord / waveData.x;
+}

Samples/Scenes/WorldMonger/Shaders/Water/waterMaterial.js

@@ -0,0 +1,117 @@
+var WORLDMONGER = WORLDMONGER || {};
+
+(function () {
+    WORLDMONGER.WaterMaterial = function (name, scene, light) {
+        this.name = name;
+        this.id = name;
+        this.light = light;
+
+        this._scene = scene;
+        scene.materials.push(this);
+
+        this.bumpTexture = new BABYLON.Texture("Shaders/Water/bump.png", scene);
+        this.bumpTexture.uScale = 2;
+        this.bumpTexture.vScale = 2;
+        this.bumpTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
+        this.bumpTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
+
+        this.reflectionTexture = new BABYLON.MirrorTexture("reflection", 512, scene, true);
+        this.refractionTexture = new BABYLON.RenderTargetTexture("refraction", 512, scene, true);        
+        this.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);
+
+        this.refractionTexture.onBeforeRender = function() {
+            BABYLON.clipPlane = new BABYLON.Plane(0, 1, 0, 0);
+        }
+        
+        this.refractionTexture.onAfterRender = function () {
+            BABYLON.clipPlane = null;
+        }
+
+        this.waterColor = new BABYLON.Color3(0.0, 0.3, 0.1);
+        this.waterColorLevel = 0.2;
+        this.fresnelLevel = 1.0;
+        this.reflectionLevel = 0.6;
+        this.refractionLevel = 0.8;
+        
+        this.waveLength = 0.1;
+        this.waveHeight = 0.15;
+
+        this.waterDirection = new BABYLON.Vector2(0, 1.0);
+
+        this._time = 0;
+    };
+
+    WORLDMONGER.WaterMaterial.prototype = Object.create(BABYLON.Material.prototype);
+
+    // Properties   
+    WORLDMONGER.WaterMaterial.prototype.needAlphaBlending = function () {
+        return false;
+    };
+
+    WORLDMONGER.WaterMaterial.prototype.needAlphaTesting = function () {
+        return false;
+    };
+
+    // Methods   
+    WORLDMONGER.WaterMaterial.prototype.getRenderTargetTextures = function () {
+        var results = [];
+
+        results.push(this.reflectionTexture);
+        results.push(this.refractionTexture);
+
+        return results;
+    };
+
+    WORLDMONGER.WaterMaterial.prototype.isReady = function (mesh) {
+        var engine = this._scene.getEngine();
+        
+        if (this.bumpTexture && !this.bumpTexture.isReady) {
+            return false;
+        }
+
+        this._effect = engine.createEffect("Shaders/Water/water",
+            ["position", "normal", "uv"],
+            ["worldViewProjection", "world", "view", "vLightPosition", "vEyePosition", "waterColor", "vLevels", "waveData", "windMatrix"],
+            ["reflectionSampler", "refractionSampler", "bumpSampler"],
+            "");
+
+        if (!this._effect.isReady()) {
+            return false;
+        }
+
+        return true;
+    };
+
+    WORLDMONGER.WaterMaterial.prototype.bind = function (world, mesh) {
+        this._time += 0.0001 * this._scene.getAnimationRatio();
+
+        this._effect.setMatrix("world", world);
+        this._effect.setMatrix("worldViewProjection", world.multiply(this._scene.getTransformMatrix()));
+        this._effect.setVector3("vEyePosition", this._scene.activeCamera.position);
+        this._effect.setVector3("vLightPosition", this.light.position);
+        this._effect.setColor3("waterColor", this.waterColor);
+        this._effect.setFloat4("vLevels", this.waterColorLevel, this.fresnelLevel, this.reflectionLevel, this.refractionLevel);
+        this._effect.setFloat2("waveData", this.waveLength, this.waveHeight);
+
+        // Textures        
+        this._effect.setMatrix("windMatrix", this.bumpTexture._computeTextureMatrix().multiply(BABYLON.Matrix.Translation(this.waterDirection.x * this._time, this.waterDirection.y * this._time, 0)));
+        this._effect.setTexture("bumpSampler", this.bumpTexture);
+        this._effect.setTexture("reflectionSampler", this.reflectionTexture);
+        this._effect.setTexture("refractionSampler", this.refractionTexture);
+    };
+
+    WORLDMONGER.WaterMaterial.prototype.dispose = function () {
+        if (this.bumpTexture) {
+            this.bumpTexture.dispose();
+        }
+        
+        if (this.groundTexture) {
+            this.groundTexture.dispose();
+        }
+
+        if (this.snowTexture) {
+            this.snowTexture.dispose();
+        }
+        this.baseDispose();
+    };
+})();

Samples/Scenes/WorldMonger/elevationControl.js

@@ -0,0 +1,307 @@
+var WORLDMONGER = WORLDMONGER || {};
+
+(function () {
+    WORLDMONGER.ElevationControl = function (ground) {
+        this._ground = ground;
+        this.radius = 5.0;
+        this._invertDirection = 1.0;
+        this.heightMin = 0;
+        this.heightMax = 11.0;
+        
+        // Particle system
+        var scene = ground.getScene();
+        var particleSystem = new BABYLON.ParticleSystem("particles", 4000, scene);
+        particleSystem.particleTexture = new BABYLON.Texture("Assets/Flare.png", scene);
+        particleSystem.minAngularSpeed = -4.5;
+        particleSystem.maxAngularSpeed = 4.5;
+        particleSystem.minSize = 0.5;
+        particleSystem.maxSize = 4.0;
+        particleSystem.minLifeTime = 0.5;
+        particleSystem.maxLifeTime = 2.0;
+        particleSystem.minEmitPower = 0.5;
+        particleSystem.maxEmitPower = 1.0;
+        particleSystem.emitRate = 400;
+        particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
+        particleSystem.minEmitBox = new BABYLON.Vector3(0, 0, 0);
+        particleSystem.maxEmitBox = new BABYLON.Vector3(0, 0, 0);
+        particleSystem.direction1 = new BABYLON.Vector3(0, 1, 0);
+        particleSystem.direction2 = new BABYLON.Vector3(0, 1, 0);
+        particleSystem.color1 = new BABYLON.Color4(0, 0, 1, 1);
+        particleSystem.color2 = new BABYLON.Color4(1, 1, 1, 1);
+        particleSystem.gravity = new BABYLON.Vector3(0, 5, 0);
+        particleSystem.manualEmitCount = 0;
+        particleSystem.emitter = new BABYLON.Vector3(0, 0, 0);
+        particleSystem.start();
+
+        this._particleSystem = particleSystem;
+    };
+
+    WORLDMONGER.ElevationControl.prototype.direction = 1;
+
+    WORLDMONGER.ElevationControl.prototype.attachControl = function (canvas) {
+        var currentPosition;
+        var that = this;
+
+        this._onBeforeRender = function () {
+            if (!currentPosition) {
+                return;
+            }
+
+            var pickInfo = that._ground.getScene().pick(currentPosition.x, currentPosition.y);
+
+            if (!pickInfo.hit)
+                return;
+
+            if (pickInfo.pickedMesh != that._ground)
+                return;
+
+            that._particleSystem.emitter = pickInfo.pickedPoint.add(new BABYLON.Vector3(0, 3, 0));
+            that._particleSystem.manualEmitCount += 400;
+
+            that._elevateFaces(pickInfo, that.radius, 0.2);
+        };
+
+
+        this._onPointerDown = function (evt) {
+            evt.preventDefault();
+
+            currentPosition = {
+                x: evt.clientX,
+                y: evt.clientY
+            };            
+        };
+
+        this._onPointerUp = function (evt) {
+            evt.preventDefault();
+
+            currentPosition = null;
+        };
+
+        this._onPointerMove = function (evt) {
+            evt.preventDefault();
+
+            if (!currentPosition) {
+                return;
+            }
+
+            that._invertDirection = evt.button == 2 ? -1 : 1;
+
+            currentPosition = {
+                x: evt.clientX,
+                y: evt.clientY
+            };
+        };
+
+        this._onLostFocus = function () {
+            currentPosition = null;
+        };
+
+        canvas.addEventListener("pointerdown", this._onPointerDown, true);
+        canvas.addEventListener("pointerup", this._onPointerUp, true);
+        canvas.addEventListener("pointerout", this._onPointerUp, true);
+        canvas.addEventListener("pointermove", this._onPointerMove, true);
+        window.addEventListener("blur", this._onLostFocus, true);
+
+        this._ground.getScene().registerBeforeRender(this._onBeforeRender);
+    };
+
+    WORLDMONGER.ElevationControl.prototype.detachControl = function (canvas) {
+        canvas.removeEventListener("pointerdown", this._onPointerDown);
+        canvas.removeEventListener("pointerup", this._onPointerUp);
+        canvas.removeEventListener("pointerout", this._onPointerUp);
+        canvas.removeEventListener("pointermove", this._onPointerMove);
+        window.removeEventListener("blur", this._onLostFocus);
+
+        this._ground.getScene().unregisterBeforeRender(this._onBeforeRender);
+    };
+
+    WORLDMONGER.ElevationControl.prototype._prepareDataModelForElevation = function () {
+        if (this._facesOfVertices == null) {
+            this._facesOfVertices = [];
+
+            this._groundVertices = this._ground.getVertices();
+            this._groundIndices = this._ground.getIndices();
+
+            this._groundPositions = [];
+            var index;
+            for (index = 0; index < this._groundVertices.length; index += this._ground.getFloatVertexStrideSize()) {
+                this._groundPositions.push(new BABYLON.Vector3(this._groundVertices[index], this._groundVertices[index + 1], this._groundVertices[index + 2]));
+            }
+
+            this._groundFacesNormals = [];
+            for (index = 0; index < this._ground.getTotalIndices() / 3; index++) {
+                this._computeFaceNormal(index);
+            }
+
+            this._getFacesOfVertices();
+        }
+    };
+
+    WORLDMONGER.ElevationControl.prototype._getFaceVerticesIndex = function (faceID) {
+        return {
+            v1: this._groundIndices[faceID * 3],
+            v2: this._groundIndices[faceID * 3 + 1],
+            v3: this._groundIndices[faceID * 3 + 2]
+        };
+    };
+
+    WORLDMONGER.ElevationControl.prototype._computeFaceNormal = function (face) {
+        var faceInfo = this._getFaceVerticesIndex(face);
+
+        var v1v2 = this._groundPositions[faceInfo.v1].subtract(this._groundPositions[faceInfo.v2]);
+        var v3v2 = this._groundPositions[faceInfo.v3].subtract(this._groundPositions[faceInfo.v2]);
+
+        this._groundFacesNormals[face] = BABYLON.Vector3.Normalize(BABYLON.Vector3.Cross(v1v2, v3v2));
+    };
+
+    WORLDMONGER.ElevationControl.prototype._getFacesOfVertices = function () {
+        this._facesOfVertices = [];
+        this._subdivisionsOfVertices = [];
+        var index;
+
+        for (index = 0; index < this._groundPositions.length; index++) {
+            this._facesOfVertices[index] = [];
+            this._subdivisionsOfVertices[index] = [];
+        }
+
+        for (index = 0; index < this._groundIndices.length; index++) {
+            this._facesOfVertices[this._groundIndices[index]].push((index / 3) | 0);
+        }
+
+        for (var subIndex = 0; subIndex < this._ground.subMeshes.length; subIndex++) {
+            var subMesh = this._ground.subMeshes[subIndex];
+            for (index = subMesh.verticesStart; index < subMesh.verticesStart + subMesh.verticesCount; index++) {
+                this._subdivisionsOfVertices[index].push(subMesh);
+            }
+        }
+    };
+
+    WORLDMONGER.ElevationControl.prototype._isBoxSphereIntersected = function(box, sphereCenter, sphereRadius) {
+        var vector = BABYLON.Vector3.Clamp(sphereCenter, box.minimumWorld, box.maximumWorld);
+        var num = BABYLON.Vector3.DistanceSquared(sphereCenter, vector);
+        return (num <= (sphereRadius * sphereRadius));
+    };
+
+    WORLDMONGER.ElevationControl.prototype._elevateFaces = function (pickInfo, radius, height) {
+        this._prepareDataModelForElevation();
+        this._selectedVertices = [];
+
+        // Impact zone
+        var sphereCenter = pickInfo.pickedPoint;
+        sphereCenter.y = 0;
+        var index;
+
+        // Determine list of vertices
+        for (var subIndex = 0; subIndex < this._ground.subMeshes.length; subIndex++) {
+            var subMesh = this._ground.subMeshes[subIndex];
+
+            if (!this._isBoxSphereIntersected(subMesh.getBoundingInfo().boundingBox, sphereCenter, radius)) {
+                continue;
+            }
+
+            for (index = subMesh.verticesStart; index < subMesh.verticesStart + subMesh.verticesCount; index++) {
+                var position = this._groundPositions[index];
+                sphereCenter.y = position.y;
+
+                var distance = BABYLON.Vector3.Distance(position, sphereCenter);
+
+                if (distance < radius) {
+                    this._selectedVertices[index] = distance;
+                }
+            }
+        }
+
+        // Elevate vertices
+        var stride = this._ground.getFloatVertexStrideSize();
+        for (var selectedVertice in this._selectedVertices) {
+            var position = this._groundPositions[selectedVertice];
+            var distance = this._selectedVertices[selectedVertice];
+
+            var fullHeight = height * this.direction * this._invertDirection;
+            if (distance < radius * 0.3) {
+                position.y += fullHeight;
+            } else {
+                position.y += fullHeight * (1.0 - (distance - radius * 0.3) / (radius * 0.7));
+            }
+
+            if (position.y > this.heightMax)
+                position.y = this.heightMax;
+            else if (position.y < this.heightMin)
+                position.y = this.heightMin;
+
+            this._groundVertices[selectedVertice * stride + 1] = position.y;
+
+            this._updateSubdivisions(selectedVertice);
+        }
+
+        // Normals
+        this._reComputeNormals()
+
+        // Update vertex buffer
+        this._ground.updateVertices(this._groundVertices);
+    };
+
+    WORLDMONGER.ElevationControl.prototype._reComputeNormals = function () {
+        var faces = [];
+        var face;
+
+        for (selectedVertice in this._selectedVertices) {
+            var faceOfVertices = this._facesOfVertices[selectedVertice];
+            for (var index = 0; index < faceOfVertices.length; index++) {
+                faces[faceOfVertices[index]] = true;
+            }
+        }
+
+        for (face in faces) {
+            this._computeFaceNormal(face);
+        }
+
+        for (face in faces) {
+            var faceInfo = this._getFaceVerticesIndex(face);
+            this._computeNormal(faceInfo.v1);
+            this._computeNormal(faceInfo.v2);
+            this._computeNormal(faceInfo.v3);
+        }
+    };
+
+    WORLDMONGER.ElevationControl.prototype._computeNormal = function (vertexIndex) {
+        var faces = this._facesOfVertices[vertexIndex];
+
+        var normal = BABYLON.Vector3.Zero();
+        for (var index = 0; index < faces.length; index++) {
+            normal = normal.add(this._groundFacesNormals[faces[index]]);
+        }
+
+        normal = BABYLON.Vector3.Normalize(normal.scale(1.0 / faces.length));
+
+        var stride = this._ground.getFloatVertexStrideSize();
+
+        this._groundVertices[vertexIndex * stride + 3] = normal.x;
+        this._groundVertices[vertexIndex * stride + 4] = normal.y;
+        this._groundVertices[vertexIndex * stride + 5] = normal.z;
+    }
+
+    WORLDMONGER.ElevationControl.prototype._updateSubdivisions = function (vertexIndex) {
+        for (var index = 0; index < this._subdivisionsOfVertices[vertexIndex].length; index++) {
+            var sub = this._subdivisionsOfVertices[vertexIndex][index];
+            var boundingBox = sub.getBoundingInfo().boundingBox;
+            var boundingSphere = sub.getBoundingInfo().boundingSphere;
+
+            if (this._groundPositions[vertexIndex].y < boundingBox.minimum.y) {
+                boundingSphere.radius += Math.abs(this._groundPositions[vertexIndex].y - boundingBox.minimum.y);
+                boundingBox.minimum.y = this._groundPositions[vertexIndex].y;
+            } else if (this._groundPositions[vertexIndex].y > boundingBox.maximum.y) {
+                boundingBox.maximum.y = this._groundPositions[vertexIndex].y;
+            }
+        }
+
+        var boundingBox = this._ground.getBoundingInfo().boundingBox;
+        var boundingSphere = this._ground.getBoundingInfo().boundingSphere;
+        if (this._groundPositions[vertexIndex].y < boundingBox.minimum.y) {
+            boundingSphere.Radius += Math.abs(this._groundPositions[vertexIndex].y - boundingBox.minimum.y);
+            boundingBox.minimum.y = this._groundPositions[vertexIndex].y;
+        } else if (this._groundPositions[vertexIndex].y > boundingBox.maximum.y) {
+            boundingBox.maximum.y = this._groundPositions[vertexIndex].y;
+        }
+    };
+})();

Samples/Scenes/WorldMonger/index.css

@@ -0,0 +1,156 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font-family: "Segoe WP", "Segoe UI", "Verdana", "Arial";
+}
+
+a {
+    color: white;
+}
+
+a:visited {
+    color: white;
+}
+
+#renderCanvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    margin-bottom: 70px;
+    touch-action: none;
+    -ms-touch-action: none;
+}
+
+.help {
+    position: absolute;
+    background-color: #0077DB;
+    right: 0;
+    bottom: 70px;
+    color: white;
+    padding-right: 10px;
+    width: 340px;
+    height: 50px;
+    transition: all 0.5s ease;
+    -webkit-transition: all 0.5s ease;
+    transform: translateX(400px);
+    -webkit-transform: translateX(400px);
+}
+
+.help.shown {
+    transform: translateX(0px);
+    -webkit-transform: translateX(0px);
+}
+
+.helpText {
+    cursor: default;
+    position: absolute;
+    margin: 10px;
+    bottom: 5px;
+}
+
+.helpArrow {
+    position: absolute;
+    margin: 5px;
+    margin-right: 10px;
+    right: 0px;
+}
+
+#sliders {
+    position: absolute;
+    top: 25%;
+    right: 10px;
+    height: 50%;
+    width: 150px;
+    text-align: center;
+}
+
+.slider {
+    height: 20%;
+    margin-bottom: 5px;
+    margin-left: 70px;
+}
+
+.sliderText {
+    color: white;
+    font-size: 20px;
+    cursor: default;
+}
+
+#fps {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 20px;
+    color: white;
+    text-shadow: 2px 2px 0 black;
+}
+
+#babylonLogo {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+}
+
+#footer {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    bottom: 0;
+    background-color: #0077DB;
+    padding-top: 5px;
+    padding-left: 15px;
+}
+
+#footerRight {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+}
+
+#footerLeft {
+    position: absolute;
+    bottom: 5px;
+    left: 15px;
+    color: white;
+}
+
+#logo {
+    position: absolute;
+    width: 194px;
+    bottom: 0;
+    left: 50%;
+    margin-left: -97px;
+}
+
+.sepButton {
+    width: 24px;
+    height: 40px;
+    margin-right: 20px;
+}
+
+.controlButton {
+    border-radius: 25px;
+    border: 2px solid white;
+    width: 40px;
+    height: 40px;
+    margin-right: 20px;
+}
+
+    .controlButton.selected {
+        background-color: orange;
+    }
+
+    .controlButton:hover {
+        transform: scale(0.95);
+        -webkit-transform: scale(0.95);
+    }
+
+    .controlButton:active {
+        transform: scale(0.9);
+        -webkit-transform: scale(0.9);
+        background-color: orange;
+    }

Samples/Scenes/WorldMonger/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Babylon Engine for HTML5</title>
+    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
+    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+    <link href="index.css" rel="stylesheet" />
+    <script src="hand.minified-1.1.0.js"></script>
+    <script src="babylon.js"></script>
+    <script src="Shaders/Ground/groundMaterial.js"></script>
+    <script src="Shaders/Water/waterMaterial.js"></script>
+    <script src="index.js"></script>
+    <script src="elevationControl.js"></script>
+</head>
+<body onload="onload();">
+    <canvas id="renderCanvas"></canvas>
+    <div id="fps"></div>
+    <div id="sliders">
+        <p>
+            <div id="slider-vertical" class="slider"></div>
+            <div id="brushSizeText" class="sliderText">Brush size</div>
+            <br />
+        </p>
+        <p>
+            <div id="slider-range" class="slider"></div>
+            <div id="rangeText" class="sliderText">Height limits</div>
+        </p>
+        <p>
+            <div id="qualitySlider" class="slider"></div>
+            <div id="qualityText" class="sliderText">Quality</div>
+            <br />
+        </p>
+    </div>
+    <div id="help01" class="help">
+        <span class="helpText">Use these tools to sculpt the ground</span>
+        <img class="helpArrow" src="Assets/arrow.png" />
+    </div>
+    <div id="help02" class="help">
+        <span class="helpText">Use the camera tool to control the point of view</span>
+    </div>
+    <div id="footer">
+        <div id="footerLeft">
+            Powered by <a href="http://www.babylonjs.com/" target="_blank">Babylon.js</a><br />Gfx by <a href="http://blogs.msdn.com/b/designmichel" target="_blank">Michel Rousseau</a>  -  Music by <a href="http://aka.ms/davrous" target="_blank">David Rousset</a>
+        </div>
+        <div id="footerRight">
+            <img src="Assets/video.png" class="controlButton selected" id="cameraButton" alt="Control the camera" />
+            <img src="Assets/sep.png" class="sepButton" />
+            <img src="Assets/up.png" class="controlButton" id="elevationButton" alt="Elevate the ground" />
+            <img src="Assets/down.png" class="controlButton" id="digButton" alt="Dig the ground" />
+        </div>
+        <a href="http://apps.microsoft.com/windows/app/worldmonger/4a3fa8c4-5086-4b91-b63b-a878da33a28d" target="_blank" id="logo"><img src="Assets/widelogo.png" /></a>
+    </div>
+    <audio autoplay loop>
+        <source src="Assets/WorldMongerTheme.mp3" type="audio/mpeg">
+    </audio>
+</body>
+</html>

Samples/Scenes/WorldMonger/index.js

@@ -0,0 +1,223 @@
+var onload = function () {
+    var canvas = document.getElementById("renderCanvas");
+    var divFps = document.getElementById("fps");
+    var mode = "CAMERA";
+
+    // Babylon
+    BABYLON.Engine.ShadersRepository = "";
+    var engine = new BABYLON.Engine(canvas, true);
+    var scene = new BABYLON.Scene(engine);
+    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
+    var sun = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 100, 2), scene);
+
+    camera.setPosition(new BABYLON.Vector3(20, 40, 20));
+    camera.attachControl(canvas);
+
+    // 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("Assets/skybox/skybox", scene);
+    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+    skybox.material = skyboxMaterial;
+
+    // Grounds
+    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "Assets/heightMap.png", 100, 100, 100, 0, 12, scene, true);
+    var groundMaterial = new WORLDMONGER.GroundMaterial("ground", scene, sun);
+    ground.material = groundMaterial;
+    ground.position.y = -2.0;    
+
+    var extraGround = BABYLON.Mesh.CreateGround("extraGround", 1000, 1000, 1, scene, false);
+    var extraGroundMaterial = new BABYLON.StandardMaterial("extraGround", scene);
+    extraGroundMaterial.diffuseTexture = new BABYLON.Texture("Shaders/Ground/sand.jpg", scene);
+    extraGroundMaterial.diffuseTexture.uScale = 60;
+    extraGroundMaterial.diffuseTexture.vScale = 60;
+    extraGround.position.y = -2.05;
+    extraGround.material = extraGroundMaterial;
+
+    // Water
+    var water = BABYLON.Mesh.CreateGround("water", 1000, 1000, 1, scene, false);
+    var waterMaterial = new WORLDMONGER.WaterMaterial("water", scene, sun);
+    waterMaterial.refractionTexture.renderList.push(ground);
+    waterMaterial.refractionTexture.renderList.push(extraGround);
+
+    waterMaterial.reflectionTexture.renderList.push(ground);
+    waterMaterial.reflectionTexture.renderList.push(skybox);
+
+    water.isPickable = false;
+    water.material = waterMaterial;
+    
+    // Elevation
+    var elevationControl = new WORLDMONGER.ElevationControl(ground);
+
+    // Render loop
+    var renderFunction = function () {
+        if (ground.isReady && ground.subMeshes.length == 1) {
+            ground.subdivide(20);    // Subdivide to optimize picking
+        }
+
+        // Camera
+        if (camera.beta < 0.1)
+            camera.beta = 0.1;
+        else if (camera.beta > (Math.PI / 2) * 0.92)
+            camera.beta = (Math.PI / 2) * 0.92;
+
+        if (camera.radius > 70)
+            camera.radius = 70;
+
+        if (camera.radius < 5)
+            camera.radius = 5;
+
+        // Fps
+        divFps.innerHTML = BABYLON.Tools.GetFps().toFixed() + " fps";
+
+        // Render scene
+        scene.render();
+
+        // Animations
+        skybox.rotation.y += 0.0001 * scene.getAnimationRatio();
+    };
+
+    // Launch render loop
+    engine.runRenderLoop(renderFunction);
+
+    // Resize
+    window.addEventListener("resize", function () {
+        engine.resize();
+    });
+
+    // UI
+    var cameraButton = document.getElementById("cameraButton");
+    var elevationButton = document.getElementById("elevationButton");
+    var digButton = document.getElementById("digButton");
+    var help01 = document.getElementById("help01");
+    var help02 = document.getElementById("help02");
+    
+    window.oncontextmenu = function () {
+        return false;
+    };
+
+    cameraButton.addEventListener("pointerdown", function () {
+        if (mode == "CAMERA")
+            return;
+        camera.attachControl(canvas);
+        elevationControl.detachControl(canvas);
+
+        mode = "CAMERA";
+        cameraButton.className = "controlButton selected";
+        digButton.className = "controlButton";
+        elevationButton.className = "controlButton";
+    });
+
+    elevationButton.addEventListener("pointerdown", function () {
+        help01.className = "help";
+        help02.className = "help";
+
+        if (mode == "ELEVATION")
+            return;
+
+        if (mode == "CAMERA") {
+            camera.detachControl(canvas);
+            elevationControl.attachControl(canvas);
+        }
+
+        mode = "ELEVATION";
+        elevationControl.direction = 1;
+
+        elevationButton.className = "controlButton selected";
+        digButton.className = "controlButton";
+        cameraButton.className = "controlButton";
+    });
+
+    digButton.addEventListener("pointerdown", function () {
+        help01.className = "help";
+        help02.className = "help";
+        
+        if (mode == "DIG")
+            return;
+
+        if (mode == "CAMERA") {
+            camera.detachControl(canvas);
+            elevationControl.attachControl(canvas);
+        }
+
+        mode = "DIG";
+        elevationControl.direction = -1;
+
+        digButton.className = "controlButton selected";
+        elevationButton.className = "controlButton";
+        cameraButton.className = "controlButton";
+    });
+
+    // Sliders
+    $("#slider-vertical").slider({
+        orientation: "vertical",
+        range: "min",
+        min: 2,
+        max: 15,
+        value: 5,
+        slide: function (event, ui) {
+            elevationControl.radius = ui.value;
+        }
+    });
+
+    $("#slider-range").slider({
+        orientation: "vertical",
+        range: true,
+        min: 0,
+        max: 12,
+        values: [0, 11],
+        slide: function (event, ui) {
+            elevationControl.heightMin = ui.values[0];
+            elevationControl.heightMax = ui.values[1];
+        }
+    });
+    
+    $("#qualitySlider").slider({
+        orientation: "vertical",
+        range: "min",
+        min: 0,
+        max: 3,
+        value: 3,
+        slide: function (event, ui) {
+            switch (ui.value) {
+                case 3:
+                    waterMaterial.refractionTexture.resize(512, true);
+                    waterMaterial.reflectionTexture.resize(512, true);
+                    scene.getEngine().setHardwareScalingLevel(1);
+                    scene.particlesEnabled = true;
+                    break;
+                case 2:
+                    waterMaterial.refractionTexture.resize(256, true);
+                    waterMaterial.reflectionTexture.resize(256, true);
+                    scene.getEngine().setHardwareScalingLevel(1);
+                    scene.particlesEnabled = false;
+                    break;
+                case 1:
+                    waterMaterial.refractionTexture.resize(256, true);
+                    waterMaterial.reflectionTexture.resize(256, true);
+                    scene.getEngine().setHardwareScalingLevel(2);
+                    scene.particlesEnabled = false;
+                    break;
+                case 0:
+                    waterMaterial.refractionTexture.resize(256, true);
+                    waterMaterial.reflectionTexture.resize(256, true);
+                    scene.getEngine().setHardwareScalingLevel(3);
+                    scene.particlesEnabled = false;
+                    break;
+            }
+        }
+    });
+    
+    help01.className = "help shown";
+
+    setTimeout(function() {
+        help01.className = "help";
+        help02.className = "help shown";
+        setTimeout(function() {
+            help02.className = "help";
+        }, 5000);
+    }, 5000);
+};