Browser Hub Demo
WebGL 3D model rendering
This shows the difference between a PNG asset and a live model: the PNG is a fixed raster view, while the browser can draw a GLTF scene with camera, lighting, material, and motion controls.
Spatial interfaces
What this unlocks
Render an interactive 3D model in the browser instead of flattening everything into a static image. WebGL is broadly available in modern browsers when hardware acceleration is enabled. The model-viewer custom element is a progressive enhancement that falls back to its poster image if the model cannot render.
WebGL 3D model rendering
Render an interactive 3D model in the browser instead of flattening everything into a static image.
The same mascot appears twice below. The left panel is the procedural GLTF octopus rendered by the browser as a live 3D scene. The right panel is the new PNG mascot: a finished raster image with fixed pixels.
Live browser 3D
GLTF model
What the browser renders: geometry, camera, lighting, materials, rotation, and depth.
What users can inspect: a spatial object that can move or become interactive without exporting new image files.
Static raster asset
PNG image
What the browser renders: pixels from a pre-rendered transparent image.
What users can inspect: one fixed view that is fast, predictable, easy to cache, and ideal for logos or mascot art.
Use PNG when the exact art direction matters and the asset should stay lightweight and stable. Use browser-rendered 3D when rotation, depth, configurability, or material inspection is part of the product experience.
Use cases
Real product scenarios
These are the kinds of workflows where the API earns its complexity.
Product configurators and inspectable objects.
WebGL 3D model rendering helps when the browser needs to move beyond plain navigation and forms.
Portfolio pieces where material, depth, and rotation matter.
WebGL 3D model rendering helps when the browser needs to move beyond plain navigation and forms.
Browser-native prototypes before investing in a full 3D editor.
WebGL 3D model rendering helps when the browser needs to move beyond plain navigation and forms.
Shipping notes
Progressive enhancement rules
Browser capability work is product design work. Support levels, permissions, secure context requirements, and fallback behavior matter as much as the demo itself.
Keep a static poster or PNG fallback for browsers, devices, or accessibility contexts where 3D is not useful.
WebGL is broadly available in modern browsers when hardware acceleration is enabled. The model-viewer custom element is a progressive enhancement that falls back to its poster image if the model cannot render.
Budget model weight, GPU cost, interaction affordances, and reduced-motion behavior.
WebGL is broadly available in modern browsers when hardware acceleration is enabled. The model-viewer custom element is a progressive enhancement that falls back to its poster image if the model cannot render.
More demos
Related browser capabilities
Continue through the hub to see how other modern APIs can reshape UX, device integration, and workflow design.
Perception APIs
Barcode Detection API
Detect QR codes and barcodes directly in-browser from uploaded or camera-captured images.
Open Barcode Detection APIMultiwindow UX
Document Picture-in-Picture API
Pop a mini always-on-top window for controls, timers, notes, or monitoring panels.
Open Document Picture-in-Picture API