Initial Commit for procedurale textures library

proceduralTexturesLibrary/config.json

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

proceduralTexturesLibrary/gulp-srcToVariable.js

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

proceduralTexturesLibrary/gulpfile.js

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

proceduralTexturesLibrary/package.json

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

proceduralTexturesLibrary/proceduralTextures/fire/babylon.fireProceduralTexture.ts

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

proceduralTexturesLibrary/proceduralTextures/fire/fireProceduralTexture.fragment.fx

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

proceduralTexturesLibrary/readme.md

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

proceduralTexturesLibrary/test/add/addFirePT.js

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

proceduralTexturesLibrary/test/index.html

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

proceduralTexturesLibrary/test/index.js

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