Additional work to README appendix

README.md

@@ -89,23 +89,17 @@ Finally, we can compute the final color by summing the contributions of diffuse
 
 `finalColor = (diffuseLight + diffuseColor) + (specularLight * (specularColor * brdf.x + brdf.y))`
 
-Some Results
+Appendix
 ------------
 
-Here are some resulting renders from the demo application.
-
-**Telephone Model**
-
-![](images/Telephone.gif)
+The core lighting equation this sample uses is the Schlick BRDF model from [An Inexpensive BRDF Model for Physically-based Rendering](https://www.cs.virginia.edu/~jdl/bib/appearance/analytic%20models/schlick94b.pdf)
 
-**BarramundiFish Model**
-
-![](images/BarramundiFish.gif)
-
-Appendix
-------------
+```
+vec3 specContrib = F * G * D / (4.0 * NdotL * NdotV);
+vec3 diffuseContrib = (1.0 - F) * diffuse;
+```
 
-In this section, you'll find alternative implementations for the various terms found in the lighting equation.
+Below here you'll find common implementations for the various terms found in the lighting equation.
 These functions may be swapped into pbr-frag.glsl to tune your desired rendering performance and presentation.
 
 ### Surface Reflection Ratio (F)
@@ -162,10 +156,34 @@ float geometricOcclusion(PBRInfo pbrInputs)
 }
 ```
 
+### Microfaced Distribution (D)
+
+**Trowbridge-Reitz**
+Implementation of microfaced distrubtion from [Average Irregularity Representation of a Roughened Surface for Ray Reflection](https://www.osapublishing.org/josa/abstract.cfm?uri=josa-65-5-531) by T. S. Trowbridge, and K. P. Reitz
+
+```
+float microfacetDistribution(PBRInfo pbrInputs)
+{
+    float roughnessSq = pbrInputs.alphaRoughness * pbrInputs.alphaRoughness;
+    float f = (pbrInputs.NdotH * roughnessSq - pbrInputs.NdotH) * pbrInputs.NdotH + 1.0;
+    return roughnessSq / (M_PI * f * f);
+}
+```
+
 ### Diffuse Term
-The following equations model the diffuse term of the lighting equation.
+The following equations are commonly used models of the diffuse term of the lighting equation.
+
+**Lambert**
+Implementation of diffuse from [Lambert's Photometria](https://archive.org/details/lambertsphotome00lambgoog) by Johann Heinrich Lambert
+
+```
+vec3 diffuse(PBRInfo pbrInputs)
+{
+    return pbrInputs.diffuseColor / M_PI;
+}
+```
 
-***Disney***
+**Disney**
 Implementation of diffuse from [Physically-Based Shading at Disney](http://blog.selfshadow.com/publications/s2012-shading-course/burley/s2012_pbs_disney_brdf_notes_v3.pdf) by Brent Burley.  See Section 5.3.
 
 ```

main.js

@@ -48,7 +48,7 @@ function loadCubeMap(gl, envMap, type, state) {
             gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
             // todo:  should this be srgb?  or rgba?  what's the HDR scale on this?
-            gl.texImage2D(face, j, state.sRGBifAvailable, state.sRGBifAvailable, gl.UNSIGNED_BYTE, image);
+            gl.texImage2D(face, j, state.hasSRGBExt ? state.hasSRGBExt.SRGB_EXT : gl.RGBA, state.hasSRGBExt ? state.hasSRGBExt.SRGB_EXT : gl.RGBA, gl.UNSIGNED_BYTE, image);
         };
     }
 
@@ -142,8 +142,6 @@ function init(vertSource, fragSource) {
 
     var ctx2d = canvas2d.getContext("2d");
 
-    var hasSRGBExt = gl.getExtension('EXT_SRGB');
-
     glState = {
         uniforms: {},
         attributes: {},
@@ -152,7 +150,7 @@ function init(vertSource, fragSource) {
         scene: null,
         hasLODExtension:gl.getExtension('EXT_shader_texture_lod'),
         hasDerivativesExtension:gl.getExtension('OES_standard_derivatives'),
-        sRGBifAvailable: (hasSRGBExt ? hasSRGBExt.SRGB_EXT : gl.RGBA)
+        hasSRGBExt:gl.getExtension('EXT_SRGB')
     };
 
     var projectionMatrix = mat4.create();

mesh.js

@@ -19,7 +19,11 @@ class Mesh {
 
         this.vertSource = globalState.vertSource;
         this.fragSource = globalState.fragSource;
-        this.sRGBifAvailable = globalState.sRGBifAvailable;
+        this.hasSRGBExt = globalState.hasSRGBExt;
+
+        if(!this.hasSRGBExt) {
+            this.defines.MANUAL_SRGB = 1;
+        }
 
         ++scene.pendingBuffers;
 
@@ -226,7 +230,7 @@ class Mesh {
             vals: baseColorFactor
         };
         if (pbrMat && pbrMat.baseColorTexture && gltf.textures.length > pbrMat.baseColorTexture.index) {
-            imageInfos['baseColor'] = this.getImageInfo(gl, gltf, pbrMat.baseColorTexture.index, 'uniform1i', 'u_BaseColorSampler', this.sRGBifAvailable);
+            imageInfos['baseColor'] = this.getImageInfo(gl, gltf, pbrMat.baseColorTexture.index, 'uniform1i', 'u_BaseColorSampler', this.hasSRGBExt ? this.hasSRGBExt.SRGB_EXT : gl.RGBA);
             this.defines.HAS_BASECOLORMAP = 1;
         }
         else if (this.localState.uniforms['u_BaseColorSampler']) {
@@ -262,12 +266,12 @@ class Mesh {
         // brdfLUT
         var brdfLUT = 'textures/brdfLUT.png';
         samplerIndex = this.scene.getNextSamplerIndex();
-        imageInfos['brdfLUT'] = { 'uri': brdfLUT, 'samplerIndex': samplerIndex, 'colorSpace': gl.RGBA, 'clamp': true };
+        imageInfos['brdfLUT'] = { 'uri': brdfLUT, 'samplerIndex': samplerIndex, 'colorSpace': this.hasSRGBExt ? this.hasSRGBExt.SRGB_EXT : gl.RGBA, 'clamp': true };
         this.localState.uniforms['u_brdfLUT'] = { 'funcName': 'uniform1i', 'vals': [samplerIndex] };
 
         // Emissive
         if (this.material && this.material.emissiveTexture) {
-            imageInfos['emissive'] = this.getImageInfo(gl, gltf, this.material.emissiveTexture.index, 'uniform1i', 'u_EmissiveSampler', this.sRGBifAvailable);
+            imageInfos['emissive'] = this.getImageInfo(gl, gltf, this.material.emissiveTexture.index, 'uniform1i', 'u_EmissiveSampler', this.hasSRGBExt ? this.hasSRGBExt.SRGB_EXT : gl.RGBA);
             this.defines.HAS_EMISSIVEMAP = 1;
             var emissiveFactor = defined(this.material.emissiveFactor) ? this.material.emissiveFactor : [0.0, 0.0, 0.0];
             this.localState.uniforms['u_EmissiveFactor'] = {

scene.js

@@ -96,7 +96,7 @@ class Scene {
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
             gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,/*imageInfo.colorSpace, imageInfo.colorSpace,*/ gl.UNSIGNED_BYTE, image);
+            gl.texImage2D(gl.TEXTURE_2D, 0, imageInfo.colorSpace, imageInfo.colorSpace, gl.UNSIGNED_BYTE, image);
 
             scene.pendingTextures--;
             scene.drawScene(gl);

shaders/pbr-frag.glsl

@@ -88,6 +88,21 @@ struct PBRInfo
 const float M_PI = 3.141592653589793;
 const float c_MinRoughness = 0.04;
 
+vec4 SRGBtoLINEAR(vec4 srgbIn)
+{
+    #ifdef MANUAL_SRGB
+    #ifdef SRGB_FAST_APPROXIMATION
+    vec3 linOut = pow(srgbIn.xyz,vec3(2.2));
+    #else //SRGB_FAST_APPROXIMATION
+    vec3 bLess = step(vec3(0.04045),srgbIn.xyz);
+    vec3 linOut = mix( srgbIn.xyz/vec3(12.92), pow((srgbIn.xyz+vec3(0.055))/vec3(1.055),vec3(2.4)), bLess );
+    #endif //SRGB_FAST_APPROXIMATION
+    return vec4(linOut,srgbIn.w);;
+    #else //MANUAL_SRGB
+    return srgbIn;
+    #endif //MANUAL_SRGB
+}
+
 // Find the normal for this fragment, pulling either from a predefined normal map
 // or from the interpolated mesh normal and tangent attributes.
 vec3 getNormal()
@@ -131,13 +146,13 @@ vec3 getIBLContribution(PBRInfo pbrInputs, vec3 n, vec3 reflection)
     float mipCount = 9.0; // resolution of 512x512
     float lod = (pbrInputs.perceptualRoughness * mipCount);
     // retrieve a scale and bias to F0. See [1], Figure 3
-    vec3 brdf = texture2D(u_brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness)).rgb;
-    vec3 diffuseLight = textureCube(u_DiffuseEnvSampler, n).rgb;
+    vec3 brdf = SRGBtoLINEAR(texture2D(u_brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness))).rgb;
+    vec3 diffuseLight = SRGBtoLINEAR(textureCube(u_DiffuseEnvSampler, n)).rgb;
 
 #ifdef USE_TEX_LOD
-    vec3 specularLight = textureCubeLodEXT(u_SpecularEnvSampler, reflection, lod).rgb;
+    vec3 specularLight = SRGBtoLINEAR(textureCubeLodEXT(u_SpecularEnvSampler, reflection, lod)).rgb;
 #else
-    vec3 specularLight = textureCube(u_SpecularEnvSampler, reflection).rgb;
+    vec3 specularLight = SRGBtoLINEAR(textureCube(u_SpecularEnvSampler, reflection)).rgb;
 #endif
 
     vec3 diffuse = diffuseLight * pbrInputs.diffuseColor;
@@ -212,7 +227,7 @@ void main()
 
     // The albedo may be defined from a base texture or a flat color
 #ifdef HAS_BASECOLORMAP
-    vec4 baseColor = texture2D(u_BaseColorSampler, v_UV) * u_BaseColorFactor;
+    vec4 baseColor = SRGBtoLINEAR(texture2D(u_BaseColorSampler, v_UV)) * u_BaseColorFactor;
 #else
     vec4 baseColor = u_BaseColorFactor;
 #endif
@@ -280,7 +295,7 @@ void main()
 #endif
 
 #ifdef HAS_EMISSIVEMAP
-    vec3 emissive = texture2D(u_EmissiveSampler, v_UV).rgb * u_EmissiveFactor;
+    vec3 emissive = SRGBtoLINEAR(texture2D(u_EmissiveSampler, v_UV)).rgb * u_EmissiveFactor;
     color += emissive;
 #endif
 
@@ -296,5 +311,5 @@ void main()
     color = mix(color, vec3(metallic), u_ScaleDiffBaseMR.z);
     color = mix(color, vec3(perceptualRoughness), u_ScaleDiffBaseMR.w);
 
-    gl_FragColor = vec4(color, baseColor.a);
+    gl_FragColor = vec4(pow(color,vec3(1.0/2.2)), baseColor.a);
 }