The web we know today is built around 2D documents. HTML, CSS, and JavaScript together create interfaces inside a flat, rectangular viewport. But what happens if we bring the entire web into 3D space?
Thatโs the question the JSAR Spatial Browser Engine is tackling. Instead of patching existing 2D browsers, JSAR reimagines the browser from the ground up as a spatial-first engine.
๐ Full article here: Understanding the Spatial Web Browser Engine | YODAOS JSAR
๐ What is a Spatial Web Browser?
A spatial browser doesnโt just render content on a 2D plane. Instead, it loads HTML, CSS, JS, WebGL/WebXR, and media into a 3D coordinate system.
- DOM elements (text, images, forms, canvas, video, etc.) exist as 3D objects with position, rotation, scale, and depth.
- Users interact through spatial inputs like gaze, gestures, and controllers.
- Web content and 3D models coexist seamlessly in the same space.
๐ Why not extend existing browsers?
Traditional engines (Blink, Gecko, WebKit) are optimized for 2D rendering pipelines. Forcing them to handle 3D scenes adds complexity and inefficiency.
JSAR instead designs a new architecture from scratch, aligned with the needs of immersive and spatial experiences.
โจ Key Features of JSAR
Here are some highlights from the engineโs design:
- Spatial DOM โ Elements come with 3D transforms (translate3d, rotate, scale) and real-world units (meters, not pixels).
- Unified Rendering Pipeline โ HTML UI and 3D models share the same rendering loop, with proper depth sorting and blending.
- Batch Rendering Optimization โ DOM elements are rendered as textured quads with instancing to minimize draw calls.
- Automatic Spatial Audio โ elements automatically gain positional sound effects without extra Web Audio setup.
- Input Mapping โ XR input sources (gaze, gestures, controllers) map directly to DOM events like click and mousemove.
- Embedded Integration โ Works as a library inside Unity (Unreal planned), rendering web content as native 3D UI components.
๐ฉโ๐ป Who benefits from this?
- Web Developers โ Bring existing web apps into 3D space without rewriting everything in XR frameworks.
- WebXR Developers โ Use HTML/CSS for spatial UI instead of building custom 3D GUI systems.
- Desktop & Workflow Innovators โ Even outside XR, spatial browsers can support infinite 3D canvases for multitasking and data visualization.
๐ฎ Looking Ahead
JSAR is still evolving, with current support for Unity + macOS/Android (OpenGL/GLES3). Future directions include Unreal integration, advanced transparency handling, and scaling across more platforms.
But the vision is clear: move from a 2D-first web to a space-first webโwhile keeping the openness and accessibility of existing web standards.
๐ Want to dive deeper?
This post is just a surface-level overview. The original article covers the architecture in much more detail, with diagrams and examples:
๐ Understanding the Spatial Web Browser Engine | YODAOS JSAR
๐ GitHub Repository: https://github.com/M-CreativeLab/jsar-runtime
Top comments (0)