Merge pull request #884 from meulta/master

adding gui to procedural texture library

proceduralTexturesLibrary/proceduralTextures/brick/babylon.brickProceduralTexture.ts

@@ -1,59 +1,58 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-	export class BrickProceduralTexture extends ProceduralTexture {
-        private _numberOfBricksHeight: number = 15;
-        private _numberOfBricksWidth: number = 5;
-        private _jointColor = new Color3(0.72, 0.72, 0.72);
-        private _brickColor = new Color3(0.77, 0.47, 0.40);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "brickProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("numberOfBricksHeight", this._numberOfBricksHeight);
-            this.setFloat("numberOfBricksWidth", this._numberOfBricksWidth);
-            this.setColor3("brickColor", this._brickColor);
-            this.setColor3("jointColor", this._jointColor);
-        }
-
-        public get numberOfBricksHeight(): number {
-            return this._numberOfBricksHeight;
-        }
-
-        public set numberOfBricksHeight(value: number) {
-            this._numberOfBricksHeight = value;
-            this.updateShaderUniforms();
-        }
-
-        public get numberOfBricksWidth(): number {
-            return this._numberOfBricksWidth;
-        }
-
-        public set numberOfBricksWidth(value: number) {
-            this._numberOfBricksWidth = value;
-            this.updateShaderUniforms();
-        }
-
-        public get jointColor(): Color3 {
-            return this._jointColor;
-        }
-
-        public set jointColor(value: Color3) {
-            this._jointColor = value;
-            this.updateShaderUniforms();
-        }
-
-        public get brickColor(): Color3 {
-            return this._brickColor;
-        }
-
-        public set brickColor(value: Color3) {
-            this._brickColor = value;
-            this.updateShaderUniforms();
-        }
-    }	
+ /// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+	export class BrickProceduralTexture extends ProceduralTexture {
+        private _numberOfBricksHeight: number = 15;
+        private _numberOfBricksWidth: number = 5;
+        private _jointColor = new Color3(0.72, 0.72, 0.72);
+        private _brickColor = new Color3(0.77, 0.47, 0.40);
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "brickProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setFloat("numberOfBricksHeight", this._numberOfBricksHeight);
+            this.setFloat("numberOfBricksWidth", this._numberOfBricksWidth);
+            this.setColor3("brickColor", this._brickColor);
+            this.setColor3("jointColor", this._jointColor);
+        }
+
+        public get numberOfBricksHeight(): number {
+            return this._numberOfBricksHeight;
+        }
+
+        public set numberOfBricksHeight(value: number) {
+            this._numberOfBricksHeight = value;
+            this.updateShaderUniforms();
+        }
+
+        public get numberOfBricksWidth(): number {
+            return this._numberOfBricksWidth;
+        }
+
+        public set numberOfBricksWidth(value: number) {
+            this._numberOfBricksWidth = value;
+            this.updateShaderUniforms();
+        }
+
+        public get jointColor(): Color3 {
+            return this._jointColor;
+        }
+
+        public set jointColor(value: Color3) {
+            this._jointColor = value;
+            this.updateShaderUniforms();
+        }
+
+        public get brickColor(): Color3 {
+            return this._brickColor;
+        }
+
+        public set brickColor(value: Color3) {
+            this._brickColor = value;
+            this.updateShaderUniforms();
+        }
+    }	
 }

proceduralTexturesLibrary/proceduralTextures/cloud/babylon.cloudProceduralTexture.ts

@@ -1,37 +1,36 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class CloudProceduralTexture extends ProceduralTexture {
-        private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);
-        private _cloudColor = new Color4(1, 1, 1, 1.0);
-    
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
-    
-        public updateShaderUniforms() {
-            this.setColor4("skyColor", this._skyColor);
-            this.setColor4("cloudColor", this._cloudColor);
-        }
-    
-        public get skyColor(): Color4 {
-            return this._skyColor;
-        }
-    
-        public set skyColor(value: Color4) {
-            this._skyColor = value;
-            this.updateShaderUniforms();
-        }
-    
-        public get cloudColor(): Color4 {
-            return this._cloudColor;
-        }
-    
-        public set cloudColor(value: Color4) {
-            this._cloudColor = value;
-            this.updateShaderUniforms();
-        }
-    }
+ /// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+    export class CloudProceduralTexture extends ProceduralTexture {
+        private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);
+        private _cloudColor = new Color4(1, 1, 1, 1.0);
+    
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+    
+        public updateShaderUniforms() {
+            this.setColor4("skyColor", this._skyColor);
+            this.setColor4("cloudColor", this._cloudColor);
+        }
+    
+        public get skyColor(): Color4 {
+            return this._skyColor;
+        }
+    
+        public set skyColor(value: Color4) {
+            this._skyColor = value;
+            this.updateShaderUniforms();
+        }
+    
+        public get cloudColor(): Color4 {
+            return this._cloudColor;
+        }
+    
+        public set cloudColor(value: Color4) {
+            this._cloudColor = value;
+            this.updateShaderUniforms();
+        }
+    }
 }

proceduralTexturesLibrary/proceduralTextures/fire/babylon.fireProceduralTexture.ts

@@ -1,118 +1,117 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
- export class FireProceduralTexture 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, "fireProceduralTexture", 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();
-        }
-    }
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+ export class FireProceduralTexture 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, "fireProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this._fireColors = FireProceduralTexture.RedFireColors;
+            this.updateShaderUniforms();
+        }
+
+        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/grass/babylon.grassProceduralTexture.ts

@@ -1,49 +1,48 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class GrassProceduralTexture extends ProceduralTexture {
-        private _grassColors: Color3[];
-        private _herb1 = new Color3(0.29, 0.38, 0.02);
-        private _herb2 = new Color3(0.36, 0.49, 0.09);
-        private _herb3 = new Color3(0.51, 0.6, 0.28);
-        private _groundColor = new Color3(1, 1, 1);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "grassProceduralTexture", scene, fallbackTexture, generateMipMaps);
-
-            this._grassColors = [
-                new Color3(0.29, 0.38, 0.02),
-                new Color3(0.36, 0.49, 0.09),
-                new Color3(0.51, 0.6, 0.28)
-            ];
-
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
-
-        public updateShaderUniforms() {
-            this.setColor3("herb1Color", this._grassColors[0]);
-            this.setColor3("herb2Color", this._grassColors[1]);
-            this.setColor3("herb3Color", this._grassColors[2]);
-            this.setColor3("groundColor", this._groundColor);
-        }
-
-        public get grassColors(): Color3[] {
-            return this._grassColors;
-        }
-
-        public set grassColors(value: Color3[]) {
-            this._grassColors = value;
-            this.updateShaderUniforms();
-        }
-
-        public get groundColor(): Color3 {
-            return this._groundColor;
-        }
-
-        public set groundColor(value: Color3) {
-            this.groundColor = value;
-            this.updateShaderUniforms();
-        }
-    }
+ /// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+    export class GrassProceduralTexture extends ProceduralTexture {
+        private _grassColors: Color3[];
+        private _herb1 = new Color3(0.29, 0.38, 0.02);
+        private _herb2 = new Color3(0.36, 0.49, 0.09);
+        private _herb3 = new Color3(0.51, 0.6, 0.28);
+        private _groundColor = new Color3(1, 1, 1);
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "grassProceduralTexture", scene, fallbackTexture, generateMipMaps);
+
+            this._grassColors = [
+                new Color3(0.29, 0.38, 0.02),
+                new Color3(0.36, 0.49, 0.09),
+                new Color3(0.51, 0.6, 0.28)
+            ];
+
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setColor3("herb1Color", this._grassColors[0]);
+            this.setColor3("herb2Color", this._grassColors[1]);
+            this.setColor3("herb3Color", this._grassColors[2]);
+            this.setColor3("groundColor", this._groundColor);
+        }
+
+        public get grassColors(): Color3[] {
+            return this._grassColors;
+        }
+
+        public set grassColors(value: Color3[]) {
+            this._grassColors = value;
+            this.updateShaderUniforms();
+        }
+
+        public get groundColor(): Color3 {
+            return this._groundColor;
+        }
+
+        public set groundColor(value: Color3) {
+            this.groundColor = value;
+            this.updateShaderUniforms();
+        }
+    }
 }

proceduralTexturesLibrary/proceduralTextures/marble/babylon.marbleProceduralTexture.ts

@@ -1,61 +1,58 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class MarbleProceduralTexture extends ProceduralTexture {
-        private _numberOfTilesHeight: number = 3;
-        private _numberOfTilesWidth: number = 3;
-        private _amplitude: number = 9.0;
-        private _marbleColor = new Color3(0.77, 0.47, 0.40);
-        private _jointColor = new Color3(0.72, 0.72, 0.72);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "marbleProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("numberOfTilesHeight", this._numberOfTilesHeight);
-            this.setFloat("numberOfTilesWidth", this._numberOfTilesWidth);
-            this.setFloat("amplitude", this._amplitude);
-            this.setColor3("marbleColor", this._marbleColor);
-            this.setColor3("jointColor", this._jointColor);
-        }
-
-        public get numberOfTilesHeight(): number {
-            return this._numberOfTilesHeight;
-        }
-
-        public set numberOfTilesHeight(value: number) {
-            this._numberOfTilesHeight = value;
-            this.updateShaderUniforms();
-        }
-
-        public get numberOfTilesWidth(): number {
-            return this._numberOfTilesWidth;
-        }
-
-        public set numberOfTilesWidth(value: number) {
-            this._numberOfTilesWidth = value;
-            this.updateShaderUniforms();
-        }
-
-        public get jointColor(): Color3 {
-            return this._jointColor;
-        }
-
-        public set jointColor(value: Color3) {
-            this._jointColor = value;
-            this.updateShaderUniforms();
-        }
-
-        public get marbleColor(): Color3 {
-            return this._marbleColor;
-        }
-
-        public set marbleColor(value: Color3) {
-            this._marbleColor = value;
-            this.updateShaderUniforms();
-        }
-    }
+ /// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+    export class MarbleProceduralTexture extends ProceduralTexture {
+        private _numberOfTilesHeight: number = 3;
+        private _numberOfTilesWidth: number = 3;
+        private _amplitude: number = 9.0;
+        private _jointColor = new Color3(0.72, 0.72, 0.72);
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "marbleProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setFloat("numberOfTilesHeight", this._numberOfTilesHeight);
+            this.setFloat("numberOfTilesWidth", this._numberOfTilesWidth);
+            this.setFloat("amplitude", this._amplitude);
+            this.setColor3("jointColor", this._jointColor);
+        }
+
+        public get numberOfTilesHeight(): number {
+            return this._numberOfTilesHeight;
+        }
+
+        public set numberOfTilesHeight(value: number) {
+            this._numberOfTilesHeight = value;
+            this.updateShaderUniforms();
+        }
+        
+        public get amplitude(): number {
+            return this._amplitude;
+        }
+
+        public set amplitude(value: number) {
+            this._amplitude = value;
+            this.updateShaderUniforms();
+        }
+
+        public get numberOfTilesWidth(): number {
+            return this._numberOfTilesWidth;
+        }
+
+        public set numberOfTilesWidth(value: number) {
+            this._numberOfTilesWidth = value;
+            this.updateShaderUniforms();
+        }
+
+        public get jointColor(): Color3 {
+            return this._jointColor;
+        }
+
+        public set jointColor(value: Color3) {
+            this._jointColor = value;
+            this.updateShaderUniforms();
+        }
+    }
 }

proceduralTexturesLibrary/proceduralTextures/marble/marbleProceduralTexture.fragment.fx

@@ -1,85 +1,85 @@
-precision highp float;
-
-varying vec2 vPosition;
-varying vec2 vUV;
-
-uniform float numberOfTilesHeight;
-uniform float numberOfTilesWidth;
-uniform float amplitude;
-uniform vec3 brickColor;
-uniform vec3 jointColor;
-
-const vec3 tileSize = vec3(1.1, 1.0, 1.1);
-const vec3 tilePct = vec3(0.98, 1.0, 0.98);
-
-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 turbulence(vec2 P)
-{
-	float val = 0.0;
-	float freq = 1.0;
-	for (int i = 0; i < 4; i++)
-	{
-		val += abs(noise(P*freq) / freq);
-		freq *= 2.07;
-	}
-	return val;
-}
-
-float round(float number){
-	return sign(number)*floor(abs(number) + 0.5);
-}
-
-vec3 marble_color(float x)
-{
-	vec3 col;
-	x = 0.5*(x + 1.);
-	x = sqrt(x);             
-	x = sqrt(x);
-	x = sqrt(x);
-	col = vec3(.2 + .75*x);  
-	col.b *= 0.95;           
-	return col;
-}
-
-void main()
-{
-	float brickW = 1.0 / numberOfTilesWidth;
-	float brickH = 1.0 / numberOfTilesHeight;
-	float jointWPercentage = 0.01;
-	float jointHPercentage = 0.01;
-	vec3 color = brickColor;
-	float yi = vUV.y / brickH;
-	float nyi = round(yi);
-	float xi = vUV.x / brickW;
-
-	if (mod(floor(yi), 2.0) == 0.0){
-		xi = xi - 0.5;
-	}
-
-	float nxi = round(xi);
-	vec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);
-
-	if (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){
-		color = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);
-	}
-	else if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){
-		color = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);
-	}
-	else {
-		float t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));
-		t += amplitude * turbulence(brickvUV.xy);
-		t = sin(t);
-		color = marble_color(t);
-	}
-
-	gl_FragColor = vec4(color, 0.0);
+precision highp float;
+
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform float numberOfTilesHeight;
+uniform float numberOfTilesWidth;
+uniform float amplitude;
+uniform vec3 marbleColor;
+uniform vec3 jointColor;
+
+const vec3 tileSize = vec3(1.1, 1.0, 1.1);
+const vec3 tilePct = vec3(0.98, 1.0, 0.98);
+
+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 turbulence(vec2 P)
+{
+	float val = 0.0;
+	float freq = 1.0;
+	for (int i = 0; i < 4; i++)
+	{
+		val += abs(noise(P*freq) / freq);
+		freq *= 2.07;
+	}
+	return val;
+}
+
+float round(float number){
+	return sign(number)*floor(abs(number) + 0.5);
+}
+
+vec3 marble_color(float x)
+{
+	vec3 col;
+	x = 0.5*(x + 1.);
+	x = sqrt(x);             
+	x = sqrt(x);
+	x = sqrt(x);
+	col = vec3(.2 + .75*x);  
+	col.b *= 0.95;           
+	return col;
+}
+
+void main()
+{
+	float brickW = 1.0 / numberOfTilesWidth;
+	float brickH = 1.0 / numberOfTilesHeight;
+	float jointWPercentage = 0.01;
+	float jointHPercentage = 0.01;
+	vec3 color = marbleColor;
+	float yi = vUV.y / brickH;
+	float nyi = round(yi);
+	float xi = vUV.x / brickW;
+
+	if (mod(floor(yi), 2.0) == 0.0){
+		xi = xi - 0.5;
+	}
+
+	float nxi = round(xi);
+	vec2 brickvUV = vec2((xi - floor(xi)) / brickH, (yi - floor(yi)) / brickW);
+
+	if (yi < nyi + jointHPercentage && yi > nyi - jointHPercentage){
+		color = mix(jointColor, vec3(0.37, 0.25, 0.25), (yi - nyi) / jointHPercentage + 0.2);
+	}
+	else if (xi < nxi + jointWPercentage && xi > nxi - jointWPercentage){
+		color = mix(jointColor, vec3(0.44, 0.44, 0.44), (xi - nxi) / jointWPercentage + 0.2);
+	}
+	else {
+		float t = 6.28 * brickvUV.x / (tileSize.x + noise(vec2(vUV)*6.0));
+		t += amplitude * turbulence(brickvUV.xy);
+		t = sin(t);
+		color = marble_color(t);
+	}
+
+	gl_FragColor = vec4(color, 0.0);
 }

proceduralTexturesLibrary/proceduralTextures/road/babylon.roadProceduralTexture.ts

@@ -1,26 +1,25 @@
- /// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-    export class RoadProceduralTexture extends ProceduralTexture {
-        private _roadColor = new Color3(0.53, 0.53, 0.53);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "roadProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
-
-        public updateShaderUniforms() {
-            this.setColor3("roadColor", this._roadColor);
-        }
-
-        public get roadColor(): Color3 {
-            return this._roadColor;
-        }
-
-        public set roadColor(value: Color3) {
-            this._roadColor = value;
-            this.updateShaderUniforms();
-        }
-    }
+ /// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+    export class RoadProceduralTexture extends ProceduralTexture {
+        private _roadColor = new Color3(0.53, 0.53, 0.53);
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "roadProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setColor3("roadColor", this._roadColor);
+        }
+
+        public get roadColor(): Color3 {
+            return this._roadColor;
+        }
+
+        public set roadColor(value: Color3) {
+            this._roadColor = value;
+            this.updateShaderUniforms();
+        }
+    }
 }

proceduralTexturesLibrary/proceduralTextures/starfield/babylon.starfieldProceduralTexture.ts

@@ -78,6 +78,15 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        public get zoom(): number {
+            return this._zoom;
+        }
+
+        public set zoom(value: number) {
+            this._zoom = value;
+            this.updateShaderUniforms();
+        }
+        
         public get tile(): number {
             return this._tile;
         }

proceduralTexturesLibrary/proceduralTextures/starfield/starfieldProceduralTexture.fragment.fx

@@ -31,7 +31,7 @@ void main()
 	dir.xz *= rot1;
 	dir.xy *= rot2;
 	vec3 from = vec3(1., .5, 0.5);
-	from += vec3(localTime*2., localTime, -2.);
+	from += vec3(-2., localTime*2., localTime);
 	from.xz *= rot1;
 	from.xy *= rot2;
 

proceduralTexturesLibrary/proceduralTextures/wood/babylon.woodProceduralTexture.ts

@@ -1,37 +1,36 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
-
-module BABYLON {
-	export class WoodProceduralTexture extends ProceduralTexture {
-        private _ampScale: number = 100.0;
-        private _woodColor: Color3 = new Color3(0.32, 0.17, 0.09);
-
-        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "woodProceduralTexture", scene, fallbackTexture, generateMipMaps);
-            this.updateShaderUniforms();
-            this.refreshRate = 0;
-        }
-
-        public updateShaderUniforms() {
-            this.setFloat("ampScale", this._ampScale);
-            this.setColor3("woodColor", this._woodColor);
-        }
-
-        public get ampScale(): number {
-            return this._ampScale;
-        }
-
-        public set ampScale(value: number) {
-            this._ampScale = value;
-            this.updateShaderUniforms();
-        }
-
-        public get woodColor(): Color3 {
-            return this._woodColor;
-        }
-
-        public set woodColor(value: Color3) {
-            this._woodColor = value;
-            this.updateShaderUniforms();
-        }
-    }
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+	export class WoodProceduralTexture extends ProceduralTexture {
+        private _ampScale: number = 100.0;
+        private _woodColor: Color3 = new Color3(0.32, 0.17, 0.09);
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "woodProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setFloat("ampScale", this._ampScale);
+            this.setColor3("woodColor", this._woodColor);
+        }
+
+        public get ampScale(): number {
+            return this._ampScale;
+        }
+
+        public set ampScale(value: number) {
+            this._ampScale = value;
+            this.updateShaderUniforms();
+        }
+
+        public get woodColor(): Color3 {
+            return this._woodColor;
+        }
+
+        public set woodColor(value: Color3) {
+            this._woodColor = value;
+            this.updateShaderUniforms();
+        }
+    }
 }

proceduralTexturesLibrary/test/index.html

@@ -55,6 +55,9 @@
     <script src="add/addMarblePT.js"></script>
     <script src="add/addStarfieldPT.js"></script>
 	<script>
+		
+		
+		
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
 			var engine = new BABYLON.Engine(canvas, true);
@@ -195,32 +198,149 @@
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 				std.diffuseTexture = currentTexture;
-
+	
+				//placeholder for current texture options			
+				var currentPTOptions = gui.addFolder('Texture Options');
+				var PTOptions = [];
+				
+				dat.GUI.prototype.removeFolder = function(name) {
+					var folder = this.__folders[name];
+					if (!folder) {
+						return;
+					}
+					folder.close();
+					this.__ul.removeChild(folder.domElement.parentNode);
+					delete this.__folders[name];
+					this.onResize();
+				}
+				
+				var resetPTOptions = function(){
+					//empty options
+					while(PTOptions.length > 0){
+						var option = PTOptions.pop()
+						if(option.optionType === "Folder"){
+							currentPTOptions.removeFolder(option.optionValue);
+						}
+						else {
+							currentPTOptions.remove(option.optionValue);
+						}
+					}
+				}
+				
+				var addFloatSubOption = function(guiElement, field, propertyName, proxy, initvalue){
+					proxy[propertyName] = initvalue;
+					guiElement.add(proxy, propertyName).onChange(function () {
+						try {
+							var xvalue = parseFloat(proxy[propertyName]);
+							eval('field.' + propertyName + ' = xvalue');
+						} catch (e) {
+							
+						}
+					});	
+				}
+				
+				var addPToptions = function(pt, fieldNames){
+					for(var fieldid = 0; fieldid < fieldNames.length; fieldid++){
+						var field = fieldNames[fieldid]
+						var added = {};
+						if(typeof pt[field] != 'object' && pt[field] != 'undefined') {
+							added.optionType = "Value";
+							added.optionValue = currentPTOptions.add(pt, fieldNames[fieldid]);
+						}
+						else {
+							var proxy = {};
+							
+							if(pt[field] instanceof BABYLON.Vector2){
+								added.optionType = 'Folder';
+								added.optionValue = field + ' ('+  pt[field].constructor.name +')';
+								var folder = currentPTOptions.addFolder(added.optionValue);
+								addFloatSubOption(folder, pt[field], 'x', proxy, pt[field].x);
+								addFloatSubOption(folder, pt[field], 'y', proxy, pt[field].y);
+							}
+							
+							else if(pt[field] instanceof BABYLON.Vector3){
+								added.optionType = 'Folder';
+								added.optionValue = field + ' ('+  pt[field].constructor.name +')';
+								var folder = currentPTOptions.addFolder(added.optionValue);
+								addFloatSubOption(folder, pt[field], 'x', proxy, pt[field].x);
+								addFloatSubOption(folder, pt[field], 'y', proxy, pt[field].y);								
+								addFloatSubOption(folder, pt[field], 'z', proxy, pt[field].z);								
+							}
+							else if(pt[field] instanceof BABYLON.Vector4){
+								added.optionType = 'Folder';
+								added.optionValue = field + ' ('+  pt[field].constructor.name +')';
+								var folder = currentPTOptions.addFolder(added.optionValue);
+								addFloatSubOption(folder, pt[field], 'x', proxy, pt[field].x);
+								addFloatSubOption(folder, pt[field], 'y', proxy, pt[field].y);								
+								addFloatSubOption(folder, pt[field], 'z', proxy, pt[field].z);									
+								addFloatSubOption(folder, pt[field], 'w', proxy, pt[field].w);									
+							}
+							else if(pt[field] instanceof BABYLON.Color3){
+								added.optionType = 'Folder';
+								added.optionValue = field + ' ('+  pt[field].constructor.name +')';
+								var folder = currentPTOptions.addFolder(added.optionValue);
+								addFloatSubOption(folder, pt[field], 'r', proxy, pt[field].r);
+								addFloatSubOption(folder, pt[field], 'g', proxy, pt[field].g);								
+								addFloatSubOption(folder, pt[field], 'b', proxy, pt[field].b);									
+							}
+							else if(pt[field] instanceof BABYLON.Color4){
+								added.optionType = 'Folder';
+								added.optionValue = field + ' ('+  pt[field].constructor.name +')';
+								var folder = currentPTOptions.addFolder(added.optionValue);
+								addFloatSubOption(folder, pt[field], 'r', proxy, pt[field].r);
+								addFloatSubOption(folder, pt[field], 'g', proxy, pt[field].g);								
+								addFloatSubOption(folder, pt[field], 'b', proxy, pt[field].b);									
+								addFloatSubOption(folder, pt[field], 'a', proxy, pt[field].a);									
+							}
+							else {
+								proxy[field] = 'Object (' + pt[field].constructor.name +')';
+								added.optionType = "Value";
+								added.optionValue = currentPTOptions.add(proxy, field).onChange(function () {
+									try {
+										var res = eval(proxy[field]);
+										pt[field] = res; 
+									} catch (e) { }
+								});
+							}
+						}
+						PTOptions.push(added);
+					}
+				}
+				
 				gui.add(options, 'texture', ['default', 'fire', 'wood', 'cloud', 'grass', 'road', 'brick', 'marble', 'starfield']).onFinishChange(function () {
+					resetPTOptions();
 					switch (options.texture) {
 						case "fire":
 							currentTexture = firePT;
+							addPToptions(firePT, ['time', 'alphaThreshold', 'speed', ]);
 							break;
 						case "wood":
 							currentTexture = woodPT;
+							addPToptions(woodPT, ['ampScale', 'woodColor']);
 							break;
 						case "cloud":
 							currentTexture = cloudPT;
+							addPToptions(cloudPT, ['skyColor', 'cloudColor']);
 							break;
 						case "grass":
 							currentTexture = grassPT;
+							addPToptions(grassPT, ['groundColor']);
 							break;
 						case "road":
 							currentTexture = roadPT;
+							addPToptions(roadPT, ['roadColor']);
 							break;
 						case "brick":
 							currentTexture = brickPT;
+							addPToptions(brickPT, ['numberOfBricksHeight', 'numberOfBricksWidth', 'brickColor', 'jointColor']);
 							break;
 						case "marble":
 							currentTexture = marblePT;
+							addPToptions(marblePT, ['numberOfTilesHeight', 'numberOfTilesWidth', 'amplitude', 'jointColor']);
 							break;
 						case "starfield":
 							currentTexture = starfieldPT;
+							addPToptions(starfieldPT, ['saturation', 'distfading', 'darkmatter', 'alpha', 'time', 'beta', 'zoom', 'formuparam', 'stepsize', 'tile', 'brightness']);
 							break;
 						case "none":
 						default: