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.
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.
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.
Files are matched against the glTF 1.0 or glTF 2.0 schema, and schema violations are called out in the editor.
Hover the mouse over a numeric enum to see its meaning.
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.
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.
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 namesposx,negx,posy,negy,posz, andnegz. 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.
on GitHub. See CONTRIBUTING.md.
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
Apache 2.0, see LICENSE.md.
See CHANGELOG.md.