Making the ground use mtlx, and the Disney Principled shader.

ScatteredRay · Jul 20, 2016 · 58b9d61 · 58b9d61
1 parent eaad9d6
commit 58b9d61
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 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);

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
@@ -292,11 +292,17 @@ 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);
+        //addGuiMaterial(mtl, "Ground");
+        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);
+        //gui.add(ground, 'visible').onChange(uc);
+    });
 
     renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -390,7 +396,6 @@ 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');
         addColor(ambGui, ambient.color, 'color');