Home Explore Help
Register Sign In
zhangyupeng
/
Babylon.js
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Adding options to specify UI for materials library

David Catuhe 9 years ago
parent
b53cf848d0
commit
4c024c88a3
7 changed files with 99 additions and 24 deletions
Split View Show Diff Stats
  1. 2 2
      materialsLibrary/dist/babylon.pbrMaterial.js
  2. 2 2
      materialsLibrary/dist/babylon.pbrMaterial.min.js
  3. 30 0
      materialsLibrary/test/add/addpbr.js
  4. 10 20
      materialsLibrary/test/index.html
  5. 55 0
      materialsLibrary/test/index.js
  6. 0 0
      materialsLibrary/test/refs/babylon.max.js
  7. 0 0
      materialsLibrary/test/refs/dat.gui.min.js

File diff suppressed because it is too large
+ 2 - 2
materialsLibrary/dist/babylon.pbrMaterial.js


File diff suppressed because it is too large
+ 2 - 2
materialsLibrary/dist/babylon.pbrMaterial.min.js


+ 30 - 0
materialsLibrary/test/add/addpbr.js
View File 

@@ -0,0 +1,30 @@
 
+window.preparePBR = function() {
 
+	var pbr = new BABYLON.PBRMaterial("pbr", scene);
 
+	pbr.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
 
+	pbr.diffuseTexture.uScale = 5;
 
+	pbr.diffuseTexture.vScale = 5;
 
+	pbr.specularColor = BABYLON.Color3.Gray();
 
+	pbr.specularPower = 0.8;
 
+	pbr.roughness = 6.0;
 
+	
+	pbr.reflectionFresnelParameters = new BABYLON.FresnelParameters();
 
+	pbr.useReflectionFresnelFromSpecular = true;
 
+	pbr.reflectionFresnelParameters.power = 1.0;
 
+	pbr.reflectionFresnelParameters.bias = 0.0;
 
+	
+	pbr.reflectionTexture = new BABYLON.CubeTexture("textures/skybox/TropicalSunnyDay", scene);
 
+					
+	registerRangeUI("pbr", "specularPower", 0, 1, function(value) {
 
+		pbr.specularPower = value;
 
+	}, function() {
 
+		return pbr.specularPower;
 
+	});
 
+	
+	registerRangeUI("pbr", "roughness", 0, 10, function(value) {
 
+		pbr.roughness = value;
 
+	}, function() {
 
+		return pbr.roughness;
 
+	});
 
+		
+	return pbr;
 
+}

+ 10 - 20
materialsLibrary/test/index.html
View File 

@@ -2,8 +2,8 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
 
 	<title>Shaders Library</title>
 
-	<script src="dat.gui.min.js"></script>
 
-	<script src="babylon.max.js"></script>
 
+	<script src="refs/dat.gui.min.js"></script>
 
+	<script src="refs/babylon.max.js"></script>
 
 	<script src="../dist/babylon.simpleMaterial.js"></script>
 
 	<script src="../dist/babylon.normalMaterial.js"></script>
 
 	<script src="../dist/babylon.waterMaterial.js"></script>
 
@@ -44,6 +44,8 @@
 
 	<div id="fps">0</div>
 
 	<canvas id="renderCanvas"></canvas>
 
 
+	<script src="index.js"></script>
 
+	<script src="add/addpbr.js"></script>
 
 	<script>
 
 		if (BABYLON.Engine.isSupported()) {
 
 			var canvas = document.getElementById("renderCanvas");
 
@@ -147,7 +149,7 @@
 
 				// 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);
 
@@ -203,27 +205,13 @@
 
 				terrain.diffuseTexture2.uScale = terrain.diffuseTexture2.vScale = 10;
 
 				terrain.diffuseTexture3.uScale = terrain.diffuseTexture3.vScale = 10;
 
 				
-				var pbr = new BABYLON.PBRMaterial("pbr", scene);
 
-				
+				var pbr = preparePBR();
 
+								
 				// Default to std
 
 				var currentMaterial = std;
 
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
 
-				//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
 
-				}
 
-
 
 				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr']).onFinishChange(function () {
 
 					water.enableRenderTargets(false);
 
 					
@@ -250,13 +238,15 @@
 
 							break;
 
 						case "pbr":
 
 							currentMaterial = pbr;
 
-							break;							
+							break;													
 						default:
 
 							currentMaterial = std;
 
 							break;
 
 					}
 
 
 					currentMesh.material = currentMaterial;
 
+					
+					window.enableMaterial(options.material);
 
 				});
 
 
 				gui.add(options, 'mesh', ['sphere', 'knot', 'plane', 'ground', 'rabbit']).onFinishChange(function () {

+ 55 - 0
materialsLibrary/test/index.js
View File 

@@ -0,0 +1,55 @@
 
+//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.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();
 
+	
+	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);
 
+		}	
+	}
 
+}

materialsLibrary/test/babylon.max.js → materialsLibrary/test/refs/babylon.max.js
View File


materialsLibrary/test/dat.gui.min.js → materialsLibrary/test/refs/dat.gui.min.js
View File