Blog · How-to
How to view a GLB file in your browser
GLB is the format the web was built for — every modern browser can render it through WebGL. No installs, no plugins, no Flash. Here are the working ways to view a .glb file directly in a browser in 2026.
Quickest — drop it in a web viewer
Open open3d.app/viewer. Drag your GLB onto the page or use the file picker. The model renders in seconds with PBR materials, environment lighting, and any animations playing back automatically. Drag to orbit, scroll to zoom.
The file never leaves your device — parsing and rendering both happen in the browser.
Other web viewers that do roughly the same thing: gltf.report (focused on inspecting the file structure), Khronos sample viewer (the official reference implementation), Babylon Sandbox (high-quality renderer).
Embed a GLB on your own page — model-viewer
If you want to publish a GLB on your own site, Google's <model-viewer> web component handles it with one HTML tag:
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4/model-viewer.min.js"></script> <model-viewer src="my-model.glb" camera-controls auto-rotate></model-viewer>
That's the full markup. Drop it into any HTML page and you have a 3D viewer with orbit, AR launch on supported devices, and animation playback. The component is maintained by Google, used on the Google Store for product visualisation.
Build your own with three.js
If model-viewer's defaults don't fit, three.js gives you full control. Minimal example:
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new GLTFLoader().load('my-model.glb', (gltf) => {
scene.add(gltf.scene);
});
camera.position.set(0, 1, 3);
new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1));
(function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
})();
Three.js handles GLB with embedded Draco compression, KTX2 textures, skinned animations and morph targets out of the box.
What about really big GLB files?
WebGL has practical limits — browsers cap WebGL memory at around 500 MB to 2 GB depending on platform. A GLB with 4K PBR textures across 100 materials can hit that limit. Two ways to handle it:
- Compress the GLB with glTF-Transform: Draco for geometry, KTX2 for textures. Typical 10–20x reduction.
- Downsample textures at runtime if you control the viewer. Reduce 2K textures to 1K or 512 before upload.
What about mobile?
iOS Safari, Chrome on Android and all the major mobile browsers fully support WebGL 2 and load GLB the same way as desktop. The only catch is memory — mobile WebGL caps are lower, often around 300–500 MB. Same compression advice applies.
AR view from a GLB in the browser
On Android, model-viewer can launch Scene Viewer in AR with a single attribute (ar). On iOS, the browser needs a USDZ alternate — model-viewer handles converting via the ios-src attribute or you supply both.
<model-viewer src="my-model.glb" ios-src="my-model.usdz" ar camera-controls></model-viewer>