Quellcode durchsuchen

Moving all of the Procedural textures to the lib

Etienne Margraff vor 10 Jahren
Ursprung
Commit
0a8fc73c4b
35 geänderte Dateien mit 914 neuen und 31 gelöschten Zeilen
  1. 42 0
      proceduralTexturesLibrary/config.json
  2. 69 0
      proceduralTexturesLibrary/dist/babylon.brickProceduralTexture.js
  3. 1 0
      proceduralTexturesLibrary/dist/babylon.brickProceduralTexture.min.js
  4. 45 0
      proceduralTexturesLibrary/dist/babylon.cloudProceduralTexture.js
  5. 1 0
      proceduralTexturesLibrary/dist/babylon.cloudProceduralTexture.min.js
  6. 16 16
      proceduralTexturesLibrary/dist/babylon.fireProceduralTexture.js
  7. 1 1
      proceduralTexturesLibrary/dist/babylon.fireProceduralTexture.min.js
  8. 54 0
      proceduralTexturesLibrary/dist/babylon.grassProceduralTexture.js
  9. 1 0
      proceduralTexturesLibrary/dist/babylon.grassProceduralTexture.min.js
  10. 73 0
      proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.js
  11. 1 0
      proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.min.js
  12. 32 0
      proceduralTexturesLibrary/dist/babylon.roadProceduralTexture.js
  13. 1 0
      proceduralTexturesLibrary/dist/babylon.roadProceduralTexture.min.js
  14. 8 8
      proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.js
  15. 1 1
      proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.min.js
  16. 59 0
      proceduralTexturesLibrary/proceduralTextures/brick/babylon.brickProceduralTexture.ts
  17. 69 0
      proceduralTexturesLibrary/proceduralTextures/brick/brickProceduralTexutre.fragment.fx
  18. 37 0
      proceduralTexturesLibrary/proceduralTextures/cloud/babylon.cloudProceduralTexture.ts
  19. 35 0
      proceduralTexturesLibrary/proceduralTextures/cloud/cloudProceduralTexture.fragment.fx
  20. 1 1
      proceduralTexturesLibrary/proceduralTextures/fire/babylon.fireProceduralTexture.ts
  21. 49 0
      proceduralTexturesLibrary/proceduralTextures/grass/babylon.grassProceduralTexture.ts
  22. 37 0
      proceduralTexturesLibrary/proceduralTextures/grass/grassProceduralTexture.fragment.fx
  23. 61 0
      proceduralTexturesLibrary/proceduralTextures/marble/babylon.marbleProceduralTexture.ts
  24. 85 0
      proceduralTexturesLibrary/proceduralTextures/marble/marbleProceduralTexture.fragment.fx
  25. 26 0
      proceduralTexturesLibrary/proceduralTextures/road/babylon.roadProceduralTexture.ts
  26. 30 0
      proceduralTexturesLibrary/proceduralTextures/road/roadProceduralTexture.fragment.fx
  27. 1 1
      proceduralTexturesLibrary/proceduralTextures/wood/babylon.woodProceduralTexture.ts
  28. 5 0
      proceduralTexturesLibrary/test/add/addBrickPT.js
  29. 5 0
      proceduralTexturesLibrary/test/add/addCloudPT.js
  30. 1 1
      proceduralTexturesLibrary/test/add/addFirePT.js
  31. 5 0
      proceduralTexturesLibrary/test/add/addGrassPT.js
  32. 5 0
      proceduralTexturesLibrary/test/add/addMarblePT.js
  33. 5 0
      proceduralTexturesLibrary/test/add/addRoadPT.js
  34. 1 1
      proceduralTexturesLibrary/test/add/addWoodPT.js
  35. 51 1
      proceduralTexturesLibrary/test/index.html

+ 42 - 0
proceduralTexturesLibrary/config.json

@@ -6,6 +6,48 @@
         "proceduralTextures/wood/woodProceduralTexture.fragment.fx"
       ],
       "output": "babylon.woodProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/fire/babylon.fireProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/fire/fireProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.fireProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/cloud/babylon.cloudProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/cloud/cloudProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.cloudProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/grass/babylon.grassProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/grass/grassProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.grassProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/road/babylon.roadProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/road/roadProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.roadProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/brick/babylon.brickProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/brick/brickProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.brickProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/marble/babylon.marbleProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/marble/marbleProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.marbleProceduralTexture.js"
     }
   ],
   "build": {

+ 69 - 0
proceduralTexturesLibrary/dist/babylon.brickProceduralTexture.js

@@ -0,0 +1,69 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+var BABYLON;
+(function (BABYLON) {
+    var BrickProceduralTexture = (function (_super) {
+        __extends(BrickProceduralTexture, _super);
+        function BrickProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
+            _super.call(this, name, size, "bricktexture", scene, fallbackTexture, generateMipMaps);
+            this._numberOfBricksHeight = 15;
+            this._numberOfBricksWidth = 5;
+            this._jointColor = new BABYLON.Color3(0.72, 0.72, 0.72);
+            this._brickColor = new BABYLON.Color3(0.77, 0.47, 0.40);
+            this.updateShaderUniforms();
+            this.refreshRate = 0;
+        }
+        BrickProceduralTexture.prototype.updateShaderUniforms = function () {
+            this.setFloat("numberOfBricksHeight", this._numberOfBricksHeight);
+            this.setFloat("numberOfBricksWidth", this._numberOfBricksWidth);
+            this.setColor3("brickColor", this._brickColor);
+            this.setColor3("jointColor", this._jointColor);
+        };
+        Object.defineProperty(BrickProceduralTexture.prototype, "numberOfBricksHeight", {
+            get: function () {
+                return this._numberOfBricksHeight;
+            },
+            set: function (value) {
+                this._numberOfBricksHeight = value;
+                this.updateShaderUniforms();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(BrickProceduralTexture.prototype, "numberOfBricksWidth", {
+            get: function () {
+                return this._numberOfBricksWidth;
+            },
+            set: function (value) {
+                this._numberOfBricksWidth = value;
+                this.updateShaderUniforms();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(BrickProceduralTexture.prototype, "jointColor", {
+            get: function () {
+                return this._jointColor;
+            },
+            set: function (value) {
+                this._jointColor = value;
+                this.updateShaderUniforms();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(BrickProceduralTexture.prototype, "brickColor", {
+            get: function () {
+                return this._brickColor;
+            },
+            set: function (value) {
+                this._brickColor = value;
+                this.updateShaderUniforms();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return BrickProceduralTexture;
+    })(BABYLON.ProceduralTexture);
+    BABYLON.BrickProceduralTexture = BrickProceduralTexture;
+})(BABYLON || (BABYLON = {}));

Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
proceduralTexturesLibrary/dist/babylon.brickProceduralTexture.min.js


Datei-Diff unterdrückt, da er zu groß ist
+ 45 - 0
proceduralTexturesLibrary/dist/babylon.cloudProceduralTexture.js


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
proceduralTexturesLibrary/dist/babylon.cloudProceduralTexture.min.js


Datei-Diff unterdrückt, da er zu groß ist
+ 16 - 16
proceduralTexturesLibrary/dist/babylon.fireProceduralTexture.js


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 1
proceduralTexturesLibrary/dist/babylon.fireProceduralTexture.min.js


Datei-Diff unterdrückt, da er zu groß ist
+ 54 - 0
proceduralTexturesLibrary/dist/babylon.grassProceduralTexture.js


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
proceduralTexturesLibrary/dist/babylon.grassProceduralTexture.min.js


Datei-Diff unterdrückt, da er zu groß ist
+ 73 - 0
proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.js


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.min.js


Datei-Diff unterdrückt, da er zu groß ist
+ 32 - 0
proceduralTexturesLibrary/dist/babylon.roadProceduralTexture.js


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
proceduralTexturesLibrary/dist/babylon.roadProceduralTexture.min.js


Datei-Diff unterdrückt, da er zu groß ist
+ 8 - 8
proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.js


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 1
proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.min.js


+ 59 - 0
proceduralTexturesLibrary/proceduralTextures/brick/babylon.brickProceduralTexture.ts

@@ -0,0 +1,59 @@
+ /// <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, "bricktexture", 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();
+        }
+    }	
+}

+ 69 - 0
proceduralTexturesLibrary/proceduralTextures/brick/brickProceduralTexutre.fragment.fx

@@ -0,0 +1,69 @@
+precision highp float;
+
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform float numberOfBricksHeight;
+uniform float numberOfBricksWidth;
+uniform vec3 brickColor;
+uniform vec3 jointColor;
+
+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;
+}
+
+float round(float number){
+	return sign(number)*floor(abs(number) + 0.5);
+}
+
+void main(void)
+{
+	float brickW = 1.0 / numberOfBricksWidth;
+	float brickH = 1.0 / numberOfBricksHeight;
+	float jointWPercentage = 0.01;
+	float jointHPercentage = 0.05;
+	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 brickColorSwitch = mod(floor(yi) + floor(xi), 3.0);
+
+		if (brickColorSwitch == 0.0)
+			color = mix(color, vec3(0.33, 0.33, 0.33), 0.3);
+		else if (brickColorSwitch == 2.0)
+			color = mix(color, vec3(0.11, 0.11, 0.11), 0.3);
+	}
+
+	gl_FragColor = vec4(color, 1.0);
+}

+ 37 - 0
proceduralTexturesLibrary/proceduralTextures/cloud/babylon.cloudProceduralTexture.ts

@@ -0,0 +1,37 @@
+ /// <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, "cloudtexture", 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();
+        }
+    }
+}

+ 35 - 0
proceduralTexturesLibrary/proceduralTextures/cloud/cloudProceduralTexture.fragment.fx

@@ -0,0 +1,35 @@
+precision highp float;
+
+varying vec2 vUV;
+
+uniform vec4 skyColor;
+uniform vec4 cloudColor;
+
+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 * 12.0;
+	vec4 c = mix(skyColor, cloudColor, fbm(p));
+	gl_FragColor = c;
+
+}
+

+ 1 - 1
proceduralTexturesLibrary/proceduralTextures/fire/babylon.fireProceduralTexture.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON {
- export class FireProceduralTexture2 extends ProceduralTexture {
+ export class FireProceduralTexture extends ProceduralTexture {
         private _time: number = 0.0;
         private _speed = new Vector2(0.5, 0.3);
         private _autoGenerateTime: boolean = true;

+ 49 - 0
proceduralTexturesLibrary/proceduralTextures/grass/babylon.grassProceduralTexture.ts

@@ -0,0 +1,49 @@
+ /// <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, "grasstexture", 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();
+        }
+    }
+}

+ 37 - 0
proceduralTexturesLibrary/proceduralTextures/grass/grassProceduralTexture.fragment.fx

@@ -0,0 +1,37 @@
+precision highp float;
+
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform vec3 herb1Color;
+uniform vec3 herb2Color;
+uniform vec3 herb3Color;
+uniform vec3 groundColor;
+
+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(void) {
+	vec3 color = mix(groundColor, herb1Color, rand(gl_FragCoord.xy * 4.0));
+	color = mix(color, herb2Color, rand(gl_FragCoord.xy * 8.0));
+	color = mix(color, herb3Color, rand(gl_FragCoord.xy));
+	color = mix(color, herb1Color, fbm(gl_FragCoord.xy * 16.0));
+	gl_FragColor = vec4(color, 1.0);
+}

+ 61 - 0
proceduralTexturesLibrary/proceduralTextures/marble/babylon.marbleProceduralTexture.ts

@@ -0,0 +1,61 @@
+ /// <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, "marbletexture", 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();
+        }
+    }
+}

+ 85 - 0
proceduralTexturesLibrary/proceduralTextures/marble/marbleProceduralTexture.fragment.fx

@@ -0,0 +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);
+}

+ 26 - 0
proceduralTexturesLibrary/proceduralTextures/road/babylon.roadProceduralTexture.ts

@@ -0,0 +1,26 @@
+ /// <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, "roadtexture", 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();
+        }
+    }
+}

+ 30 - 0
proceduralTexturesLibrary/proceduralTextures/road/roadProceduralTexture.fragment.fx

@@ -0,0 +1,30 @@
+precision highp float;
+
+varying vec2 vUV;                    
+uniform vec3 roadColor;
+
+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(void) {
+	float ratioy = mod(gl_FragCoord.y * 100.0 , fbm(vUV * 2.0));
+	vec3 color = roadColor * ratioy;
+	gl_FragColor = vec4(color, 1.0);
+}

+ 1 - 1
proceduralTexturesLibrary/proceduralTextures/wood/babylon.woodProceduralTexture.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON {
-	export class WoodProceduralTexture2 extends ProceduralTexture {
+	export class WoodProceduralTexture extends ProceduralTexture {
         private _ampScale: number = 100.0;
         private _woodColor: Color3 = new Color3(0.32, 0.17, 0.09);
 

+ 5 - 0
proceduralTexturesLibrary/test/add/addBrickPT.js

@@ -0,0 +1,5 @@
+window.addBrickPT = function() {
+    var brick = new BABYLON.BrickProceduralTexture("brickPT", 256, scene);
+
+    return brick;
+};

+ 5 - 0
proceduralTexturesLibrary/test/add/addCloudPT.js

@@ -0,0 +1,5 @@
+window.addCloudPT = function() {
+    var cloud = new BABYLON.CloudProceduralTexture("cloudPT", 256, scene);
+
+    return cloud;
+};

+ 1 - 1
proceduralTexturesLibrary/test/add/addFirePT.js

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

+ 5 - 0
proceduralTexturesLibrary/test/add/addGrassPT.js

@@ -0,0 +1,5 @@
+window.addGrassPT = function() {
+    var grass = new BABYLON.GrassProceduralTexture("grassPT", 512, scene);
+
+    return grass;
+};

+ 5 - 0
proceduralTexturesLibrary/test/add/addMarblePT.js

@@ -0,0 +1,5 @@
+window.addMarblePT = function() {
+    var marble = new BABYLON.MarbleProceduralTexture("marblePT", 1024, scene);
+
+    return marble;
+};

+ 5 - 0
proceduralTexturesLibrary/test/add/addRoadPT.js

@@ -0,0 +1,5 @@
+window.addRoadPT = function() {
+    var road = new BABYLON.RoadProceduralTexture("roadPT", 256, scene);
+
+    return road;
+};

+ 1 - 1
proceduralTexturesLibrary/test/add/addWoodPT.js

@@ -1,5 +1,5 @@
 window.addWoodPT = function() {
-    var wood = new BABYLON.WoodProceduralTexture2("woodPT", 256, scene);
+    var wood = new BABYLON.WoodProceduralTexture("woodPT", 2048, scene);
 
     return wood;
 };

+ 51 - 1
proceduralTexturesLibrary/test/index.html

@@ -6,6 +6,11 @@
 	<script src="refs/babylon.max.js"></script>
 	<script src="../dist/babylon.fireProceduralTexture.js"></script>
 	<script src="../dist/babylon.woodProceduralTexture.js"></script>
+	<script src="../dist/babylon.cloudProceduralTexture.js"></script>
+	<script src="../dist/babylon.grassProceduralTexture.js"></script>
+	<script src="../dist/babylon.roadProceduralTexture.js"></script>
+	<script src="../dist/babylon.brickProceduralTexture.js"></script>
+	<script src="../dist/babylon.marbleProceduralTexture.js"></script>
 
 	<style>
 		html, body {
@@ -40,8 +45,13 @@
 	<canvas id="renderCanvas"></canvas>
 
 	<script src="index.js"></script>
+    <script src="add/addCloudPT.js"></script>
     <script src="add/addFirePT.js"></script>
     <script src="add/addWoodPT.js"></script>
+    <script src="add/addGrassPT.js"></script>
+    <script src="add/addRoadPT.js"></script>
+    <script src="add/addBrickPT.js"></script>
+    <script src="add/addMarblePT.js"></script>
 	<script>
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
@@ -161,13 +171,38 @@
                 var woodPT = addWoodPT();
 				var woodMaterial =  new BABYLON.StandardMaterial("wood", scene);
 				woodMaterial.diffuseTexture = woodPT;
+				
+				// Cloud Procedural Texture
+                var cloudPT = addCloudPT();
+				var cloudMaterial =  new BABYLON.StandardMaterial("cloud", scene);
+				cloudMaterial.diffuseTexture = cloudPT;
+				
+				// Grass Procedural Texture
+                var grassPT = addGrassPT();
+				var grassMaterial =  new BABYLON.StandardMaterial("grass", scene);
+				grassMaterial.diffuseTexture = grassPT;
+				
+				// Road Procedural Texture
+                var roadPT = addRoadPT();
+				var roadMaterial =  new BABYLON.StandardMaterial("road", scene);
+				roadMaterial.diffuseTexture = roadPT;
+				
+				// Brick Procedural Texture
+                var brickPT = addBrickPT();
+				var brickMaterial =  new BABYLON.StandardMaterial("brick", scene);
+				brickMaterial.diffuseTexture = brickPT;
+				
+				// Marble Procedural Texture
+                var marblePT = addMarblePT();
+				var marbleMaterial =  new BABYLON.StandardMaterial("marble", scene);
+				marbleMaterial.diffuseTexture = marblePT;
 								
 				// Default to std
 				var currentMaterial = std;
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
-				gui.add(options, 'material', ['none','fire', 'wood']).onFinishChange(function () {
+				gui.add(options, 'material', ['none', 'fire', 'wood', 'cloud', 'grass', 'road', 'brick', 'marble']).onFinishChange(function () {
 					switch (options.material) {
 						case "fire":
 							currentMaterial = fireMaterial;
@@ -175,6 +210,21 @@
 						case "wood":
 							currentMaterial = woodMaterial;
 							break;
+						case "cloud":
+							currentMaterial = cloudMaterial;
+							break;
+						case "grass":
+							currentMaterial = grassMaterial;
+							break;
+						case "road":
+							currentMaterial = roadMaterial;
+							break;
+						case "brick":
+							currentMaterial = brickMaterial;
+							break;
+						case "marble":
+							currentMaterial = marbleMaterial;
+							break;
 						case "none":
 						default:
 							currentMaterial = std;