How to Preview glTF Files and JSON Schemas in VS Code

This article explains how Visual Studio Code bridges the gap between raw 3D data and interactive rendering through dedicated glTF extensions. By coupling strict Khronos Group JSON schema validation with embedded Webview engines like Babylon.js or Three.js, developers can inspect, validate, and preview 3D assets in real time alongside their source code.

The Role of JSON Schemas in glTF Validation

The glTF (GL Transmission Format) standard uses JSON to describe scene graphs, node hierarchies, materials, cameras, and animations, while referencing separate or embedded binary buffers for geometry and textures. Because the structural data is standard JSON, VS Code natively leverages JSON Schema to provide deep code intelligence.

When opening a .gltf file, VS Code associates the document with the official Khronos glTF JSON Schema. This integration provides several immediate benefits:

  • Instant Validation: Flags syntax errors, missing required properties, or invalid data types based on the specific glTF version (such as 2.0).
  • IntelliSense and Autocomplete: Suggests valid properties, accessor types, and standard material definitions as you type.
  • Contextual Documentation: Hovering over any property displays tooltips generated directly from schema descriptions, eliminating the need to cross-reference external documentation.

Integrating 3D Previews via Webview Panels

To visualize the model represented by the JSON structure, developers use extensions such as the official glTF Tools extension for VS Code. The editor does not render 3D scenes natively; instead, it uses the VS Code Webview API to create an isolated browser context within an editor tab.

Once installed, the extension provides a command to open a live 3D preview alongside the text editor. The underlying previewer can typically switch between several standard rendering engines—including Babylon.js, Three.js, and Google's Filament—to show how the asset renders across different target environments and Physically Based Rendering (PBR) pipelines.

Bi-Directional Inspection and Live Synchronization

The true integration between the preview tool and the JSON editor is bidirectional:

  1. Editor to Preview: When you modify values in the JSON file—such as changing a base color factor, adjusting roughness, or altering a node transformation matrix—saving the file automatically refreshes the 3D viewport, providing immediate visual feedback.
  2. Preview to Editor: Advanced previewers support outline synchronization. Clicking a specific mesh, node, or material in the 3D viewport automatically navigates the cursor to the corresponding line in the JSON file, simplifying debugging in complex scenes.

Working with Binary glTF (.glb)

While standard .gltf files are human-readable text, production workflows often rely on .glb files, which package the JSON declaration and binary buffers into a single container.

The glTF extension ecosystem integrates with VS Code’s custom editor APIs to handle .glb files seamlessly. It can deconstruct the binary container on the fly, presenting the embedded JSON chunk in the text editor for modification while keeping the 3D preview active. Developers can also use built-in commands to convert between .gltf and .glb formats directly inside the workspace without external CLI tools.