This is the offical Khronos glTF 2.0 reference viewer using WebGL.

Table of Contents

• Viewer
  • Usage
  • Setup
  • Debugging
• Physically-Based Materials in glTF 2.0
• Appendix
  • Specular Term
    • Microfaced Distribution (D)
    • Surface Reflection Ratio (F)
    • Geometric Occlusion (G)
  • Diffuse Term
• Features

If you would like to see this in action, view the live demo.

Controls

click + drag : Rotate model

scroll : Zoom camera

GUI : Use to change models and settings

Change glTF model

• Choose one of the glTF models in the selction list

or

• Drag and drop glTF files into viewer

Offline / Headless Rendering

NOTE: The dimensions of the rendered image are limited by the (virtual) desktop size.

Requirements

• NodeJS
• Electron (Installed automatically)

Configure environment

• npm install (also installs Electron)
• npm run build (“compile” the code)

Run

• npm run start-offscreen -- -- -h for a list of available options

Example

• npm run start-offscreen -- -- assets\models\2.0\FlightHelmet\glTF\FlightHelmet.gltf

After execution, the screenshot is stored as output.png on the file system.

For local usage and debugging, please follow these instructions:

(1) Checkout the reference-viewer branch

(2) Install dependencies with npm install

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

(4a) Start a demo in the browser with npm run dev, and open http://localhost:8000.

(4b) Start a demo in Electron with npm run dev:electron.

When making changes, the project is automatically rebuilt and the dist/ folder is updated. Files in the dist/ folder should not be included in pull requests — they will be updated by project maintainers with each new release.

• Requirements
  • Visual Studio Code
  • Mozilla Firefox
• Install the Debugger for Firefox extension for Visual Studio Code
• Open the project folder in Visual Studio Code and select Debug->Add Configuration->Firefox so the .vscode/launch.json file is created.
• Debug->Start Debugging should now launch a Firefox window with the reference viewer and VS Code breakpoints should be hit.

VS Code

Modified VSCode gltf-vscode plugin:

gltf-vscode

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 chosing 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.

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

vec3 specularContribution = D * Vis * G;
vec3 diffuseContribution = (1.0 - F) * diffuse; 

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

Trowbridge-Reitz GGX

float microfacetDistribution(MaterialInfo materialInfo, AngularInfo angularInfo)
{
    float alphaRoughnessSq = materialInfo.alphaRoughness * materialInfo.alphaRoughness;
    float f = (angularInfo.NdotH * alphaRoughnessSq - angularInfo.NdotH) * angularInfo.NdotH + 1.0;
    return alphaRoughnessSq / (M_PI * f * f);
}

Fresnel Schlick

vec3 specularReflection(MaterialInfo materialInfo, AngularInfo angularInfo)
{
    return materialInfo.reflectance0 + (materialInfo.reflectance90 - materialInfo.reflectance0) * pow(clamp(1.0 - angularInfo.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).

Smith Joint GGX

float visibilityOcclusion(MaterialInfo materialInfo, AngularInfo angularInfo)
{
    float NdotL = angularInfo.NdotL;
    float NdotV = angularInfo.NdotV;
    float alphaRoughnessSq = materialInfo.alphaRoughness * materialInfo.alphaRoughness;

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

    return 0.5 / (GGXV + GGXL);
}

Lambert

vec3 diffuse(MaterialInfo materialInfo)
{
    return materialInfo.diffuseColor / M_PI;
}

• glTF 2.0
• KHR_lights_punctual extension
• KHR_materials_pbrSpecularGlossiness
• KHR_materials_unlit extension
• KHR_texture_transform extension