Architectural Benchmarking of Asynchronous State Synchronization in WebGL Spatial Graphs Driven by Real-Time Generative AI Pipelines
This preprint presents an empirical software engineering study on resolving main-thread performance bottlenecks in browser-based spatial computing. Abstract Real-time Retrieval-Augmented Generation (RAG) pipelines increasingly stream high-dimensional vector embeddings into browser-based visualizers. Under high-throughput data streams, standard client-side WebGL architectures struggle. Main-thread blockages during JSON deserialization, scene graph traversals, and draw-call assembly aggressively degrade rendering throughput, causing severe frame drops. We address this structural bottleneck by decoupling spatial state synchronization and WebGL rendering from the main user interface thread. The framework transfers canvas control to an OffscreenCanvas executing strictly inside an isolated Web Worker context. Incoming high-latency RAG vector payloads stream directly into worker memory. Position buffers, instanced geometry matrices, and semantic graph edge topologies update asynchronously, leaving the main user interface thread to handle only lightweight DOM events and layout rendering. Benchmarking this thread-decoupling strategy under continuous payload stream injection revealed significant performance gains. Isolating WebGL scene graphs within worker threads effectively eliminates UI jitter, establishing a deterministic runtime baseline for real-time spatial generative AI interfaces. Key Performance Benchmarks (vs. Naive React Three Fiber Control) Rendering Stability: Sustained a locked 60 FPS while ingesting a continuous stream of 2,000 spatial vector nodes. Zero Main-Thread Blocking: Reduced Total Blocking Time (TBT) to 0 ms. UI Responsiveness: Yielded a microscopic UI frame-time variance (Δt) of just 0.04 ms². Memory Optimization: Reduced peak JavaScript heap allocation by over 50% (from 412 MB to 184 MB) by bypassing React component tree reconciliation. Keywords OffscreenCanvas, WebGL, Web Workers, RAG Vector Visualization, Asynchronous State Synchronization, Instanced Mesh, React Three Fiber, Spatial Computing.