glTF Extension for Visual Studio Code

Preview glTF 3D models directly in the editor

Command name: glTF: Preview 3D Model, default keybinding: ALT + G

The above model, other sample models, and associated licenses can be obtained from the glTF-Sample-Models repository.

You can preview glTF files in a number of different rendering engines: BabylonJS, Cesium, and ThreeJS. The ThreeJS engine will preview the saved model as opposed to the current content in your open VS Code tab. The Babylon and Cesium engines will first try to preview what is currently in your tab, and only if that fails will it fall back on displaying the version of the model saved on disk.

Preview image files and data-URIs from inside the glTF document

Command name: glTF: Inspect Data URI, default keybinding: ALT + D

Above, the user is previewing a normal map that is part of the BoomBox.gltf model from the official sample model repository. The preview works even if the filename is replaced by a data: ... formatted URI. Place the document cursor on a dataURI, or on a block that has been folded closed with a dataURI in its uri field, then press ALT + D or look for the command glTF: Inspect Data URI in VSCode's list of commands (CTRL + SHIFT + P) and use that.

If you plan to preview GLSL shader code, consider installing a 3rd-party syntax highlighter with support for the *.glsl extension, for example Shader Language Support for VSCode by slevesque, to enable syntax highlighting in shader previews.

Convert files to and from Data URIs

In the list of commands (CTRL + SHIFT + P), there are two commands named glTF: Import file as Data URI and glTF: Export a Data URI to a file. To use these, place the document cursor on a block that contains a "uri" field. If the value of this field is a valid filename, Import will load that file, encode it to base64, and replace the filename with the dataURI in your document. Export is the reverse of this process, but first it will ask you for a filename to save to. It will save the file in the same folder as the glTF file, so it does not need a path, just a name. It will try to select an appropriate file extension based on the MIME type of the dataURI. It will also warn you if you are about to overwrite an existing file. If the save is successful, the dataURI will be replaced by the name of the newly created file.

Other Features

• Registers *.gltf files as JSON schema

Files are matched against the glTF 1.0 or glTF 2.0 schema, and schema violations are called out in the editor.

• Tooltips for glTF enum values

Hover the mouse over a numeric enum to see its meaning.

• Autocomplete for glTF enum values

Press CTRL + SPACE on a blank field to pop up a list of suggested values. As you scroll through the list, the meaning of the selected value is revealed.

This works for arrays as well, for example the list of enabled render states. Here for example, a user is looking to enable a BLEND state.

Compatibiliy and known size limitations

Currently, this extension is compatible only with *.gltf files, not the binary form of *.glb. This may change in the future. Contributions welcome!

Also, there is a known issue where VSCode extensions cannot manipulate documents that have grown beyond 5 MB in size. This limitation applies only to the main JSON-based glTF document, not to external assets such as the bin file, texture image files, etc. The sample model repo contains some models called glTF-Embedded, where all of the assets have been URI-encoded and placed inside the JSON document. For some of the larger models, this does make the document larger than the size limit, preventing this extension's preview windows from opening. We hope this limit will be increased or made user-configurable in the future. In the meantime, the workaround is to use the non-embedded versions of those models. The non-embedded versions are all well below the size limit, because the bulk of their data is external to the JSON.

Extension Settings

• glTF.defaultV1Engine - Choose the default 3D engine that will render a glTF 1.0 model in the preview window.
• glTF.defaultV2Engine - Choose the default 3D engine that will render a glTF 2.0 model in the preview window.
• glTF.Babylon.environment - Override the default reflection map for the BabylonJS glTF preview window. This specifies a local path to a Babylon DDS environment file, such as one created by following steps in Creating a DDS Environment File From an HDR Image.
• glTF.Three.environment - Override the default reflection map for the ThreeJS glTF preview window. There are 6 cube faces, with face names posx, negx, posy, negy, posz, and negz. The rest of the path and filename should be identical for all 6 files. The path and filename are specified as a single string, using {face} in place of the face name. The files must be in a format usable on the web, such as PNG or JPEG.

Source code

on GitHub. See CONTRIBUTING.md.

Acknowledgements

This extension makes use of the following open source projects:

• dat.GUI - Used for rendering the preview window's menu
• Cesium - One of the 3D engines used in the preview window
• Babylon.js - One of the 3D engines used in the preview window
• Three.js - One of the 3D engines used in the preview window

License

Apache 2.0, see LICENSE.md.

Release Notes

See CHANGELOG.md.