This is the official Khronos glTF 2.0 Sample Viewer using WebGL 2.0:
Link to the live glTF 2.0 Sample Viewer.
- glTF 2.0
- KHR_animation_pointer
- KHR_draco_mesh_compression
- KHR_lights_punctual
- KHR_materials_anisotropy
- KHR_materials_clearcoat
- KHR_materials_diffuse_transmission
- KHR_materials_dispersion
- KHR_materials_emissive_strength
- KHR_materials_ior
- KHR_materials_iridescence
- KHR_materials_pbrSpecularGlossiness
- KHR_materials_sheen
- KHR_materials_specular
- KHR_materials_transmission
- KHR_materials_unlit
- KHR_materials_variants
- KHR_materials_volume
- KHR_materials_volume_scatter
- For dense volumes using KHR_materials_diffuse_transmission
- For sparse volumes using KHR_materials_transmission
- KHR_mesh_quantization
- KHR_texture_basisu
- KHR_texture_transform
- KHR_xmp_json_ld
- EXT_mesh_gpu_instancing
- EXT_texture_webp
- 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
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
- Choose one of the glTF models in the selection list
- Drag and drop glTF files into viewer
- Drag and drop a .hdr panorama file
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 URLnoUI: Disable UIyaw=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 90distance=5: The models gets smaller with positive and bigger with negative numbers. Relative to the initial camera position.
For local usage and debugging, please follow these instructions:
-
Checkout the
mainbranch -
Pull the submodule for the required glTF-Sample-Renderer
git submodule update --init --recursive -
Build the web app
- run
npm install - start a demo in the browser with
npm run dev, and open http://localhost:8000.
- run
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.
- 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->ChromeorDebug->Add Configuration->Firefoxso the.vscode/launch.jsonfile is created. - For chrome: Append
/distto${workspaceFolder}in thelaunch.jsonfile Debug->Start Debuggingshould now launch a Chrome or Firefox window with the sample viewer and VS Code breakpoints should be hit.
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 [email protected]: 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 [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
This repository uses Prettier for code formatting and ESLint for linting.
To check the formatting and linting of the code run:
npm run formatPrettier and ESLint are configured to only run on files in the "source" folder and ignore files in "source/libs".
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.