DEV Community

Cover image for Rethinking the Web: Inside the Spatial Browser Engine (JSAR)
Yorkie Liu
Yorkie Liu

Posted on

Rethinking the Web: Inside the Spatial Browser Engine (JSAR)

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?

Screenshot: DOM with three.js

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)