Updates for combined metallic and roughness

The glTF file now only refers to the combined texture.
The parameter names have been updated to more closely
reflect the names in the extension spec.
The shaders have been updated to take the factors for
the base color, metallic and roughnes into account.

DamagedHelmetModified/README.md

@@ -17,6 +17,8 @@ https://github.com/moneimne/WebGL-PBR/
 The following modifications have been made:
 
 - The textures have been flipped vertically
+- The "metallic" and "roughness" textures have been combined into 
+  a "metallicRoughness" texture
 - The `glTF` file was modified:
   - Duplications and transforms of nodes have been removed
   - It does not use any extension, but instead refers to the 

DamagedHelmetModified/glTF/DamagedHelmetModified.gltf

@@ -92,11 +92,8 @@
     "image_Default_albedo_9098" : {
       "uri" : "Default_albedo.jpg"
     },
-    "image_Default_MetalSmooth_21596_metallic" : {
-      "uri" : "Default_MetalSmooth_metallic.jpg"
-    },
-    "image_Default_MetalSmooth_21596_roughness" : {
-      "uri" : "Default_MetalSmooth_roughness.jpg"
+    "image_Default_MetalSmooth_21596_metallicRoughness" : {
+      "uri" : "Default_MetalSmooth_metallicRoughness.jpg"
     },
     "image_Default_normal_22700" : {
       "uri" : "Default_normal.jpg"
@@ -113,12 +110,11 @@
       "name" : "Helmet_mat",
       "technique" : "technique_Standard",
       "values" : {
-        "baseColor" : [ 1, 1, 1, 1 ],
+        "baseColorFactor" : [ 1, 1, 1, 1 ],
+        "metallicFactor" : [ 0.75 ],
+        "roughnessFactor" : [ 0.25 ],
         "baseColorTexture" : [ "texture_Default_albedo_9098" ],
-        "metallic" : [ 0.75 ],
-        "metallicTexture" : [ "texture_Default_MetalSmooth_21596_metallic" ],
-        "roughness" : [ 0.75 ],
-        "roughnessTexture" : [ "texture_Default_MetalSmooth_21596_roughness" ],
+        "metallicRoughnessTexture" : [ "texture_Default_MetalSmooth_21596_metallicRoughness" ],
         "normalTexture" : [ "texture_Default_normal_22700" ]
       }
     }
@@ -148,8 +144,8 @@
   "programs" : {
     "program_Standard" : {
       "attributes" : [ "a_position", "a_normal", "a_tangent", "a_texCoord0" ],
-      "fragmentShader" : "frag",
-      "vertexShader" : "vert"
+      "fragmentShader" : "pbrFragmentShader",
+      "vertexShader" : "pbrVertexShader"
     }
   },
   "samplers" : {
@@ -167,12 +163,12 @@
     }
   },
   "shaders" : {
-    "vert" : {
-      "uri" : "pbr-vert.glsl",
+    "pbrVertexShader" : {
+      "uri" : "pbr.vert",
       "type" : 35633
     },
-    "frag" : {
-      "uri" : "pbr-frag.glsl",
+    "pbrFragmentShader" : {
+      "uri" : "pbr.frag",
       "type" : 35632
     }
   },
@@ -203,19 +199,19 @@
           "type" : 35675,
           "semantic" : "MODELVIEWINVERSETRANSPOSE"
         },
-        "baseColor" : {
+        "baseColorFactor" : {
           "type" : 35666
         },
         "baseColorTexture" : {
           "type" : 35678
         },
-        "metallic" : {
+        "metallicFactor" : {
           "type" : 5126
         },
         "metallicTexture" : {
           "type" : 35678
         },
-        "roughness" : {
+        "roughnessFactor" : {
           "type" : 5126
         },
         "roughnessTexture" : {
@@ -239,11 +235,11 @@
       "uniforms" : {
         "u_mvpMatrix" : "mvpMatrix",
         "u_normalMatrix" : "normalMatrix",
-        "u_baseColor" : "baseColor",
+        "u_baseColorFactor" : "baseColorFactor",
         "u_baseColorTexture" : "baseColorTexture",
-        "u_metallic" : "metallic",
+        "u_metallicFactor" : "metallicFactor",
         "u_metallicTexture" : "metallicTexture",
-        "u_roughness" : "roughness",
+        "u_roughnessFactor" : "roughnessFactor",
         "u_roughnessTexture" : "roughnessTexture",
         "u_normalTexture" : "normalTexture",
         "u_lightPosition" : "lightPosition"
@@ -262,26 +258,15 @@
       "target" : 3553,
       "type" : 5121
     },
-    "texture_Default_MetalSmooth_21596_metallic" : {
-      "format" : 6408,
-      "internalFormat" : 6408,
-      "sampler" : "sampler_1_0_m",
-      "source" : "image_Default_MetalSmooth_21596_metallic",
-      "target" : 3553,
-      "type" : 5121
-    },
-    "texture_Default_MetalSmooth_21596_roughness" : {
+    "texture_Default_MetalSmooth_21596_metallicRoughness" : {
       "format" : 6408,
       "internalFormat" : 6408,
       "sampler" : "sampler_1_0_m",
-      "source" : "image_Default_MetalSmooth_21596_roughness",
+      "source" : "image_Default_MetalSmooth_21596_metallicRoughness",
       "target" : 3553,
       "type" : 5121
     },
     "texture_Default_normal_22700" : {
-      "extras" : {
-        "yUp" : false
-      },
       "format" : 6408,
       "internalFormat" : 6408,
       "sampler" : "sampler_1_0_m",

DamagedHelmetModified/glTF/pbr-frag.glsl → DamagedHelmetModified/glTF/pbr.frag

@@ -4,14 +4,14 @@ uniform vec3 u_lightPosition;
 uniform samplerCube u_envTexture;
 
 uniform sampler2D u_baseColorTexture;
-uniform sampler2D u_metallicTexture;
-uniform sampler2D u_roughnessTexture;
+uniform sampler2D u_metallicRoughnessTexture;
 uniform sampler2D u_normalTexture;
 
+uniform vec4 u_baseColorFactor;
+uniform float u_metallicFactor;
+uniform float u_roughnessFactor;
+
 uniform vec3 u_camera;
-uniform vec3 u_baseColor;
-uniform float u_metallic;
-uniform float u_roughness;
 
 varying vec2 v_texCoord0;
 varying vec3 v_tangent;
@@ -23,9 +23,9 @@ const float M_PI = 3.141592653589793;
 void main(){
 
   vec3 lightPosition = vec3(3,3,5);
-  vec3 cameraPosition = vec3(0,0,5);
+  vec3 cameraPosition = vec3(0,0,15);
 
-  vec4 baseColor = texture2D(u_baseColorTexture, v_texCoord0);
+  vec4 baseColor = texture2D(u_baseColorTexture, v_texCoord0) * u_baseColorFactor;
 
   // Normal Map
   vec3 n = normalize(v_normal);
@@ -44,13 +44,15 @@ void main(){
   float nDotH = max(0.0, dot(n,h));
   float vDotH = max(0.0, dot(v,h));
 
+  vec4 metallicRoughness = texture2D(u_metallicRoughnessTexture, v_texCoord0);
+
   // Fresnel Term: Schlick's Approximation
-  float metallic = texture2D(u_metallicTexture, v_texCoord0).x;
+  float metallic = metallicRoughness.x * u_metallicFactor;
   vec3 specularColor = (baseColor.rgb * metallic) + (vec3(0.04) * (1.0 - metallic));
   vec3 f = specularColor + ((1.0 - specularColor) * pow(1.0 - vDotH, 5.0));
 
   // Geometric Attenuation Term: Schlick-Beckmann
-  float roughness = texture2D(u_roughnessTexture, v_texCoord0).x;
+  float roughness = metallicRoughness.y * u_roughnessFactor;
   float a = roughness * roughness; // UE4 definition
   float k = ((roughness + 1.0) * (roughness + 1.0)) / 8.0;
   float g1L = nDotL / ((nDotL * (1.0 - k)) + k);