@khronosgroup/gltf-viewer

Khronos glTF 2.0 Sample Viewer

This is the official Khronos glTF 2.0 Sample Viewer using WebGL: glTF 2.0 Sample Viewer

Table of Contents

• Version
• Credits
• Features
• Setup
• Web App
• Physically-Based Materials in glTF 2.0
• Appendix A Metallic-Roughness Material
  • Specular Term
  • Diffuse Term
• Appendix B FAQ

See also the proposal for API and UI enhancements

Version

Development for PBR next phase one

Credits

Refactored and developed by UX3D. Supported by the Khronos Group and by Google for the glTF Draco mesh compression import. Original code based on the former glTF-WebGL-PBR project. Previously supported by Facebook for animations, skinning and morphing.

Features

• glTF 2.0
• KHR_draco_mesh_compression
• KHR_lights_punctual
• KHR_materials_clearcoat
• KHR_materials_pbrSpecularGlossiness
• KHR_materials_sheen
• KHR_materials_transmission
• KHR_materials_unlit
• KHR_materials_variants
• KHR_mesh_quantization
• KHR_texture_basisu
• KHR_texture_transform
• KHR_xmp_ld

Setup

For local usage and debugging, please follow these instructions:

• Make sure Git LFS is installed.

• Checkout the master branch

• Pull the submodules for the required glTF sample models and environments git submodule update --init --recursive

• To build the npm package for publishing:

  • run npm install
  • run npm run build

This will create a new gltf-viewer.js and gltf-viewer.module.js in the dist directory.

Web App

You can find an example application for the gltf viewer in the app_web subdirectory of the sample viewer repository. A live demo can be found at gltf.ux3d.io.

Physically-Based Materials in glTF 2.0

With the change from glTF 1.0 to glTF 2.0, one of the largest changes included core support for materials that could be used for physically-based shading. Part of this process involved choosing technically accurate, yet user-friendly, parameters for which developers and artists could use intuitively. This resulted in the introduction of the Metallic-Roughness Material to glTF. If you would like to read more about glTF, you can find the content at its GitHub page.

A good reference about Physically-Based Materials and its workflow can be found on the THE PBR GUIDE - PART 1 and THE PBR GUIDE - PART 2 from allegorithmic.

For implementation details and further theory, please find more information in the Real Shading in Unreal Engine 4 presentation from the SIGGRAPH 2013 course.

Appendix A: Metallic-Roughness Material

For further reference, please read the glTF 2.0: Appendix B: BRDF Implementation The following sections do summarize the important shader code.

vec3 F_specular = D * Vis * F;
vec3 F_diffuse = (1.0 - F) * diffuse;
vec3 F = F_specular + F_diffuse;

Please note: Vis = G / (4 * NdotL * NdotV)

Specular Term (F_specular)

Microfacet metallic-roughness BRDF

vec3 metallicBRDF (vec3 f0, vec3 f90, float alphaRoughness, float VdotH, float NdotL, float NdotV, float NdotH)
{
    vec3 F = fresnel(f0, f90, VdotH);
    float Vis = V_GGX(NdotL, NdotV, alphaRoughness);
    float D = D_GGX(NdotH, alphaRoughness);

    return F * Vis * D;
}

Surface Reflection Ratio (F)

Fresnel Schlick

vec3 fresnel(vec3 f0, vec3 f90, float VdotH)
{
    return f0 + (f90 - f0) * pow(clamp(1.0 - VdotH, 0.0, 1.0), 5.0);
}

Please note, that the above shader code includes the optimization for "turning off" the Fresnel edge brightening (see "Real-Time Rendering" Fourth Edition on page 325).

Geometric Occlusion / Visibility (V)

Smith Joint GGX

float V_GGX(float NdotL, float NdotV, float alphaRoughness)
{
    float alphaRoughnessSq = alphaRoughness * alphaRoughness;

    float GGXV = NdotL * sqrt(NdotV * NdotV * (1.0 - alphaRoughnessSq) + alphaRoughnessSq);
    float GGXL = NdotV * sqrt(NdotL * NdotL * (1.0 - alphaRoughnessSq) + alphaRoughnessSq);

    float GGX = GGXV + GGXL;
    if (GGX > 0.0)
    {
        return 0.5 / GGX;
    }
    return 0.0;
}

Normal Distribution (D)

Trowbridge-Reitz GGX

float D_GGX(float NdotH, float alphaRoughness)
{
    float alphaRoughnessSq = alphaRoughness * alphaRoughness;
    float f = (NdotH * NdotH) * (alphaRoughnessSq - 1.0) + 1.0;
    return alphaRoughnessSq / (M_PI * f * f);
}

Diffuse Term (F_diffuse)

Lambertian

vec3 lambertian(vec3 f0, vec3 f90, vec3 diffuseColor, float VdotH)
{
    return (1.0 - fresnel(f0, f90, VdotH)) * (diffuseColor / M_PI);
}

Appendix B: FAQ

Q: Why do I not see environment lighting here https://github.khronos.org/glTF-Sample-Viewer/? A: The glTF Sample Viewer is using KTX2 for the pre-filtered environments. However, the mime type is not yet registered here.