The glTF Sample Viewer is an essential part of the glTF ecosystem. Developed by the Khronos 3D Formats Working Group, this open-source JavaScript viewer highlights the latest features of glTF, renders glTF files directly in a web browser, and can be easily integrated into other JavaScript projects using glTF.

Working closely with UX3D, a software company specializing in 3D rendering and user interfaces, Khronos has released version 1.1 of the Viewer, offering substantial functionality and usability improvements. In this blog, we’ll explore the new features of the glTF Sample Viewer 1.1 and share insights on how we’ve made it easier to integrate Sample Viewer into  web applications.

Repository Restructuring for Easier Renderer Embedding

With a growing number of projects integrating the glTF Sample Viewer, a well-designed project structure is increasingly important to streamline such embedding. Most importantly, we wanted to decouple the Viewer renderer from the user interface. 

The Sample Viewer project was originally developed monolithically, without clear separation between renderer and user interface. This meant that when cloning the glTF Sample Viewer repository, projects were required to download the user interface, which has many dependencies, even when only the renderer was needed. 

This update has created a standalone git repository for the glTF renderer as a git submodule. The main repository of the glTF Sample Viewer contains only the user interface, enabling far more flexible integration of the renderer into larger projects.

Added WebP Support

The glTF 2.0 core standard supports the well-known PNG and JPEG image formats and glTF extensions enable several additional formats. Each format is well-suited to different use cases. For example: 

• PNG provides lossless image compression, making it suitable for textures that represent surface normals.
• JPEG provides a lossy compression to reduce asset size with reasonable quality.

The glTF extension EXT_texture_webp enables support for WebP, which is a more modern image format than PNG or JPEG. WebP supports both lossless and lossy compression using the same method as VP8 keyframe encoding for smaller file sizes than PNG or JPEG. For example, a Google developer study found that WebP reduces file size by 25% to 34% compared to JPEG at a similar quality level. This Sample Viewer update adds support for the WebP image format, enabling developers to easily test their glTF models using WebP and compare the visual quality against other image formats.

It’s important to note that PNG, JPEG, and WebP images must be uncompressed before loading to a GPU, potentially using a large amount of GPU memory and adversely affecting performance. The KHR_texture_basisu extension provides support for platform-independent supercompressed textures that can be transcoded into GPU native block-compressed texture formats on the fly. These textures remain compressed  on the GPU, significantly reducing GPU memory and power usage and improving performance compared to PNG, JPEG, or WebP images.

Enhanced Mobile Support

This update significantly enhances the operation of the glTF Sample Viewer on mobile devices. Previously, limited screen width made the user interface not visible on some devices, while other devices failed to render anything at all due to lack of hardware support for floating point textures.

The solution to the mobile interface issues turned out to be simple: we introduced a fullscreen mode that activates by default on devices with smaller horizontal screens. This approach emphasizes the asset rendering by maximizing the available screen space. With just one click, users can access the control panel, which offers the same functionality as running the viewer on the desktop.

The rendering issues were due to the Viewer’s previous reliance on high dynamic range environment images to precalculate lighting setup, using textures with 32 bits per channel. However, by default, WebGL 2.0 does not support texture filtering or framebuffer target at 32-bit depth, and extensions for 32-bit textures are often not supported on mobile devices. In this case, we now convert 32-bit float values to 16-bit float values before using them as texture resources,  reducing the precision of textures to 16 bits per channel. Interestingly, an experimental version of Firefox supports arrays consisting of 16-bit floats in JavaScript, enabling automatic conversion of 32-bit floats to 16-bit float textures.

In the end, we found no noticeable visual differences between using 16-bit floats or 32-bit floats, and so we now use 16-bit float textures by default for processing efficiency. Also, in the rare case even 16-bit float textures are not supported, we fall back to 8-bit values. Here, we clamp values outside standard range and accumulate all lighting energy that was lost due to clamping. This accumulated value is used as a scaling factor in the shader to approximately compensate for lost energy. 

With these adaptations to the user interface and carefully considering rendering capabilities, the glTF Sample Viewer is now usable on most mobile devices.

Added KHR_animation_pointer support

The glTF KHR_animation_pointer extension significantly enhances animation capabilities within glTF scenes by providing a generic method to animate any mutable property specified by a JSON pointer. This enables far more flexibility than the previously available animations of position, rotation, and scale. Now it is possible to animate, for example, the emissive color, the intensity of a light, the FoV of a camera, or any property of an extension. 

The V1.1 release of the glTF Sample Viewer implements KHR_animation_pointer support in a futureproof fashion through built-in Javascript getters and setters so that programmers do not need to know if a property is animated. When accessing a variable, the currently correct value is returned, whereas only setting the property will overwrite the resting value. Therefore, code which is unrelated to animations is unchanged. Adding the KHR_animation_pointer support for new extensions in the Viewer is simply achieved by defining an array with the names of animatable properties.

glTF Validator Integration

The glTF Sample Viewer is often used to check if a glTF asset appears visually correct, but until now, it did not check if the glTF file being displayed was correctly formed. That is now remedied with this update that integrates the glTF Validator into the Viewer. (You may applaud now ;-)

The open source glTF Validator checks all data contained in a glTF or GLB file. For example, it can flag an error if zfar is smaller than znear; warn you if the number of vertices does not match the drawing mode; give you informative comments about empty nodes or values which do not have any effect; and more. It’s awesome! You may applaud again ;-)

The Validator is accessed via a new Viewer tab that displays any errors, warnings, and informative comments related to currently visible glTF. The Validator tab icon displays the number of issues, color-coded by severity: red for errors, yellow for warnings and white for informative comments. If there are no issues with the file, a normal icon is shown. It is also possible to download or copy the JSON glTF Validator report to the clipboard, which contains useful statistics even if there are no issues. 

With this addition, the glTF Sample Viewer is now a robust tool to verify as well as view glTF files.

Screenshot of the new glTF Validator tab showing an asset with 8 informative comments

Under the Covers 

Updating Dependencies

Before starting development of this release, we updated all libraries to their latest versions. Most upgrades, including eslint, jsdoc-to-markdown, fast-png, concurrently, and the wasm build of the latest ktx library, were completed without issues. However, since Vue.js 2 has reached its end of support, we needed to upgrade to Vue.js 3, which includes breaking changes. Additionally, our UI framework, Buefy, does not support Vue.js 3, so we switched to buefy-next, an official fork developed to be compatible with the latest Vue.js versions. Maintaining up-to-date dependencies will be an ongoing effort.

Preserving Git History

When splitting the repository to separate the renderer and UI, we preserved the complete git history in both projects in order to enable future developers to understand the code and trace changes. We duplicated the git history using the following steps: 

1. Create a new repository
2. Push the old repository with updated origin to the new repository
3. Delete respective parts of the two repositories
4. Integrate the renderer repository as submodule in the original repository

Updated Build Process

The main repository of the glTF Sample Viewer now contains only the user interface; the renderer is included as a git submodule. One side effect of the new structure is the clear separation of the provided glTF renderer npm package, which now includes the entire renderer repository. As a result, we had to adjust the build process. Previously, we used Rollup to track source changes and trigger rebuilds. However, with the renderer moved to a submodule, this approach no longer worked because the renderer files were not included as input files. To address this, we implemented the npm-watch package to monitor file changes in the renderer submodule as well. Overall, this restructuring creates a clear division between the user interface and the renderer, allowing for more flexible integration of the renderer into other projects.

Conclusion

The glTF Sample Viewer 1.1 is complete and shipping. You can check out the new features on the Web, and the Viewer package has been uploaded  to npm for easy integration. If you find any bugs or have feature requests for the glTF Sample Viewer, feel free to create an issue or submit a pull request on our open source GitHub repo.