fixing procedural textures and adding starfield

proceduralTexturesLibrary/config.json

@@ -48,6 +48,13 @@
         "proceduralTextures/marble/marbleProceduralTexture.fragment.fx"
       ],
       "output": "babylon.marbleProceduralTexture.js"
+    },
+    {
+      "file": "proceduralTextures/starfield/babylon.starfieldProceduralTexture.ts",
+      "shaderFiles": [
+        "proceduralTextures/starfield/starfieldProceduralTexture.fragment.fx"
+      ],
+      "output": "babylon.starfieldProceduralTexture.js"
     }
   ],
   "build": {

proceduralTexturesLibrary/dist/babylon.cloudProceduralTexture.js

@@ -5,7 +5,7 @@ var BABYLON;
     var CloudProceduralTexture = (function (_super) {
         __extends(CloudProceduralTexture, _super);
         function CloudProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
-            _super.call(this, name, size, "cloudtexture", scene, fallbackTexture, generateMipMaps);
+            _super.call(this, name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._skyColor = new BABYLON.Color4(0.15, 0.68, 1.0, 1.0);
             this._cloudColor = new BABYLON.Color4(1, 1, 1, 1.0);
             this.updateShaderUniforms();

proceduralTexturesLibrary/dist/babylon.fireProceduralTexture.js

@@ -5,7 +5,7 @@ var BABYLON;
     var FireProceduralTexture = (function (_super) {
         __extends(FireProceduralTexture, _super);
         function FireProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
-            _super.call(this, name, size, "firetexture", scene, fallbackTexture, generateMipMaps);
+            _super.call(this, name, size, "fireProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._time = 0.0;
             this._speed = new BABYLON.Vector2(0.5, 0.3);
             this._autoGenerateTime = true;

proceduralTexturesLibrary/dist/babylon.grassProceduralTexture.js

@@ -5,7 +5,7 @@ var BABYLON;
     var GrassProceduralTexture = (function (_super) {
         __extends(GrassProceduralTexture, _super);
         function GrassProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
-            _super.call(this, name, size, "grasstexture", scene, fallbackTexture, generateMipMaps);
+            _super.call(this, name, size, "grassProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._herb1 = new BABYLON.Color3(0.29, 0.38, 0.02);
             this._herb2 = new BABYLON.Color3(0.36, 0.49, 0.09);
             this._herb3 = new BABYLON.Color3(0.51, 0.6, 0.28);

proceduralTexturesLibrary/dist/babylon.marbleProceduralTexture.js

@@ -5,7 +5,7 @@ var BABYLON;
     var MarbleProceduralTexture = (function (_super) {
         __extends(MarbleProceduralTexture, _super);
         function MarbleProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
-            _super.call(this, name, size, "marbletexture", scene, fallbackTexture, generateMipMaps);
+            _super.call(this, name, size, "marbleProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._numberOfTilesHeight = 3;
             this._numberOfTilesWidth = 3;
             this._amplitude = 9.0;

proceduralTexturesLibrary/dist/babylon.roadProceduralTexture.js

@@ -5,7 +5,7 @@ var BABYLON;
     var RoadProceduralTexture = (function (_super) {
         __extends(RoadProceduralTexture, _super);
         function RoadProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
-            _super.call(this, name, size, "roadtexture", scene, fallbackTexture, generateMipMaps);
+            _super.call(this, name, size, "roadProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._roadColor = new BABYLON.Color3(0.53, 0.53, 0.53);
             this.updateShaderUniforms();
             this.refreshRate = 0;

proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.js

@@ -5,7 +5,7 @@ var BABYLON;
     var WoodProceduralTexture = (function (_super) {
         __extends(WoodProceduralTexture, _super);
         function WoodProceduralTexture(name, size, scene, fallbackTexture, generateMipMaps) {
-            _super.call(this, name, size, "woodtexture", scene, fallbackTexture, generateMipMaps);
+            _super.call(this, name, size, "woodProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._ampScale = 100.0;
             this._woodColor = new BABYLON.Color3(0.32, 0.17, 0.09);
             this.updateShaderUniforms();

proceduralTexturesLibrary/proceduralTextures/brick/babylon.brickProceduralTexture.ts

@@ -8,7 +8,7 @@ module BABYLON {
         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);
+            super(name, size, "brickProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }

proceduralTexturesLibrary/proceduralTextures/cloud/babylon.cloudProceduralTexture.ts

@@ -6,7 +6,7 @@ module BABYLON {
         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);
+            super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }

proceduralTexturesLibrary/proceduralTextures/fire/babylon.fireProceduralTexture.ts

@@ -9,7 +9,7 @@ module BABYLON {
         private _alphaThreshold: number = 0.5;
 
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
-            super(name, size, "firetexture", scene, fallbackTexture, generateMipMaps);
+            super(name, size, "fireProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this._fireColors = FireProceduralTexture.RedFireColors;
             this.updateShaderUniforms();
             this.refreshRate = 1;

proceduralTexturesLibrary/proceduralTextures/grass/babylon.grassProceduralTexture.ts

@@ -9,7 +9,7 @@ module BABYLON {
         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);
+            super(name, size, "grassProceduralTexture", scene, fallbackTexture, generateMipMaps);
 
             this._grassColors = [
                 new Color3(0.29, 0.38, 0.02),

proceduralTexturesLibrary/proceduralTextures/marble/babylon.marbleProceduralTexture.ts

@@ -9,7 +9,7 @@ module BABYLON {
         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);
+            super(name, size, "marbleProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }

proceduralTexturesLibrary/proceduralTextures/road/babylon.roadProceduralTexture.ts

@@ -5,7 +5,7 @@ module BABYLON {
         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);
+            super(name, size, "roadProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }

proceduralTexturesLibrary/proceduralTextures/starfield/babylon.starfieldProceduralTexture.ts

@@ -0,0 +1,58 @@
+  /// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+ export class StarfieldProceduralTexture extends ProceduralTexture {
+        private _time = 1;
+        private _alpha = 0.5;
+        private _beta = 0.8;
+        private _zoom = 0.8;
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "starfieldProceduralTexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+        }
+
+        public updateShaderUniforms() {
+            this.setFloat("time", this._time);      
+            this.setFloat("alpha", this._alpha);  
+            this.setFloat("beta", this._beta);  
+            this.setFloat("zoom", this._zoom); 
+        }
+
+        public get time(): number {
+            return this._time;
+        }
+
+        public set time(value: number) {
+            this._time = value;
+            this.updateShaderUniforms();
+        }      
+        
+        public get alpha(): number {
+            return this._alpha;
+        }
+
+        public set alpha(value: number) {
+            this._alpha = value;
+            this.updateShaderUniforms();
+        }    
+
+        public get beta(): number {
+            return this._beta;
+        }
+
+        public set beta(value: number) {
+            this._beta = value;
+            this.updateShaderUniforms();
+        } 
+
+        public get zoom(): number {
+            return this._zoom;
+        }
+
+        public set zoom(value: number) {
+            this._zoom = value;
+            this.updateShaderUniforms();
+        } 
+    }
+}

proceduralTexturesLibrary/proceduralTextures/starfield/starfieldProceduralTexture.fragment.fx

@@ -0,0 +1,63 @@
+precision highp float;
+
+#define iterations 15
+#define formuparam 0.53
+
+#define volsteps 20
+#define stepsize 0.1
+
+#define tile 0.850
+
+#define brightness 0.0015
+#define darkmatter 0.400
+#define distfading 0.730
+#define saturation 0.850
+
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform float time;
+uniform float alpha;
+uniform float beta;
+uniform float zoom;
+
+void main()
+{
+	vec3 dir = vec3(vUV * zoom, 1.);
+
+	float localTime = time * 0.0001;
+
+	// Rotation
+	mat2 rot1 = mat2(cos(alpha), sin(alpha), -sin(alpha), cos(alpha));
+	mat2 rot2 = mat2(cos(beta), sin(beta), -sin(beta), cos(beta));
+	dir.xz *= rot1;
+	dir.xy *= rot2;
+	vec3 from = vec3(1., .5, 0.5);
+	from += vec3(localTime*2., localTime, -2.);
+	from.xz *= rot1;
+	from.xy *= rot2;
+
+	//volumetric rendering
+	float s = 0.1, fade = 1.;
+	vec3 v = vec3(0.);
+	for (int r = 0; r < volsteps; r++) {
+		vec3 p = from + s*dir*.5;
+		p = abs(vec3(tile) - mod(p, vec3(tile*2.))); // tiling fold
+		float pa, a = pa = 0.;
+		for (int i = 0; i < iterations; i++) {
+			p = abs(p) / dot(p, p) - formuparam; // the magic formula
+			a += abs(length(p) - pa); // absolute sum of average change
+			pa = length(p);
+		}
+		float dm = max(0., darkmatter - a*a*.001); //dark matter
+		a *= a*a; // add contrast
+		if (r > 6) fade *= 1. - dm; // dark matter, don't render near
+								  //v+=vec3(dm,dm*.5,0.);
+		v += fade;
+		v += vec3(s, s*s, s*s*s*s)*a*brightness*fade; // coloring based on distance
+		fade *= distfading; // distance fading
+		s += stepsize;
+	}
+	v = mix(vec3(length(v)), v, saturation); //color adjust
+	gl_FragColor = vec4(v*.01, 1.);
+}

proceduralTexturesLibrary/proceduralTextures/wood/babylon.woodProceduralTexture.ts

@@ -6,7 +6,7 @@ module BABYLON {
         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, "woodtexture", scene, fallbackTexture, generateMipMaps);
+            super(name, size, "woodProceduralTexture", scene, fallbackTexture, generateMipMaps);
             this.updateShaderUniforms();
             this.refreshRate = 0;
         }

proceduralTexturesLibrary/test/add/addStarfieldPT.js

@@ -0,0 +1,5 @@
+window.addStarfieldPT = function() {
+    var starfield = new BABYLON.StarfieldProceduralTexture("starfieldPT", 256, scene);
+
+    return starfield;
+};

proceduralTexturesLibrary/test/index.html

@@ -11,6 +11,7 @@
 	<script src="../dist/babylon.roadProceduralTexture.js"></script>
 	<script src="../dist/babylon.brickProceduralTexture.js"></script>
 	<script src="../dist/babylon.marbleProceduralTexture.js"></script>
+	<script src="../dist/babylon.starfieldProceduralTexture.js"></script>
 
 	<style>
 		html, body {
@@ -52,6 +53,7 @@
     <script src="add/addRoadPT.js"></script>
     <script src="add/addBrickPT.js"></script>
     <script src="add/addMarblePT.js"></script>
+    <script src="add/addStarfieldPT.js"></script>
 	<script>
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
@@ -196,13 +198,18 @@
                 var marblePT = addMarblePT();
 				var marbleMaterial =  new BABYLON.StandardMaterial("marble", scene);
 				marbleMaterial.diffuseTexture = marblePT;
+				
+				// Starfield Procedural Texture
+                var starfieldPT = addStarfieldPT();
+				var starfieldMaterial =  new BABYLON.StandardMaterial("starfield", scene);
+			 	starfieldMaterial.diffuseTexture = starfieldPT;
 								
 				// Default to std
 				var currentMaterial = std;
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
-				gui.add(options, 'material', ['none', 'fire', 'wood', 'cloud', 'grass', 'road', 'brick', 'marble']).onFinishChange(function () {
+				gui.add(options, 'material', ['none', 'fire', 'wood', 'cloud', 'grass', 'road', 'brick', 'marble', 'starfield']).onFinishChange(function () {
 					switch (options.material) {
 						case "fire":
 							currentMaterial = fireMaterial;
@@ -225,6 +232,9 @@
 						case "marble":
 							currentMaterial = marbleMaterial;
 							break;
+						case "starfield":
+							currentMaterial = starfieldMaterial;
+							break;
 						case "none":
 						default:
 							currentMaterial = std;
@@ -257,8 +267,6 @@
 					currentMesh.setEnabled(true);
 					currentMesh.receiveShadows = true;
 					currentMesh.material = currentMaterial;
-					
-					water.mesh = currentMesh;
 				});
 
 				var f1 = gui.addFolder('lights');