glTF Tools installs statistics

glTF Tools Extension for Visual Studio Code

Preview and debug glTF 3D models directly in the editor

Command name: glTF: Preview 3D Model, default key binding: 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.

Installing the glTF Tools Extension

Once you have Visual Studio Code installed, the next steps are simple:

If you wish to build this from source code, see Developer Environment.

Export text-based .gltf file and all its resources to binary .glb file.

Command name: glTF: Export to GLB (Binary file)

The glTF 3D model format comes in two varieties: *.gltf is a JSON-based text file, easily editable with this VS Code extension, often with references to external files such as texturemaps and binary mesh data. *.glb is a binary version, typically smaller and self-contained, but not easily editable.

The glTF: Export to GLB (Binary file) command will export your text-based glTF from the editor to a binary .glb file. In the exported version, whitespace in the JSON is stripped out, external file references are read in and converted to GLB binary bufferViews, and the resulting file becomes a self-contained transportable file that can be easily shared.

Import a binary .glb file as text-based .gltf

Command name: glTF: Import from GLB

The glTF: Import from GLB command will convert a binary .glb to JSON-based .gltf for editing, creating a separate file for the binary and additional files for each of the included images. Note that during import, some filenames are calculated based on the target filename of the output .gltf. For example, importing a sample file BoomBox.glb to .gltf may create the following files:

• BoomBox.gltf - The JSON structure. • BoomBox_data.bin - The binary mesh data • BoomBox_img0.png - Image file(s) extracted from the GLB • BoomBox_img1.png • BoomBox_img2.png • BoomBox_img3.png

The user is given a "Save As..." dialog for the base .gltf output filename only. The other files are saved to the same folder with names calculated by appending to the user's selected base name, and any pre-existing files with the same name will be overwritten.

Inspect data from files or data-URIs

Command name: glTF: Inspect Data, default key binding: ALT + D

Above, the user is inspecting the first accessor that is part of the BoomBox.gltf model from the official sample model repository. Place the document cursor on shaders, images, accessors, or mesh primitives then select the glTF: Inspect Data command to inspect the data. The command works for files or data-URIs.

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.

Tree View of Scene Nodes

When editing a glTF file, an icon with the glTF logo is visible in the left bar. This outline view reveals the structure of the glTF file and its internal references. This is a different structure than the plain JSON outline that keeps objects grouped by type.

You can also inspect the vertex and triangle data from a selected mesh primitive.

glTF Debugging

Debugging mesh primitive data can be achieved by opening the preview window at the same time as inspecting the mesh primitive data.

_Note that this feature is currently only supported when Babylon.js is the rendering engine._

For example, selecting a vertex will show the axes for that vertex. If multiple vertices are selected, each vertex will show an axes.

Here is an example of selecting triangles. Multi-select is available by holding down SHIFT and using the arrow keys.

BabylonJS Inspector integration

When previewing a model with the BabylonJS engine, click the little debug icon at the top to activate the Inspector. This inspector has been recently added, and not all of its tools are working inside of VSCode at this time. But, it can show model wireframes, point clouds, normal vectors, individual texture channels, and even allow temporary re-positioning of model nodes (although position changes are not copied back to the glTF document in this version).

See the Babylon Inspector Documentation for more information about this tool.

glTF Validation

Files can be validated three different ways:

• The official Khronos glTF Validator runs automatically on glTF 2.0 files, and reports any issues it finds to the document's "Problems" window. All such messages are marked with a [glTF Validator] prefix. This goes far beyond simple JSON validation, as it reads in external data and image files, and looks at mesh data itself for errors such as non-normalized normal vectors and inaccurate bounding volumes. • The same glTF Validator can also run as a manual process, by issuing the command glTF: Validate a GLB or GLTF file. This can be done by right-clicking a file in the VSCode File Explorer sidebar, or just running the command stand-alone to open a file dialog. This is the only method in this extension to validate GLB files directly, without conversion. A summary of the validation report appears in a popup, along with an option to save the JSON report. • The glTF JSON schema is registered with VSCode for *.gltf files, and VSCode will find schema violations using its own JSON schema validation, without help from the glTF Validator. This produces messages in the "Problems" window that *are not* marked [glTF Validator]. This is less thorough than full glTF validation, but is the only method available to glTF 1.0 files.…

Description from the VS Code Marketplace listing.