Physically-Based Rendering in WebGL
![Image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipP4z-TEgy6XCRGqewxFl0U2TYG6vw48NQ2ONOskp2TDAkz-LMh6MLRB9CfKYPCnXdzoprIhBuH8UqT1usQ5_biRildURcSJLrgs2L4Z-iZ7FUSzy3fyMdWJxxHa_dklTh3CUnpqPoMJv3/s400/Screen+Shot+2018-02-22+at+4.32.12+PM.png)
According to the image from Physically Based Shading At Disney as below, the left is the real chrome, the middle is PBR approach, and the right is Blinn-Phong. We can find PBR is more closer to the real case, and the difference part is the specular lighting part. Blinn-Phong The most important part of specular term in Blinn-Phong is it uses half-vector instead of using dot(lightDir, normalDir) to avoid the traditional Phong lighting model hard shape problem. vec3 BRDF_Specular_BlinnPhong( vec3 lightDir, vec3 viewDir, vec3 normal, vec3 specularColor, float shininess ) { vec3 halfDir = normalize( lightDir + viewDir ); float dotNH = saturate( dot( normal, halfDir ) ); float dotLH = saturate( dot( lightDir, halfDir ) ); vec3 F = F_Schlick( specularColor, dotLH ); float G = G_BlinnPhong_Implicit( ); float D = D_BlinnPhong( shininess, dotNH ); return F * ( G * D ); } Physically-Based rendering Regarding to the lighting model of GGX, UE4 Shading present...