Merge branch 'master' of https://github.com/Arelius/BurleyBRDF

ScatteredRay · Jul 20, 2016 · 4c4da10 · 4c4da10
2 parents 29202b2 + 07b3386
commit 4c4da10
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 17 deletions.
diff --git a/data/Materials/ground.mtlx b/data/Materials/ground.mtlx
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<materialx version="1.25" colorspace="gamma.rec709g22" require="matopgraph">
+  <opgraph name="default_opgraph" fileprefix="/data/Textures">
+    <image name="baseColor_flatImage" type="color3">
+      <parameter name="file" type="filename" value="Checker.png" />
+      <parameter name="uvset" type="integer" value="0" />
+    </image>
+    <output name="baseColor_output" type="color3">
+      <parameter name="in" type="opgraphnode" value="baseColor_flatImage" />
+      <parameter name="width" type="integer" value="512" />
+      <parameter name="height" type="integer" value="512" />
+    </output>
+  </opgraph>
+  <shader name="disney" shadertype="Surface" shaderprogram="disneySrf">
+    <input name="baseColor" type="color3" value="0.7, 0.7, 0.7"/>
+    <input name="metallic" type="float" value="0.0" />
+    <input name="subsurface" type="float" value="0.0" />
+    <input name="specular" type="float" value="0.5" />
+    <input name="roughness" type="float" value="0.8" />
+    <input name="specularTint" type="float" value="0.0" />
+    <input name="anisotropic" type="float" value="0.0" />
+    <input name="sheen" type="float" value="0.0" />
+    <input name="sheenTint" type="float" value="0.5" />
+    <input name="clearcoat" type="float" value="0.0" />
+    <input name="clearcoatGloss" type="float" value="1.0" />
+  </shader>
+  <material name="default">
+    <shaderref name="disney" shadertype="Surface" />
+  </material>
+</materialx>
diff --git a/shaders/surface_frag.glsl b/shaders/surface_frag.glsl
@@ -27,9 +27,11 @@ struct DirectionalLight
     float shadowRadius;
 };
 
+#if NUM_DIR_LIGHTS > 0
 uniform DirectionalLight directionalLights[NUM_DIR_LIGHTS];
 uniform sampler2D directionalShadowMap[NUM_DIR_LIGHTS];
 varying vec4 vDirectionalShadowCoord[NUM_DIR_LIGHTS];
+#endif
 
 //THREE.js
     const float PackUpscale = 256. / 255.;const float UnpackDownscale = 255. / 256.;
@@ -117,6 +119,7 @@ void main()
 
     vec3 V = vec3(0.00, 0.00, 1.00);
 
+#if NUM_DIR_LIGHTS > 0
     for(int i = 0; i < NUM_DIR_LIGHTS; i++) {
         vec3 lightVector = normalize(directionalLights[i].direction);
         vec3 l = BRDF(lightVector, V, nz, nx, ny) * directionalLights[i].color * dot(lightVector, nz);
@@ -125,6 +128,7 @@ void main()
         }
         color += l;
     }
+#endif
 
     // IBL is done in world space.
     nz = normalize(vWorldNormal);
@@ -133,7 +137,7 @@ void main()
 
     V = normalize(cameraPosition - vWorldPos);
 
-    const int numSamples = 1;
+    const int numSamples = 32;
     for(int s = 0; s < numSamples; s++) {
         vec2 r = rand2(vScreenPos.xy + vec2(float(s) / 17.456, instRand));
         r = hash2(float(accumCount));

diff --git a/shaders/surface_vert.glsl b/shaders/surface_vert.glsl
@@ -11,8 +11,10 @@ varying vec3 vWorldPos;
 varying vec4 vScreenPos;
 varying vec3 vReflect;
 
+#if NUM_DIR_LIGHTS > 0
 uniform mat4 directionalShadowMatrix[NUM_DIR_LIGHTS];
 varying vec4 vDirectionalShadowCoord[NUM_DIR_LIGHTS];
+#endif
 
 void main()
 {
@@ -29,5 +31,9 @@ void main()
     vReflect = reflect(cameraToVertex, vWorldNormal);
     gl_Position = vScreenPos = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 
-    vDirectionalShadowCoord[0] = directionalShadowMatrix[0] * vec4(vWorldPos, 1.0);
+#if NUM_DIR_LIGHTS > 0
+    for(int i = 0; i < NUM_DIR_LIGHTS; i++) {
+        vDirectionalShadowCoord[i] = directionalShadowMatrix[i] * vec4(vWorldPos, 1.0);
+    }
+#endif
 }
diff --git a/webgl/main.js b/webgl/main.js
@@ -17,6 +17,8 @@ var mouseX = 0;
 var mouseY = 0;
 
 var gui;
+var lightGui;
+var sceneGui;
 
 var maxAccum = 2048;
 var accum = 0;
@@ -193,7 +195,6 @@ function LoadMesh(objPath, mtlxPath, cb) {
                 }
                 for(var mtl in mtls) {
                     updateMaterials.push(mtls[mtl]);
-                    addGuiMaterial(mtls[mtl], mtl);
                 }
 
                 object.traverse(function(child) {
@@ -221,6 +222,7 @@ function LoadMesh(objPath, mtlxPath, cb) {
                         child.receiveShadow = true;
                     }
                 });
+                addGuiObject(object, objPath);
                 cb(object);
             });
     });
@@ -292,11 +294,16 @@ function init() {
         updateRender();
     });
 
-    var ground = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshStandardMaterial({color: 0x999999, roughness: 1.0}));
-    ground.rotateX(-Math.PI / 2.0);
-    ground.receiveShadow = true;
-    scene.add(ground);
-    ground.material.envMap = IBL;
+    create_materialx_shadermaterial("/data/Materials/ground.mtlx", "default", null, function(mtl) {
+        updateMaterials.push(mtl);
+        var groundGeo = new THREE.PlaneBufferGeometry(200, 200, 1, 1);
+        var ground = new THREE.Mesh(groundGeo, mtl);
+        ground.rotateX(-Math.PI / 2.0);
+        ground.receiveShadow = true;
+        THREE.BufferGeometryUtils.computeTangents(ground.geometry);
+        scene.add(ground);
+        addGuiObject(ground, "Ground");
+    });
 
     renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -353,9 +360,7 @@ function init() {
     var ambient = new THREE.AmbientLight(0x101030);
     scene.add(ambient);
 
-    function uc(e) {
-        updateRender();
-    }
+    uc = updateRender;
 
     function hexToRgb(hex) {
         var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -371,12 +376,12 @@ function init() {
         var directionalLight = new THREE.DirectionalLight(0xffeedd);
         updateLights.push(directionalLight);
         directionalLight.position.set(-0.69, 0.48, 0.63);
-        directionalLight.castShadow = false;
+        directionalLight.castShadow = true;
         directionalLight.shadow.mapSize.x = 2048;
         directionalLight.shadow.mapSize.y = 2048;
         MatchLightToBounds(directionalLight, focusBounds);
         scene.add(directionalLight);
-        var dirGui = gui.addFolder(name);
+        var dirGui = lightGui.addFolder(name);
         addColor(dirGui, directionalLight.color, 'color');
         dirGui.add(directionalLight, 'intensity').min(0.0).step(0.01).onChange(uc);
         dirGui.add(directionalLight, 'castShadow').onChange(uc);
@@ -390,9 +395,9 @@ function init() {
     {
         gui = new dat.GUI();
         gui.add(window, 'maxAccum').onChange(continueRender);
-        gui.add(ground, 'visible').onChange(uc);
         gui.add(renderer, 'toneMappingExposure').min(0.0).step(0.01).onChange(uc);
-        var ambGui = gui.addFolder('Ambient');
+        lightGui = gui.addFolder('Lighting');
+        var ambGui = lightGui.addFolder('Ambient');
         addColor(ambGui, ambient.color, 'color');
         ambGui.add(ambient, 'intensity').min(0.0).step(0.01).onChange(uc);
         //ambGui.add(material, 'envMapIntensity').min(0.0).step(0.01).onChange(uc);
@@ -402,9 +407,10 @@ function init() {
                 addLight('Directional ' + nextLight++);                
             }
         };
-        gui.add(guiParams, 'addLight');
+        lightGui.add(guiParams, 'addLight');
         guiParams.addLight();
 
+        sceneGui = gui.addFolder('Scene');
     }
 }
 
@@ -435,7 +441,7 @@ function addFloat(gui, parent, path, name) {
     return controller;
 }
 
-function addGuiMaterial(mat, name) {
+function addGuiMaterial(gui, mat, name) {
     var matGui = gui.addFolder('Material ' + name);
     function addUniform(uniform, name) {
         switch(mat.uniforms[uniform].type) {
@@ -462,6 +468,24 @@ function addGuiMaterial(mat, name) {
     addUniform('u_clearcoatGloss', 'clearcoatGloss');
 }
 
+function addGuiObject(obj, name) {
+    var objGui = sceneGui.addFolder(name);
+    objGui.add(obj, 'visible').onChange(updateRender);
+    var posGui = objGui.addFolder("Position");
+    posGui.add(obj.position, 'x').onChange(updateRender);
+    posGui.add(obj.position, 'y').onChange(updateRender);
+    posGui.add(obj.position, 'z').onChange(updateRender);
+    var rotGui = objGui.addFolder("Rotation");
+    rotGui.add(obj.rotation, 'x', -Math.PI, Math.PI).onChange(updateRender);
+    rotGui.add(obj.rotation, 'y', -Math.PI, Math.PI).onChange(updateRender);
+    rotGui.add(obj.rotation, 'z', -Math.PI, Math.PI).onChange(updateRender);
+    obj.traverse(function(child) {
+        if(!!child.material) {
+            addGuiMaterial(objGui, child.material, child.material.name);
+        }
+    });
+}
+
 function onWindowResize() {
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();

diff --git a/webgl/materialx.js b/webgl/materialx.js
@@ -371,6 +371,7 @@ if(typeof THREE !== 'undefined') {
             {
                 (function(mat) {
                     create_shadermaterial(mtls[mat], function(material) {
+                        material.name = mat;
                         var udim0 = null;
                         if(!!mtls[mat].udims && mtls[mat].udims.length) {
                             udim0 = mtls[mat].udims[0];