UE4 - PBR WebGL v0.5

  <script id="vertexShader" type="x-shader/x-vertex">
            attribute vec4 tangent;
            uniform vec3 ambientLightColor;

            #if MAX_POINT_LIGHTS > 0
                uniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];
                varying vec4 vPointLight[ MAX_POINT_LIGHTS ];
            #endif

            varying vec3 vNormal;
            varying vec3 vViewPosition;

            void main()
            {
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

                vNormal = normalize( normalMatrix * normal );

                vec3 warp = vec3(
                    sin( vNormal.x / 0.5 ),
                    sin( vNormal.y * 0.25 ),
                    sin( vNormal.z * 0.7 )
                );

                float dist = distance( mvPosition.xyz, mvPosition.xyz + warp * warp );
                mvPosition.xyz = mix( mvPosition.xyz + warp * -120.0, mvPosition.xyz, dist );

                vViewPosition = -mvPosition.xyz;
                gl_Position = projectionMatrix * mvPosition;

                #ifdef USE_SHADOWMAP
                    for( int i = 0; i < MAX_SHADOWS; i ++ )
                    {
                        vShadowCoord[ i ] = shadowMatrix[ i ] * ( modelMatrix * vec4( position, 1.0 ) );
                    }
                #endif
            }
        </script>

        <script id="fragmentShader" type="x-shader/x-fragment">
            #extension GL_OES_standard_derivatives : enable

            uniform vec2 resolution;
            uniform float time;
            uniform vec3 ambientLightColor;
            uniform float roughnessScale;
            uniform float diffuseScale;

            #if MAX_DIR_LIGHTS > 0
                uniform vec3 directionalLightColor[ MAX_DIR_LIGHTS ];
                uniform vec3 directionalLightDirection[ MAX_DIR_LIGHTS ];
            #endif

            #if MAX_POINT_LIGHTS > 0
                uniform vec3 pointLightPosition[ MAX_POINT_LIGHTS ];
                uniform vec3 pointLightColor[ MAX_POINT_LIGHTS ];
                varying vec4 vPointLight[ MAX_POINT_LIGHTS ];
            #endif

            varying vec3 vNormal;

            varying vec3 vViewPosition;

            #define saturate( value ) clamp( value, 0.0, 1.0 )
            #define lerp( x, y, a ) mix( x, y, a )

            float CalculateGGX( float alpha, float cosThetaM )
            {
                float roughness = alpha * alpha;
                float CosSquared = cosThetaM * cosThetaM;
                float GGX = ( CosSquared * ( roughness - 1.0 ) ) + 1.0;
                GGX = 0.31831 * GGX * GGX;
                return roughness / GGX;
            }

            float CalculateGeometric( float n_dot_x, float roughness )
            {
                return n_dot_x / ( n_dot_x * ( 1.0 - roughness ) + roughness );
            }

            float CalculateGeometricAtten( float n_dot_l, float n_dot_v, float roughness )
            {
                float roughnessRemap = roughness + 1.0;
                roughnessRemap *= roughnessRemap;
                roughnessRemap *= 0.125;

                float atten = CalculateGeometric( n_dot_v, roughnessRemap ) * CalculateGeometric( n_dot_l, roughnessRemap );
                return atten;
            }

            float CalculatePBRLighting( vec3 normal, float n_dot_v, vec3 lightDirection, vec3 viewPosition, float roughness, float diffuse )
            {
                float n_dot_l = saturate( dot(lightDirection, normal ) );
                if( n_dot_l <= 0.0 )
                    return 0.0;

                vec3 halfVector = normalize( lightDirection + viewPosition );

                float h_dot_n = saturate( dot(    halfVector, normal ) );
                float h_dot_v = max( dot(    halfVector, viewPosition ), 0.0001 );

                float SRNI = 0.05;
                float fresnel = pow( 1.0 - h_dot_v, 5.0 );
                fresnel = SRNI + ( 1.0 - SRNI ) * fresnel;

                float distribution = CalculateGGX( roughness, h_dot_n );
                float geometricAttenuation = CalculateGeometricAtten( n_dot_l, h_dot_v, roughness );
                float specFinal = fresnel * distribution * geometricAttenuation * saturate( 1.0 / ( 4.0 * n_dot_l * n_dot_v ) ) ;
                return diffuse * n_dot_l * 0.3183 + specFinal;
            }

            void main()
            {
                vec3 normal = normalize( vNormal );
                vec3 viewPosition = normalize( vViewPosition );

                float n_dot_v = max( dot( normal, viewPosition ), 0.0001 );

                float roughness = 0.6;
                float diffuse = 1.0;

                // PBR Lighting
                vec3 lightAccumulation = vec3( finalFresnel );
                #if MAX_DIR_LIGHTS > 0
                    for( int i = 0; i < MAX_DIR_LIGHTS; i++ )
                    {
                        vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );
                        vec3 dirVector = normalize( lDirection.xyz );
                        lightAccumulation += directionalLightColor[i].xyz * CalculatePBRLighting( normal, n_dot_v, dirVector, viewPosition, roughness, diffuse ) * shadowTerm;
                    }
                #endif

                #if MAX_POINT_LIGHTS > 0
                    for( int i = 0; i < MAX_POINT_LIGHTS; i ++ )
                    {

                        vec3 pointVector = ( viewMatrix * vec4( pointLightPosition[ i ], 1.0 ) ).xyz + vViewPosition.xyz;
                        vec3 pointDirection = normalize( pointVector );
                        float pointDistance = length( pointVector ) * 0.001;

                        float falloff = saturate( 1.0 - pow( pointDistance / 0.875, 4.0 ) );
                        falloff *= falloff;
                        falloff /= ( pointDistance * pointDistance ) + 1.0;

                        lightAccumulation += pointLightColor[i].xyz * CalculatePBRLighting( normal, n_dot_v, pointDirection, viewPosition, roughness, diffuse ) * falloff;
                    }
                #endif

                gl_FragColor = vec4( lightAccumulation, 1.0 );
            }
        </script>