fix normal tangent test, fix pbr view vector, other fixes

examples/webgl2-renderer.html

@@ -46,6 +46,7 @@
             <option value="TextureSettingsTest">TextureSettingsTest</option>
             <option value="Triangle">Triangle</option>
             <option value="TriangleWithoutIndices">TriangleWithoutIndices</option>
+            <option value="WaterBottle">WaterBottle</option>
         </select> <br>
         Draw Bounding Box: <input id="bbox-toggle" type="checkbox" ><br>
         Bounding Box type: <select id="bbox-type">

src/index.js

@@ -257,12 +257,12 @@ var Utils = Utils || {};
             gl.texImage2D(
                 gl.TEXTURE_2D,  // assumed
                 0,        // Level of details
-                // gl.RGB, // Format
-                // gl.RGB,
-                gl.RGBA, // Format
-                gl.RGBA,
-                gl.UNSIGNED_BYTE, // Size of each channel
-                // gl.FLOAT,
+                gl.RG16F, // Format
+                gl.RG,
+                // gl.RGBA, // Format
+                // gl.RGBA,
+                // gl.UNSIGNED_BYTE, // Size of each channel
+                gl.FLOAT,
                 img
             );
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
@@ -299,6 +299,20 @@ var Utils = Utils || {};
             '../textures/environment/diffuse/bakedDiffuse_05.jpg',
             '../textures/environment/diffuse/bakedDiffuse_06.jpg',
 
+            // '../textures/papermill/environment_right_0.jpg',
+            // '../textures/papermill/environment_left_0.jpg',
+            // '../textures/papermill/environment_top_0.jpg',
+            // '../textures/papermill/environment_bottom_0.jpg',
+            // '../textures/papermill/environment_front_0.jpg',
+            // '../textures/papermill/environment_back_0.jpg',
+
+            // '../textures/papermill/diffuse/diffuse_right_0.jpg',
+            // '../textures/papermill/diffuse/diffuse_left_0.jpg',
+            // '../textures/papermill/diffuse/diffuse_top_0.jpg',
+            // '../textures/papermill/diffuse/diffuse_bottom_0.jpg',
+            // '../textures/papermill/diffuse/diffuse_front_0.jpg',
+            // '../textures/papermill/diffuse/diffuse_back_0.jpg',
+
             // @tmp, ugly, load brdfLUT here
             '../textures/brdfLUT.png'
         ],
@@ -584,6 +598,7 @@ var Utils = Utils || {};
 
         us.MVP = gl.getUniformLocation(program, 'u_MVP');
         us.MVNormal = gl.getUniformLocation(program, 'u_MVNormal');
+        us.MV = gl.getUniformLocation(program, 'u_MV');
         us.baseColorFactor = gl.getUniformLocation(program, 'u_baseColorFactor');
         us.metallicFactor = gl.getUniformLocation(program, 'u_metallicFactor');
         us.roughnessFactor = gl.getUniformLocation(program, 'u_roughnessFactor');
@@ -1082,8 +1097,10 @@ var Utils = Utils || {};
 
             gl.uniform4fv(program.uniformLocations.baseColorFactor, baseColor);
 
+            gl.uniformMatrix4fv(program.uniformLocations.MV, false, localMV);
             gl.uniformMatrix4fv(program.uniformLocations.MVP, false, localMVP);
             gl.uniformMatrix4fv(program.uniformLocations.MVNormal, false, localMVNormal);
+
 
             gl.bindVertexArray(primitive.vertexArray);
 

src/shaders/fs-pbr-master.glsl

@@ -12,8 +12,6 @@ uniform sampler2D u_brdfLUT;
 
 // Metallic-roughness material
 
-// TODO: use #define string for a full and dynamic support renderer
-
 // base color
 uniform vec4 u_baseColorFactor;
 #ifdef HAS_BASECOLORMAP
@@ -23,7 +21,7 @@ uniform sampler2D u_baseColorTexture;
 // normal map
 #ifdef HAS_NORMALMAP
 uniform sampler2D u_normalTexture;
-uniform float u_normalScale;
+uniform float u_normalTextureScale;
 #endif
 
 // emmisve map
@@ -45,6 +43,7 @@ uniform sampler2D u_occlusionTexture;
 uniform float u_occlusionStrength;
 #endif
 
+in vec3 v_position;
 in vec3 v_normal;
 in vec2 v_uv;
 
@@ -67,22 +66,88 @@ struct PBRInfo
 };
 
 
-vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
-    normap = normap * 2.0 - 1.0;
-    vec3 up = normalize(vec3(0.001, 1, 0.001));
-    vec3 surftan = normalize(cross(geomnor, up));
-    vec3 surfbinor = cross(geomnor, surftan);
-    return normap.y * surftan + normap.x * surfbinor + normap.z * geomnor;
-}
+// vec3 applyNormalMap(vec3 geomnor, vec3 normap) {
+//     normap = normap * 2.0 - 1.0;
+//     vec3 up = normalize(vec3(0.01, 1, 0.01));
+//     vec3 surftan = normalize(cross(geomnor, up));
+//     vec3 surfbinor = cross(geomnor, surftan);
+//     return normap.y * surftan * u_normalTextureScale + normap.x * surfbinor * u_normalTextureScale + normap.z * geomnor;
+// }
 
 const float M_PI = 3.141592653589793;
 const float c_MinRoughness = 0.04;
 
 
+// vec3 getNormal()
+// {
+
+// #ifdef HAS_NORMALMAP
+// #ifdef HAS_TANGENTS
+//     vec3 n = texture(u_normalTexture, v_uv).rgb;
+//     n = normalize(v_TBN * (2.0 * n - 1.0) - vec3(u_normalTextureScale, u_normalTextureScale, 1.0));
+// #else
+//     vec3 n = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );
+// #endif
+// #else
+//     vec3 n = v_normal;
+// #endif
+//     return n;
+
+// #endif
+// }
+
+// Find the normal for this fragment, pulling either from a predefined normal map
+// or from the interpolated mesh normal and tangent attributes.
+vec3 getNormal()
+{
+
+// #ifdef HAS_NORMALMAP
+//     vec3 n = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );
+// #else
+//     vec3 n = v_normal;
+// #endif
+//     return n;
+
+
+    // Retrieve the tangent space matrix
+// #ifndef HAS_TANGENTS
+    vec3 pos_dx = dFdx(v_position);
+    vec3 pos_dy = dFdy(v_position);
+    vec3 tex_dx = dFdx(vec3(v_uv, 0.0));
+    vec3 tex_dy = dFdy(vec3(v_uv, 0.0));
+    vec3 t = (tex_dy.t * pos_dx - tex_dx.t * pos_dy) / (tex_dx.s * tex_dy.t - tex_dy.s * tex_dx.t);
+
+    vec3 ng = v_normal;
+// #ifdef HAS_NORMALS
+//     vec3 ng = normalize(v_normal);
+// #else
+//     vec3 ng = cross(pos_dx, pos_dy);
+// #endif
+
+    t = normalize(t - ng * dot(ng, t));
+    vec3 b = normalize(cross(ng, t));
+    mat3 tbn = mat3(t, b, ng);
+// #else // HAS_TANGENTS
+    // mat3 tbn = v_TBN;
+// #endif
+
+// TODO: TANGENTS
+
+#ifdef HAS_NORMALMAP
+    vec3 n = texture(u_normalTexture, v_uv).rgb;
+    n = normalize(tbn * ((2.0 * n - 1.0) * vec3(u_normalTextureScale, u_normalTextureScale, 1.0)));
+#else
+    vec3 n = tbn[2].xyz;
+#endif
+
+    return n;
+}
+
 vec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection)
 {
     // float mipCount = 9.0; // resolution of 512x512
-    float mipCount = 10.0; // resolution of 1024x1024
+    // float mipCount = 10.0; // resolution of 1024x1024
+    float mipCount = 10.0; // resolution of 256x256
     float lod = (pbrInputs.perceptualRoughness * mipCount);
     // retrieve a scale and bias to F0. See [1], Figure 3
     vec3 brdf = texture(u_brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness)).rgb;
@@ -196,15 +261,12 @@ void main()
     vec3 specularEnvironmentR90 = vec3(1.0, 1.0, 1.0) * reflectance90;
 
 
-    // vec3 n = getNormal();                             // normal at surface point
-#ifdef HAS_NORMALMAP
-    vec3 n = applyNormalMap( v_normal, texture(u_normalTexture, v_uv).rgb );
-#else
-    vec3 n = v_normal;
-#endif
-    vec3 v = vec3( 0.0, 0.0, 1.0 );        // Vector from surface point to camera
+    vec3 n = getNormal();                             // normal at surface point
+    // vec3 v = vec3( 0.0, 0.0, 1.0 );        // Vector from surface point to camera
+    vec3 v = normalize(-v_position);                       // Vector from surface point to camera
     // vec3 l = normalize(u_LightDirection);             // Vector from surface point to light
-    vec3 l = vec3( 0.6, 0.8, 0.0 );             // Vector from surface point to light
+    vec3 l = normalize(vec3( 1.0, 1.0, 1.0 ));             // Vector from surface point to light
+    // vec3 l = vec3( 0.0, 0.0, 1.0 );             // Vector from surface point to light
     vec3 h = normalize(l+v);                          // Half vector between both l and v
     vec3 reflection = -normalize(reflect(v, n));
 

src/shaders/vs-pbr-master.glsl

@@ -5,11 +5,13 @@
 #define JOINTS_1_LOCATION 5
 #define WEIGHTS_0_LOCATION 4
 #define WEIGHTS_1_LOCATION 6
+#define TANGENT_LOCATION 7
 
 precision highp float;
 precision highp int;
 
 uniform mat4 u_MVP;
+uniform mat4 u_MV;
 uniform mat4 u_MVNormal;
 
 #ifdef HAS_SKIN
@@ -31,8 +33,17 @@ layout(location = JOINTS_1_LOCATION) in vec4 joint1;
 layout(location = WEIGHTS_1_LOCATION) in vec4 weight1;
 #endif
 #endif
-// TODO: tangents
 
+
+// #ifdef HAS_TANGENTS
+// layout(location = TANGENT_LOCATION) in vec4 tangent;
+
+// out vec3 v_tangentW;
+// out vec3 v_bitangentW;
+// #endif
+
+
+out vec3 v_position;
 out vec3 v_normal;
 out vec2 v_uv;
 
@@ -58,10 +69,15 @@ void main()
 
 #ifdef HAS_SKIN
     v_normal = normalize(( u_MVNormal * transpose(inverse(skinMatrix)) * vec4(normal, 0)).xyz);
+    vec4 pos = u_MV * skinMatrix * vec4(position, 1.0);
     gl_Position = u_MVP * skinMatrix * vec4(position, 1.0);
 #else
     v_normal = normalize((u_MVNormal * vec4(normal, 0)).xyz);
+    vec4 pos = u_MV * vec4(position, 1.0);
     gl_Position = u_MVP * vec4(position, 1.0);
 #endif
+
+    v_position = vec3(pos.xyz) / pos.w;
+
 
 }