Home Original page

GitHub - KhronosGroup/glTF-Sample-Viewer: Physically-Based Rendering in glTF 2.0 using WebGL

glTF Sample Viewer Web App

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

Viewer

Link to the live glTF 2.0 Sample Viewer.

Features

glTF

UI

  • Select all glTF-Sample-Assets directly via UI
  • Load your own glTF/glb and HDR files via drag and drop
  • Customize lighting and tone mapping
  • Check validation errors with the integrated glTF-Validator
  • Select different material variants
  • Enable/disable specific animations
  • Enable/disable glTF features/extensions and view debug channels
  • Download renderings and current camera properties
  • Show statistics about the currently loaded file
  • Specify URL parameters to modify behavior on load

Usage

Controls

click + drag : Rotate model

shift + drag
middle mouse button + drag : Pan camera

scroll
right click + drag : Zoom camera

GUI : Use to change models and settings

Change glTF model

  • Choose one of the glTF models in the selection list
  • Drag and drop glTF files into viewer

Change the environment map

  • Drag and drop a .hdr panorama file

URL parameters

URL parameters are added at the end of the sample viewer URL:
?key=value&another_key=another_value

Possible parameters:

  • model=URL_to_file: Load glTF/glb from specified URL
  • noUI: Disable UI
  • yaw=90: Orbit the camera around the model along the Y-axis in degrees. With 90 degrees you look at the model from the left side.
  • pitch=90: Orbit the camera around the model along the X-axis in degrees. With 90 degrees you look at the model from the top. Value range: -90 to 90
  • distance=5: The models gets smaller with positive and bigger with negative numbers. Relative to the initial camera position.

Setup

For local usage and debugging, please follow these instructions:

  1. Checkout the main branch

  2. Pull the submodule for the required glTF-Sample-Renderer git submodule update --init --recursive

  3. Build the web app

When making changes, the project is automatically rebuilt and the ./dist directory is populated with the web app. This directory contains all files necessary for deployment to a webserver.

Debugging

  • Requirements
  • Install the Debugger for Chrome or Debugger for Firefox extension for Visual Studio Code
  • Open the project directory in Visual Studio Code and select Debug->Add Configuration->Chrome or Debug->Add Configuration->Firefox so the .vscode/launch.json file is created.
  • For chrome: Append /dist to ${workspaceFolder} in the launch.json file
  • Debug->Start Debugging should now launch a Chrome or Firefox window with the sample viewer and VS Code breakpoints should be hit.

Known Issues

npm install / npm run dev give the following warnings:

The following warning comes from a thirdparty and does not affect sample viewer since the mentioned line 179 is never executed.

(!) "this" has been rewritten to "undefined"
https://rollupjs.org/troubleshooting/#error-this-is-undefined
node_modules/iobuffer/lib-esm/text-encoding-polyfill.js
177:     : typeof self !== 'undefined'
178:         ? self
179:         : this);
               ^
180: //# sourceMappingURL=text-encoding-polyfill.js.map

The following warning is caused by an old bulma version, which buefy-next currently depends on. This should be fixed in an upcoming release: ntohq/buefy-next#208

[0] [build] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0]    ╷
[0] 51 │ ┌   &:not(.is-rounded)
[0] 52 │ │     border-radius: $radius-small
[0]    │ └─── nested rule
[0] 53 │     font-size: $size-small
[0]    │     ^^^^^^^^^^^^^^^^^^^^^^ declaration
[0]    ╵
[0]     node_modules\bulma\sass\elements\button.sass 53:3   button-small()
[0]     node_modules\bulma\sass\elements\button.sass 252:5  @import
[0]     node_modules\bulma\sass\elements\_all.sass 5:9      @import
[0]     node_modules\bulma\bulma.sass 5:9                   @import
[0]     stdin 60:9                                          root stylesheet

The following warnings stem from the rollup copy plugin, which is only used for development to copy files to the dist folder.

npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

Formatting

This repository uses Prettier for code formatting and ESLint for linting.

To check the formatting and linting of the code run:

Prettier and ESLint are configured to only run on files in the "source" folder and ignore files in "source/libs".

Visual Studio Code

There are extensions for both Prettier and ESLint in Visual Studio Code. They can be found in the marketplace:

You are encouraged to run Prettier and ESLint on your code before committing.