Understanding the Spatial Web Browser Engine
1. What Is a Spatial Web Browser?
A Spatial Web Browser is a user agent that loads, interprets, and presents Web content (HTML, CSS, JS, WebGL/WebGPU, WebXR, media) directly inside a 3D coordinate space instead of flattening everything onto a 2D rectangular viewport. Every DOM element (text nodes, images, canvas, form controls, SVG, etc.) can be:
Positioned, rotated, and scaled in world / XR reference spaces
Layered with true depth ordering (not just z-index compositing) for stereoscopic correctness
Interacted with using spatial input sources (gaze, hands, controllers, future: eye tracking, anchors)
Composed alongside native 3D assets (GLTF models, environment maps) in one unified frame loop
In short: a Spatial Web Browser lets "regular Web pages" become immersive 3D experiences without abandoning open Web standards.
2. Why Not Just Extend an Existing (Classic) Browser?
Traditional engines (Blink, Gecko, WebKit) are extraordinarily capable—but architecturally optimized for 2D document + compositor pipelines. Retrofitting full 3D spatial semantics collides with deep assumptions:
XR Spatial Integration Requirements: In XR systems, we need to seamlessly integrate Web content with other Unity/Unreal 3D engine content in spatial environments, which traditional browsers' 2D architecture cannot satisfy. Full 3D Element Design: Inspired by visionOS, in Spatial Web, we need all elements to have true 3D spatial properties rather than being confined to a flat plane, requiring a complete architectural redesign from the ground up.
Therefore JSAR pursues a purpose-built Spatial Web Browser Engine rather than modifying an existing one.
This approach contrasts with the evolutionary path taken by visionOS Safari, which gradually introduces spatial features like HTMLModelElement for 3D model display and Spatial Photo support for stereoscopic images. While visionOS represents a progressive enhancement of traditional browser engines toward spatial capabilities, JSAR chose a fundamentally different direction—designing for spatial (3D) environments from the ground up rather than retrofitting existing 2D architectures.
Both approaches ultimately converge toward the same goal: enabling web developers to create true 3D applications using familiar web technologies without learning new frameworks or specialized knowledge. Whether through gradual evolution or ground-up redesign, the future of spatial web development will remain accessible to existing web developers while unlocking the full potential of three-dimensional user interfaces.
3. Definition: Spatial Web Browser Engine
A Spatial Web Browser Engine is the runnable core (parsing, layout, styling, scripting, rendering, device integration) specialized for spatial presentation. In JSAR this means:
Standards Alignment
HTML5 subset, CSS3 partial, DOM APIs, WebGL1/2, WebXR spaces & inputs.
Spatialized DOM
Each element resolves to a layout object enriched with layer + transform metadata.
Unified Render Passes
Discrete passes ( onBeforeRendering , onOpaquesRenderPass , onTransparentsRenderPass , onAfterRendering ) integrate seamlessly with host 3D engines.
Efficient Batching
Aggressive draw-call minimization for stereoscopic + high-refresh headsets.
Embeddability
Loaders (Unity available, Unreal planned) treat the engine as a library.
Developer Tooling
Chrome DevTools Protocol (Runtime domain) with WebSocket server implementation to enable Chrome DevTools and other CDP clients for web application debugging. Future plans include rendering debugging tools spatially for enhanced visualization capabilities in specific use cases.
4. Core Capabilities
4.1 Spatialized DOM
Every HTML element carries intrinsic 3D spatial properties, not just 2D positioning.
CSS transform functions work natively in 3D space ( translate3d() , rotateX/Y/Z() , scale3d() )
, , ) Layer field metadata per LayoutObject for depth ordering
for depth ordering Elements can be positioned using spatial units conceptually (meters, not just pixels)
Example:
css .spatial-panel { transform : translate3d ( 2 px , 1.5 px , -3 px ) rotateY ( 15 deg ); /* Panel positioned 2px right, 1.5px up, 3px forward, rotated 15° */ }
4.2 Unified Graphics Pipeline
HTML elements and 3D content can be seamlessly integrated in JSAR, enabling powerful combinations like HTML + Three.js for mixed reality applications. HTML serves as the foundation for implementing Spatialized GUI components, while Three.js handles 3D model rendering and complex 3D applications within the XR space.
JSAR's WebGL/WebXR Foundation:
JSAR achieves this integration through comprehensive support for WebGL and WebXR, allowing popular frameworks like Three.js, Babylon.js, or custom web rendering engines to run natively on the platform.
Key Difference in Initialization:
Unlike traditional browsers where you request a canvas element and draw scenes onto it, XR spatial environments don't require a canvas. Instead, JSAR provides direct access to navigator.gl - a WebGL2 context that allows you to draw objects directly into the spatial environment.
Example: A virtual museum implementation demonstrating HTML + Three.js integration:
html < html > < head > < meta charset = "utf-8" /> < title >Virtual Museum - JSAR Spatial Browser < script type = "importmap" > { "imports": { "three": "https://ar.rokidcdn.com/web-assets/yodaos-jsar/dist/three/build/three.module.js" } } < style > .info-panel { position : absolute ; background : rgba ( 0 , 0 , 0 , 0.8 ); color : white ; padding : 20 px ; border-radius : 10 px ; width : 300 px ; transform : translateZ ( 100 px ); } .artifact-info { left : 50 px ; top : 100 px ; } .controls { right : 50 px ; top : 100 px ; } < body > < div class = "info-panel artifact-info" > < h3 >Ancient Vase < p >Ming Dynasty ceramic vase from 1368-1644 CE < div class = "info-panel controls" > < h3 >Museum Controls < script type = "module" > import * as THREE from 'three' ; let scene, camera, renderer; let artifactMesh; async function init () { // Initialize Three.js with navigator.gl (no canvas needed) const gl = navigator.gl; try { scene = new THREE . Scene (); camera = new THREE . PerspectiveCamera ( 75 , window.innerWidth / window.innerHeight, 0.1 , 1000 ); renderer = new THREE . WebGLRenderer ({ canvas: { addEventListener () { } }, context: gl, }); // Create 3D artifact (vase) const geometry = new THREE . BoxGeometry ( 0.5 ); const material = new THREE . MeshPhongMaterial ({ color: 0x8B4513 }); artifactMesh = new THREE . Mesh (geometry, material); artifactMesh.position. set ( 0 , 0 , 0 ); scene. add (artifactMesh); // Fit the scene to the proper size function fitTo ( scene , targetSize = 1 ) { const box = new THREE . Box3 (); scene. traverse ( object => { if (object instanceof THREE . Mesh || object instanceof THREE . Group ) { box. expandByObject (object); } }); const size = box. getSize ( new THREE . Vector3 ()); const scale = targetSize / Math. max (size.x, size.y, size.z); scene.scale. set (scale, scale, scale); } fitTo (scene, 0.2 ); // Add lighting const ambientLight = new THREE . AmbientLight ( 0x404040 , 0.6 ); const directionalLight = new THREE . DirectionalLight ( 0xffffff , 0.8 ); directionalLight.position. set ( 1 , 1 , 1 ); scene. add (ambientLight); scene. add (directionalLight); // Set up XR session const session = await navigator.xr. requestSession ( 'immersive-ar' , {}); const baseLayer = new XRWebGLLayer (session, gl); session. updateRenderState ({ baseLayer }); renderer.xr.enabled = true ; renderer.xr. setReferenceSpaceType ( 'local' ); renderer.xr. setSession (session); // Start render loop renderer. setAnimationLoop (animate); } catch (err) { console. error ( 'Failed to initialize XR:' , err); } } function animate () { artifactMesh.rotation.y += 0.01 ; renderer. render (scene, camera); } init ();
This example demonstrates how HTML
panels provide interactive UI controls and Three.js renders 3D artifacts using navigator.gl instead of canvas - both coexisting in the same 3D scene with proper depth ordering and spatial relationships.
4.3 Standards Compatibility
Developers can reuse existing Web knowledge instead of learning proprietary 3D APIs.
Example: Existing web developers can create spatial UIs using familiar
, CSS Grid, and JavaScript without learning Unity or Unreal Engine-specific APIs.
4.4 XR & 3D Integration
Native support for immersive viewing modes and spatial interaction paradigms.
4.4.1 Stereo Rendering
JSAR supports both mono and stereo rendering modes to provide immersive experiences across different display types and platforms:
Native Binocular Devices: On devices with natural dual-eye displays (VR/AR headsets), JSAR enforces stereo mode for dual-eye rendering. All Web Content is automatically rendered from both left and right eye perspectives, creating true stereoscopic 3D experiences.
Desktop Platforms: Users can choose between mono and stereo rendering modes for Web content. This flexibility allows developers to test stereo experiences on traditional displays or provide optional 3D viewing modes.
4.4.2 Spatial Audio System
JSAR provides automatic 3D audio spatialization for all audio elements without requiring complex Web Audio API setup, making spatial audio accessible to all web developers.
Every