Awesome

glTF Sample Viewer Web App

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

Viewer

Link to the live glTF 2.0 Sample Viewer.

Usage

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 selection list
• Drag and drop glTF files into viewer

Change the environment map

• Drag and drop a .hdr panorama file

Setup

For local usage and debugging, please follow these instructions:

0. Make sure Git LFS is installed.

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

   • run npm install
   • start a demo in the browser with npm run dev, and open http://localhost:8000.

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
  • Visual Studio Code or vscodium
  • Chrome or Firefox
• 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.
• 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 give the following warning:

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 glob@7.2.3: Glob versions prior to v9 are no longer supported

These warnings come from rollup plugins copy and sourcemaps, both are dev dependencies and not used in the final distribution.
Sourcemap is used to make debugging of @khronosgroup/gltf-viewer possible.
Copy is used to copy all required files to dist.