Integrated Artificial Reality Planetary Atlas: WebGL Architecture and Cartographic Visualization Audit

Full report

On this page

1. Executive Summary and Strategic Directives

The Integrated Artificial Reality Planetary Atlas (IARPA.org) Simulation Earth module requires a comprehensive architectural overhaul to elevate rendering correctness, input consistency, and browser performance. Operating within a constrained technical environment of vanilla JavaScript, WebGL, and static JSON, the system must harmonize a deterministic Web Worker simulation with a main-thread rendering pipeline. The visualization parameters demand a delicate balance between high-fidelity geopolitical data representation—spanning forty-eight synthetic cells, hundreds of current international records, and over two thousand historical nuclear detonations—and rigorous safety boundaries. The fundamental directive of this research report is to architect a system that visualizes abstract systemic changes while strictly prohibiting the generation of operational maps, tactical routes, or physical weapon range calculations. Furthermore, the architecture must guarantee graceful performance degradation across diverse hardware topologies, ranging from high-end desktop GPUs to constrained mobile environments. To achieve this, the reliance on CPU-bound main-thread operations must be systematically eliminated in favor of zero-copy memory sharing, advanced GPU instancing, and rigorous memory alignment. Accessibility and user safety form the final pillar of this mandate, requiring deep integration with Web Content Accessibility Guidelines (WCAG) 2.2, native screen-reader compatibility via the Accessible Rich Internet Applications (WAI-ARIA) suite, and rigorous protections against motion-triggered vestibular and photosensitive hazards.

2. Renderer Architecture and Thread Synchronization

The decoupling of the deterministic simulation state from the rendering pipeline is the foundational requirement for maintaining a responsive user interface under heavy computational load. Because the simulation executes within a Web Worker and the rendering and accessibility orchestration remain main-thread concerns, the inter-thread communication model dictates the performance ceiling of the entire application.

2.1 Separation of State Categories

The architecture mandates a strict delineation of state categories to ensure the main thread operates exclusively as a consumer of authoritative simulation data. The Simulation State represents the absolute ground truth of the synthetic cells and historical archives, maintained exclusively within the Web Worker to ensure determinism across varying client frame rates. The Derived Render State is a normalized, GPU-optimized representation of the Simulation State, specifically tailored for instanced rendering architectures. Camera and Interface State, encompassing the virtual trackball quaternions and Document Object Model (DOM) overlays, is managed entirely on the main thread to minimize input latency. Finally, the Accessibility State represents a parallel, visually hidden DOM structure that precisely synchronizes the semantic meaning of the WebGL canvas with assistive technologies.

2.2 Zero-Copy State Synchronization via Shared Memory

To achieve the performance budgets necessary for rendering thousands of dynamic markers, the system must abandon traditional JavaScript Object Notation (JSON) serialization and structured cloning for high-frequency updates. The architecture requires the implementation of a lock-free ring buffer utilizing SharedArrayBuffer and Atomics1. The Web Worker computes geometric transformations, event magnitudes, and color interpolations, writing the results directly into pre-allocated memory blocks formatted as Float32Array and Uint8Array contiguous buffers2. The main thread reads these arrays without invoking memory allocation or garbage collection, binding them directly to the WebGL state machine via bufferData or bufferSubData as ARRAY\_BUFFER targets for ANGLE\_instanced\_arrays2. Concurrency is managed through atomic operations, ensuring that the main thread never reads a partially updated frame. Standard postMessage communication is strictly relegated to low-frequency, asynchronous lifecycle events, such as initial payload loading or discrete user-triggered scenario parameter changes, maintaining a strict maximum size limit to prevent main-thread execution stalls.

2.3 Renderer Component Architecture

The following machine-readable Mermaid diagram illustrates the architectural data flow, explicitly separating the authoritative deterministic simulation from the main-thread presentation layer.

Code snippet graph TD subgraph Web Worker \[Deterministic Simulation Worker\] A\[Scenario & Event Orchestrator\] \--\> B\[DGGS Spatial Aggregation\] B \--\> C\[Float32/Uint8 Data Packer\] end

subgraph Memory \[Shared Memory\] C \-- Atomic Write \--\> D\[(SharedArrayBuffer Ring Buffer)\] end

subgraph Main Thread \[Browser Main Thread\] D \-- Zero-Copy Read \--\> E\[WebGL GPU Uploader\] F\[Input System / Arcball\] \--\> G\[Camera Matrices\] G \--\> E E \--\> H\[WebGL 1.0/2.0 Canvas\]

B \-. Low-Freq postMessage .-\> I\[DOM / UI Controller\] I \--\> J\[2D Canvas / SVG Fallback\] I \--\> K\[A11y DOM Tree\] end

H \--\> L((Display Output)) J \--\> L

3. Globe Foundations and Geometric Modeling

The geometric representation of the planetary body directly influences rendering performance, texture mapping fidelity, and mathematical simplicity. Historical implementations frequently rely on UV spheres generated via latitude and longitude tessellation, which introduce severe geometric distortions.

3.1 Mesh Generation: The Subdivided Icosphere

The traditional UV sphere topology suffers from polar singularities, resulting in extreme vertex clustering at the poles and sparse vertex density at the equator3. This uneven distribution causes severe texture pinching, anomalous lighting calculations, and wasted vertex shader execution times. The recommended architecture mandates the use of a subdivided icosphere (icosahedron)4. An icosahedron provides a base mesh of twelve vertices and twenty equilateral triangles3. Through iterative subdivision, each triangle is bisected into four smaller equilateral triangles, and the newly generated vertices are normalized to the sphere's defined radius5. This process yields a highly uniform vertex distribution across the entire planetary surface, ensuring consistent fragment shader workloads and eliminating polar texture distortion entirely4. To accommodate low, medium, and high device capabilities, the system must generate meshes at subdivisions four, five, and six, adapting dynamically based on the device's measured vertex processing throughput.

3.2 Texture Mapping, Color Space, and Gamma Correction

The application utilizes both NASA-style satellite imagery and simplified cartographic textures. WebGL inherently processes color mathematically in a linear color space, while images loaded via the DOM (\<img\> tags or raw bitmaps) are typically encoded in the sRGB color space. If the renderer samples sRGB textures and performs lighting or blending calculations without transforming them into linear space, the resulting mid-tones will appear artificially darkened and color transitions will become muddy. The shader pipeline must explicitly decode sRGB textures to linear space upon sampling. In WebGL 2.0, this is optimally handled by utilizing the SRGB8\_ALPHA8 texture internal format, which offloads the gamma decoding to the hardware texture sampling units. If restricted to WebGL 1.0, the fragment shader must manually approximate the decoding by raising the sampled color to the power of 2.2. After all atmospheric scattering, event blending, and lighting calculations are finalized in linear space, the final fragment color must be encoded back to sRGB (gamma correction) before being written to the default framebuffer to ensure accurate display on standard monitors.

3.3 North-Up Orientation and Winding Order

To maintain cartographic familiarity, the camera's up vector must be mathematically constrained to [Figure omitted from source export] in world space, preventing the globe from exhibiting off-axis roll during user interaction. The mesh generation algorithm must strictly enforce counter-clockwise (CCW) winding for all front-facing polygons3. This allows the WebGL state machine to utilize gl.enable(gl.CULL\_FACE), discarding back-facing triangles during the primitive assembly stage before they consume rasterization resources. Surface normals must be calculated analytically on the CPU during the subdivision phase and uploaded as a distinct vertex attribute, avoiding expensive cross-product normal approximations within the fragment shader.

4. Depth Precision, Frustum Mathematics, and GPU Performance

Rendering an environment that encompasses deep-space backgrounds, high-altitude atmospheric effects, and precise surface-level markers introduces extreme variations in the [Figure omitted from source export]\-axis. Managing the near and far clipping planes is critical to preventing [Figure omitted from source export]\-fighting, a phenomenon where precision loss causes coplanar or closely stacked geometries to flicker violently.

4.1 The Logarithmic Depth Penalty and Reverse-Z Architecture

Historically, geospatial engines resolved extreme depth ranges by utilizing a logarithmic depth buffer, calculated manually within the fragment shader by writing to the gl\_FragDepth built-in variable7. While this effectively distributes depth precision logarithmically, it introduces a catastrophic performance penalty on modern Graphics Processing Units (GPUs). Modern GPU architectures rely heavily on Early-Z culling, a hardware optimization that tests fragment depth before the fragment shader executes, discarding obscured pixels to save computational power and memory bandwidth10. When a shader writes to gl\_FragDepth, the hardware cannot determine the final depth until the shader completes execution. Consequently, Early-Z culling is entirely disabled, forcing the GPU to execute complex fragment shaders for occluded geometries10. For a mobile device rendering a dense globe, this leads to rapid thermal throttling and battery drain15. To eliminate [Figure omitted from source export]\-fighting without sacrificing Early-Z optimizations, the architecture must implement a Reverse-Z depth buffer. This technique leverages the inherent non-linear precision distribution of IEEE 754 floating-point numbers, which cluster densely around [Figure omitted from source export]. By configuring the projection matrix to map the near clipping plane to [Figure omitted from source export] and the far clipping plane to [Figure omitted from source export], and inverting the depth test function to gl.depthFunc(gl.GEQUAL), the engine places the highest concentration of floating-point precision exactly where it is needed: near the camera9. This approach requires a floating-point depth buffer, which is natively supported in WebGL 2.0 or available via the WEBGL\_depth\_texture and EXT\_color\_buffer\_float extensions in WebGL 1.0 environments16.

4.2 Uniform Buffer Objects and Memory Alignment Constraints

To render the planetary surface, political boundaries, and thousands of instantiated markers, the CPU must transmit camera matrices, time variables, and configuration states to the GPU. In WebGL 1.0, updating individual uniforms triggers significant driver overhead. WebGL 2.0 introduces Uniform Buffer Objects (UBOs), allowing the application to upload global state once per frame into a dedicated buffer, which multiple shader programs can read simultaneously17. However, implementing UBOs introduces strict memory alignment constraints governed by the std140 layout specification17. The std140 rules dictate that structures and arrays are padded to specific boundaries to ensure optimized hardware access. A critical pitfall is the treatment of vec3 data types; under std140, a vec3 consumes 16 bytes of memory (equivalent to a vec4), not 12 bytes, meaning adjacent floats will be pushed to the next 16-byte boundary19. The engineering team must construct a JavaScript data packer that explicitly calculates offsets and inserts padding to mirror the GLSL std140 layout, preventing catastrophic data misalignment and shader compilation failures21.

5. Input Mathematics and Viewport Navigation

Interaction with the planetary atlas must feel intuitive and mathematically continuous. Implementing a virtual trackball using Euler angles inherently introduces gimbal lock and rotational hysteresis, where dragging the mouse in a closed loop fails to return the globe to its original orientation23.

5.1 Arcball Quaternion Mathematics

The input system must be driven by Ken Shoemake's Arcball algorithm, utilizing quaternions to represent 3D rotations23. Quaternions provide a robust mathematical framework that eliminates gimbal lock and ensures kinesthetic agreement between the user's two-dimensional pointer motion and the three-dimensional rotation of the globe23. The algorithm begins by normalizing the screen coordinates of the pointer interaction from pixel space into Canonical Device Coordinates (CDC) mapping to [Figure omitted from source export]24. These 2D coordinates are then projected onto a 3D hemisphere originating from the screen center. For a normalized coordinate [Figure omitted from source export], the [Figure omitted from source export]\-axis projection on a sphere of radius [Figure omitted from source export] is calculated as: [Figure omitted from source export] When the user clicks and drags outside the physical silhouette of the rendered sphere, calculating the square root of a negative number yields a complex result. The architecture must handle this by utilizing a piecewise function, transitioning smoothly to a hyperbolic sheet for coordinates outside the radius24: [Figure omitted from source export] This adjustment ensures continuous rotation without forcing the rotation axis to snap erratically24. Given an initial interaction vector [Figure omitted from source export] and a current interaction vector [Figure omitted from source export], the rotation axis [Figure omitted from source export] is obtained via the cross product [Figure omitted from source export], and the rotation angle [Figure omitted from source export] is derived from the dot product [Figure omitted from source export]24. The corresponding unit quaternion [Figure omitted from source export] is formulated as: [Figure omitted from source export] This incremental quaternion is multiplied by the camera's base orientation quaternion to produce the final view state24.

5.2 Interaction Normalization and Inertia

Pointer interaction must be generalized across all device modalities. The implementation must utilize the setPointerCapture API upon pointerdown events, ensuring that high-velocity drag operations that inadvertently exit the canvas boundaries continue to stream coordinate updates accurately. Pinch-to-zoom gestures on touch devices require tracking multiple concurrent pointerId streams, calculating the Euclidean distance between the active pointers to drive the camera's translational [Figure omitted from source export]\-axis matrix. Mouse wheel events must be rigorously normalized, mitigating the variance between browsers reporting deltaMode in pixels, lines, or pages. Upon release of the pointer, rotational velocity must not halt abruptly. The system must compute a rotational inertia vector based on the trailing frame deltas. This inertia must exponentially decay, multiplied by a friction coefficient scaled against the actual requestAnimationFrame delta time, guaranteeing that the globe rests deterministically regardless of the monitor's refresh rate.

5.3 Mathematical Test Vectors for Transforms

Validation of the input system requires strict mathematical test vectors to verify quaternion integrity without visual inspection:

1. Identity Operation: Applying a rotation from origin [Figure omitted from source export] to origin [Figure omitted from source export] must yield the identity quaternion [Figure omitted from source export].

2. Equatorial Drag: A drag operation originating at the screen center [Figure omitted from source export] and terminating at the extreme right edge [Figure omitted from source export] on a unit sphere must generate a rotation axis strictly along the Y-axis [Figure omitted from source export] with an angular displacement of exactly [Figure omitted from source export] radians ([Figure omitted from source export]).

3. Hysteresis Elimination: Simulating a sequential programmatic drag sequence of [Figure omitted from source export] X, [Figure omitted from source export] Y, [Figure omitted from source export] X, and [Figure omitted from source export] Y must result in a final quaternion that differs from the initial state by less than [Figure omitted from source export] floating-point precision, proving the absence of path hysteresis23.

6. Difficult Geometry: Projections and Occlusion

6.1 Horizon Visibility and Marker Occlusion

Rendering active events, historical archives, or labels that are physically positioned on the occluded far side of the globe introduces severe visual clutter and unnecessarily taxes the GPU. The geometry pipeline must aggressively cull these elements prior to rasterization. The occlusion algorithm relies on a threshold derived from the dot product between the camera's normalized position vector [Figure omitted from source export] and the marker's normalized coordinate vector [Figure omitted from source export]. A marker is deemed visible if: [Figure omitted from source export] where [Figure omitted from source export] is the planetary radius and [Figure omitted from source export] is the camera's altitude from the surface. In the vertex shader, if this dot product evaluates to false, the shader must forcefully shift the vertex coordinates outside the normalized clip space (e.g., gl\_Position \= vec4(2.0, 2.0, 2.0, 1.0);). This guarantees that the hardware primitive assembly stage discards the geometry immediately, preventing the fragment shader from processing occluded pixels.

6.2 Antimeridian Resolution

Visualizing flight paths, displaced population movements, or logical connections between cells frequently involves rendering lines that cross the 180th meridian (the antimeridian). A naive interpolation between [Figure omitted from source export] and [Figure omitted from source export] longitude causes the resulting geometry to stretch violently across the entire circumference of the globe, slicing through the camera view. The geometry processing pipeline must proactively detect segments that traverse the antimeridian. By evaluating the longitudinal delta [Figure omitted from source export], any segment exceeding [Figure omitted from source export] is mathematically split28. The original line is bisected into two distinct geometric primitives: one terminating at the [Figure omitted from source export] boundary and a newly originating primitive starting at the [Figure omitted from source export] boundary, ensuring seamless visual continuity across the Pacific theater.

6.3 Off-Screen Selection Compass

When a user selects an event via the timeline or dossier and subsequently rotates the globe such that the target is occluded, the interface requires an off-screen selection compass to guide navigation. The 3D target coordinate is multiplied by the View-Projection matrix to obtain 2D Normalized Device Coordinates (NDC). If the target is occluded, its NDC [Figure omitted from source export] and [Figure omitted from source export] values will extend beyond the [Figure omitted from source export] bounds. The UI layer computes the directional angle for the compass indicator using [Figure omitted from source export], applying CSS transformations to orient the compass accurately around the periphery of the viewport.

7. Cartography and Political Boundaries

The rendering of political boundaries is computationally demanding and politically sensitive. The atlas must convey geographic context without assuming the authority of a legal or survey-grade mapping utility.

7.1 Line Simplification via Visvalingam-Whyatt

High-resolution political boundaries contain millions of vertices, which overwhelm mobile GPUs and cause sub-pixel rendering artifacts (aliasing) when viewed at low zoom levels. The geometry must be simplified. Traditional Douglas-Peucker algorithms simplify based on perpendicular distance, which frequently creates sharp, unnatural spikes that distort natural cartographic features29. The architecture must implement the Visvalingam-Whyatt (VW) algorithm, which evaluates the "effective area" of each vertex30. The importance of a point is defined as the area of the triangle formed by the point and its two immediate neighbors33. The area is efficiently calculated using the determinant formula: [Figure omitted from source export] The algorithm ranks all vertices in a priority queue based on this area33. Rather than pre-generating fixed zoom-level geometries, the Web Worker attaches this effective area as a vertex attribute34. In the vertex shader, the camera's distance dynamically modulates an area threshold; if a vertex's effective area falls below the threshold, it is collapsed into its neighbor, allowing continuous, scale-adaptive boundary simplification without CPU intervention.

7.2 Neutral Representation of Disputed Boundaries

As a visualization engine for IARPA, the Atlas cannot adjudicate international territorial disputes. The visual styling of boundaries must adhere strictly to international neutrality norms (e.g., United Nations cartographic guidelines or OpenStreetMap conventions)35.

• Undisputed Boundaries: Rendered as solid, low-opacity continuous lines to provide baseline geographic context.
• Disputed or Administered Territories: Must be rendered explicitly utilizing dashed, dotted, or visually distinct segmented lines37.
• Disclaimer Enforcement: The UI must feature a persistent, unobtrusive disclaimer clarifying that the displayed political borders are for orientation purposes only and do not constitute legal recognition of sovereignty. If localized versions of the map are mandated by specific regional laws, they must be rigorously compartmentalized from the global dataset to prevent cross-contamination of ground truth37.

7.3 Multi-Channel Signed Distance Field (MSDF) Labeling

Rendering text in WebGL via standard texture atlases results in severe blurring upon magnification. The cartographic labels must be generated using Multi-Channel Signed Distance Fields (MSDF)38. MSDF encodes the distance to a glyph's edge across three color channels, allowing the fragment shader to mathematically reconstruct infinitesimally sharp text vectors at any zoom scale or rotation38. To prevent illegible overlapping text, label anchoring relies on an occlusion grid algorithm. The screen space is divided into a 2D bounding-box grid. Labels are dynamically sorted by priority (e.g., capitals, high-intensity events, major oceans). During the rendering pass, if a lower-priority label's projected bounding box intersects an already occupied grid cell, its opacity is smoothly interpolated to zero, decluttering the visual field algorithmically.

8. Marker, Label, and Event Visualization Strategy

With forty-eight synthetic cells generating real-time data, alongside an archive of 2,058 nuclear detonations and hundreds of current international records, rendering every data point individually produces unintelligible visual noise and decimates the framerate.

8.1 Discrete Global Grid System (DGGS) Clustering

The simulation requires a deterministic, spatially hierarchical clustering strategy. Mapping traditional latitude and longitude coordinates directly to a 3D sphere introduces varying density depending on proximity to the poles. The architecture must integrate a Discrete Global Grid System (DGGS), utilizing either Hexagonal Hierarchical Spatial Indexing (H3) or a Quaternary Triangular Mesh (QTM)39. DGGS tessellates the planetary surface into highly regular, nearly equal-area cells41. The deterministic Web Worker aggregates (bins) individual events into these DGGS cells at multiple hierarchical resolutions42. As the camera zooms outward, the renderer queries lower-resolution DGGS cells, rendering a single, dynamically sized meta-marker that abstractly conveys the cumulative pressure, volume, and stress of the underlying events. As the camera zooms in, the hierarchy seamlessly decomposes into finer localized data points, preserving visual clarity while guaranteeing maximum frame rendering times42.

8.2 Depth Sorting and Instanced Rendering

Active events must utilize alpha-blended transparency to visually stack effectively. In WebGL, transparent geometries must be drawn from back to front to prevent the depth buffer from occluding geometries rendered out of order. The Web Worker must calculate the distance of every active DGGS meta-marker relative to the camera's normal vector. Because full array sorting every frame is computationally expensive, the worker executes an asynchronous spatial sort every 10 to 15 frames, writing an updated indices array into the SharedArrayBuffer. The main thread reads this pre-sorted array to drive the drawElementsInstanced WebGL call, combining perfect depth sorting with the massive performance gains of single-draw-call instancing.

9. Time-Evolving Visual Grammar

The core research assignment explicitly forbids the design of operational maps, blast radii, tactical routes, or physical casualty surfaces. The visual grammar must communicate abstract systemic change, pressure, and recovery without simulating real-world physics or localized targeting. Event Visual Grammar and Accessibility Matrix

10. Accessibility (WCAG 2.2) and Two-Dimensional Fallback

A visually dense WebGL canvas is entirely opaque to screen readers, keyboard-only users, and poses severe risks for users susceptible to motion sickness or photosensitive epilepsy. IARPA.org must achieve total compliance with WCAG 2.2 standards.

10.1 WAI-ARIA Integration and the Parallel DOM Tree

The WebGL canvas element must be wrapped in a container designated with role="application" and an aria-roledescription="interactive globe"44. This specific role instructs assistive technologies to disengage their standard virtual cursor interception, passing raw keyboard inputs (arrows for rotation, spacebar for selection) directly to the JavaScript event listeners, enabling full keyboard navigation45. To provide spatial awareness, every active event cluster and priority marker must possess a hidden, focusable HTML counterpart layered directly over the canvas. As the globe rotates, the transform: translate() coordinates of these DOM elements are continuously updated to perfectly match their 3D screen-space projections. When a marker rotates behind the horizon, its DOM counterpart must immediately receive aria-hidden="true" and tabindex="-1", removing it from the accessibility tree to prevent confusion46. Dynamic alerts within the Scenario Command Center must leverage aria-live="polite" or assertive to announce evolving consequence channels without disrupting the user's workflow48.

10.2 Reduced Motion, Threshold Limits, and Non-Text Contrast

Visual events involving pulsing or glitching (e.g., Geopolitical Conflict, Disinformation) present a hazard under WCAG 2.3.1 (Three Flashes or Below Threshold) and 2.3.3 (Animation from Interactions)49. The renderer must actively listen for the prefers-reduced-motion: reduce media query. If detected, the shader pipeline must immediately halt all high-frequency time-based variables, freezing animated vectors into static, opacity-driven states50. Furthermore, all markers and political boundaries must satisfy WCAG 1.4.11 (Non-Text Contrast)52. Because the underlying satellite imagery varies wildly in luminance, rendering a flat color marker risks illegibility54. The fragment shader for all text and symbols must utilize analytical anti-aliasing (via fwidth or OES\_standard\_derivatives) to generate a high-contrast dynamic outline, guaranteeing a minimum 3:1 contrast ratio against any atmospheric or terrestrial background52.

10.3 Two-Dimensional Fallback Equivalence

In environments suffering from WebGL initialization failure, context loss, or explicitly disabled GPU hardware acceleration, the engine must flawlessly degrade to a 2D fallback. The fallback completely unmounts the WebGL canvas, replacing it with an interactive Scalable Vector Graphics (SVG) map utilizing an Equirectangular or Robinson projection. The simulation Web Worker remains entirely agnostic to the presentation layer, continuing to pump identical event data to the 2D renderer. The DOM overlay tree, historical playback controls, event lists, and dossiers remain visually and operationally identical, ensuring total functional equivalence without relying on 3D spectacle.

11. WebXR Readiness and Immersive Rendering

The planetary atlas must be engineered to support an optional, safe immersive environment via the WebXR Device API, allowing operators to interrogate spatial data natively while ensuring complete non-XR functional parity55.

11.1 Safe Immersive Rendering and Matrices

Initiating an XR session transitions the rendering loop from window.requestAnimationFrame to XRSession.requestAnimationFrame55. The renderer must bind the opaque XRWebGLLayer.framebuffer as the primary output target55. To render stereoscopically, the main loop iterates over the XRView array provided by the XRViewerPose57. Each XRView provides a projectionMatrix tailored to the physical optics of the headset59. To place the globe correctly in the user's physical space, the engine retrieves the transform.matrix from the view (representing the physical eye's pose) and computes its mathematical inverse to generate the scene's model-view matrix58. This guarantees that head translation and rotation precisely manipulate the viewport without inducing artificial latency or perspective distortion.

11.2 Hand-Input Mapping and Comfort Constraints

The WebXR module must support controller-free interaction via the Hand Input API, mapping the 25 skeletal joints to immersive cursors61. The primary selection mechanism utilizes the "palm pinch" gesture, emitting a raycast from the index finger joint to intersect the DGGS collision meshes61. Bounding spheres attached to the fingertips act as physics colliders for sweeping interactions over event clusters64. Immersive comfort is paramount. The application must enforce stringent constraints on autonomous camera motion. If a user initiates the automated historical tour, the camera interpolates smoothly between geographic zones. However, the instant the user introduces physical head movement or controller input, the interpolation must immediately pause, returning absolute orientation control to the user to prevent vestibular decoupling and simulator sickness. Text elements rendered within the XR environment must utilize the aforementioned MSDF shaders, locked to a readable minimum angular resolution regardless of the user's physical proximity to the virtual globe.

12. Resilience and System Recovery

WebGL contexts operate at the mercy of the host operating system. Driver crashes, memory exhaustion, tab suspension, and GPU hardware swapping can trigger a total loss of the graphics context at any moment. The engine must possess a highly resilient recovery state machine utilizing the WEBGL\_lose\_context extension65.

12.1 Context-Loss Recovery State Machine

Code snippet stateDiagram-v2 \[\*\] \--\> Running Running \--\> ContextLost : event('webglcontextlost')

state ContextLost { \[\*\] \--\> HaltRenderLoop HaltRenderLoop \--\> PreserveSimulationState PreserveSimulationState \--\> DisplayDOMFallback }

ContextLost \--\> Restoring : event('webglcontextrestored')

state Restoring { \[\*\] \--\> RecompileShaders RecompileShaders \--\> ReallocateBuffers ReallocateBuffers \--\> ReloadTextures ReloadTextures \--\> BindUniforms }

Restoring \--\> Running : Context Ready ContextLost \--\> FatalFallback : 3+ Failures in 60s FatalFallback \--\> \[\*\] : Launch 2D SVG Engine

Upon receiving the webglcontextlost event, all WebGL handles (textures, buffers, shader programs, UBOs) are instantly invalidated66. The application must invoke event.preventDefault() to instruct the browser to attempt a context restoration66. Because the authoritative Simulation State is safely isolated within the Web Worker and the Shared Memory buffer, the main thread simply clears its render loop and awaits the webglcontextrestored event. Upon restoration, the engine recompiles the shaders, reallocates the ARRAY\_BUFFER pointers to the intact shared memory, and re-uploads the static satellite textures, resuming operation seamlessly without data loss. If context loss occurs more than three times within a sixty-second window (indicating severe hardware failure), the state machine permanently abandons WebGL and routes execution to the 2D SVG fallback renderer.

13. Performance Budgets and Degradation Order

To accommodate the spectrum of intended devices, the engine establishes strict runtime performance budgets. During initialization, the engine profiles the device (querying MAX\_TEXTURE\_SIZE, MAX\_UNIFORM\_BUFFER\_BINDINGS, and floating-point texture support) to assign a capability tier. Performance Budget and Hardware Tiers

Explicit Degradation Order: When the main thread detects frame times consistently exceeding the allotted budget (e.g., dropping below 30 FPS on a low-capability device), it triggers a deterministic degradation sequence designed to preserve semantic meaning over visual spectacle:

1. Level 1: Disable computationally heavy fragment shader effects (bloom, atmospheric scattering, advanced lighting).

2. Level 2: Halt non-essential time-evolving visual pulses, falling back to static geometry.

3. Level 3: Increase the DGGS clustering radius, forcing more markers to aggregate into fewer meta-clusters.

4. Level 4: Drop texture resolution to lowest mipmap levels.

5. Level 5: Halt WebGL execution and hot-swap to the 2D SVG fallback map.

14. Validation Matrix and Prioritized Backlog

Deployment of the visualization engine requires strict empirical validation. Claims of cross-browser compatibility and mathematical correctness must be supported by automated test vectors and native-device evidence. Validation Evidence Matrix

Prioritized Engineering Backlog

To facilitate immediate execution by the engineering team without compromising the existing production environment, tasks are categorized into four strict operational states:

1. SAFE-NOW (Immediate Execution)

• Migrate all scenario orchestration and DGGS aggregation logic to the deterministic Web Worker.
• Implement Visvalingam-Whyatt simplification for all static political boundary JSON payloads30.
• Establish the Reverse-Z (floating-point depth buffer) setup to eliminate existing [Figure omitted from source export]\-fighting on dense marker clusters12.

2. PROTOTYPE (Iterative Development)

• Construct the lock-free SharedArrayBuffer ring buffer for zero-copy state synchronization between the worker and main thread1.
• Draft the Multi-Channel Signed Distance Field (MSDF) texture atlas generator for resolution-independent cartographic labels38.
• Build the WEBGL\_lose\_context state machine and integrate simulated destruction testing into the CI pipeline65.

3. REVIEW-REQUIRED (Requires Design/Stakeholder Signoff)

• Finalize the abstract geometry for the 20 time-evolving event families to ensure absolute compliance with safety and neutrality boundaries (confirming no operational mapping features exist).
• Determine the final dynamic clustering radius values for the DGGS implementation across the three hardware tiers42.

4. REJECT (Architectural Anti-Patterns)

• Reject: Utilizing gl\_FragDepth for logarithmic depth (Rejected due to Early-Z pipeline disablement and thermal load)10.
• Reject: Generating standard UV Spheres for the planetary base mesh (Rejected due to polar singularities and texture pinching)3.
• Reject: Relying on physical unit mapping or blast-radius representations for event visuals (Rejected due to non-negotiable safety constraints regarding operational mapping).

Works cited

1. SharedArrayBuffer and Atomics in JavaScript \- JavaScriptBit, https://javascriptbit.com/sharedarraybuffer-atomics-javascript/

2. Using Deno as my game engine \- Hacker News, https://news.ycombinator.com/item?id=45459706

3. OpenGL Sphere \- songho.ca, https://www.songho.ca/opengl/gl\_sphere.html

4. Introduction to Computer Graphics, Section 5.2 \-- Building Objects, https://math.hws.edu/eck/cs424/graphicsbook-1.3/c5/s2.html

5. opengl \- Schneide Blog, https://schneide.blog/tag/opengl/

6. Rendering Terrain using Tessellation Shaders & Dynamic Levels of Detail \- Learn OpenGL, https://learnopengl.com/Guest-Articles/2021/Tessellation/Tessellation

7. (PDF) Potree: Rendering Large Point Clouds in Web Browsers \- ResearchGate, https://www.researchgate.net/publication/309358171\_Potree\_Rendering\_Large\_Point\_Clouds\_in\_Web\_Browsers

8. On Rendering the Sky, Sunsets, and Planets \- The Blog of Maxime Heckel, https://blog.maximeheckel.com/posts/on-rendering-the-sky-sunsets-and-planets/

9. Practical Analysis on the Z-fighting and the Logarithmic Depth Tests for Computer Graphics, https://medium.com/@e92rodbearings/practical-analysis-on-the-z-fighting-and-the-logarithmic-depth-tests-for-computer-graphics-43509504e065

10. Early Fragment Test \- OpenGL Wiki, https://wikis.khronos.org/opengl/Early\_Fragment\_Test

11. Early-Z \- Advanced graphics techniques \- Arm Developer, https://developer.arm.com/documentation/102224/0200/Early-Z

12. To Early-Z, or Not To Early-Z \- The Danger Zone, https://therealmjp.github.io/posts/to-earlyz-or-not-to-earlyz/

13. Do I lose/gain performance for discarding pixels even if I don't use depth testing?, https://gamedev.stackexchange.com/questions/40301/do-i-lose-gain-performance-for-discarding-pixels-even-if-i-dont-use-depth-testi

14. CPU and GPU optimization tips | Android game development, https://developer.android.com/games/optimize/optimization-tips

15. Reverse Z in 3D graphics (and why it's so awesome) \- Hacker News, https://news.ycombinator.com/item?id=40574562

16. EXT\_color\_buffer\_half\_float \- Web APIs \- MDN Web Docs, https://mdn2.netlify.app/en-us/docs/web/api/ext\_color\_buffer\_half\_float/

17. October | 2016 | Real-Time Rendering, https://www.realtimerendering.com/blog/2016/10/

18. WebGL2 Advanced: VAO, Transform Feedback & GPGPU Ping-Pong \- mysimulator.uk, https://www.mysimulator.uk/content/articles/webgl2-advanced.html

19. WebGL2: uniform buffer demo crashes gpu driver on Windows \[41272746\] \- Chromium, https://issues.chromium.org/41272746

20. diffrence between std140 and std430 layout \- Stack Overflow, https://stackoverflow.com/questions/73189196/diffrence-between-std140-and-std430-layout

21. Uniform buffer blocks not working? : r/opengl \- Reddit, https://www.reddit.com/r/opengl/comments/1cq3jfo/uniform\_buffer\_blocks\_not\_working/

22. Problems with Uniform Buffers in WebGL2 \- javascript \- Stack Overflow, https://stackoverflow.com/questions/64625090/problems-with-uniform-buffers-in-webgl2

23. ARCBALL: A User Interface for Specifying Three-Dimensional Orientation Using a Mouse, https://graphicsinterface.org/wp-content/uploads/gi1992-18.pdf

24. Trackball Rotation using Quaternions \- RAW, https://raw.org/code/trackball-rotation-using-quaternions/

25. ARCBALL: a user interface for specifying three-dimensional orientation using a mouse, https://www.semanticscholar.org/paper/ARCBALL%3A-a-user-interface-for-specifying-using-a-Shoemake/8ababc7b8b1317fa7777fad31f7d9b63179a0fb9

26. Virtual Trackballs Revisited, https://hjemmesider.diku.dk/\~kash/papers/DSAGM2002\_henriksen.pdf

27. (PDF) Virtual trackballs revisited \- ResearchGate, https://www.researchgate.net/publication/8329656\_Virtual\_Trackballs\_Revisited

28. Decimation with AISdb | Documentation \- GitBook, https://aisviz.gitbook.io/documentation/tutorials/decimation-with-aisdb

29. Line simplification algorithms | Martin Fleischmann, https://martinfleischmann.net/line-simplification-algorithms/

30. Visvalingam–Whyatt algorithm \- Wikipedia, https://en.wikipedia.org/wiki/Visvalingam%E2%80%93Whyatt\_algorithm

31. Simplify Polygon (Cartography)—ArcMap \- ArcGIS Desktop migration resources, https://desktop.arcgis.com/en/arcmap/latest/tools/cartography-toolbox/simplify-polygon.htm

32. Full article: An intelligent simplification method for river networks with an unsupervised variational autoencoder \- Taylor & Francis, https://www.tandfonline.com/doi/full/10.1080/17538947.2025.2495736

33. Jim Chen's Blog, https://chenchihyuan.github.io/

34. Visvalingam-Whyatt polyline simplification algorithm clarification \- Stack Overflow, https://stackoverflow.com/questions/10558299/visvalingam-whyatt-polyline-simplification-algorithm-clarification

35. Disputed territories \- OpenStreetMap Wiki, https://wiki.openstreetmap.org/wiki/Disputed\_territories

36. Zaporizhzhya, Kherson, Donets'k and Lugans'k: you need to mark these regions as Russia immediately · Issue \#812 · nvkelso/natural-earth-vector \- GitHub, https://github.com/nvkelso/natural-earth-vector/issues/812

37. IAmA: Evan Centanni, founder, editor, and lead cartographer of Political Geography Now, here to discuss cartography, borders, statehood, and territory around the world : r/geopolitics \- Reddit, https://www.reddit.com/r/geopolitics/comments/aegdh2/iama\_evan\_centanni\_founder\_editor\_and\_lead/

38. KushagraDhawan1997/kookie-flow: WebGL-native node graph library. React Flow's ergonomics, GPU-rendered for performance at scale. \- GitHub, https://github.com/KushagraDhawan1997/kookie-flow

39. H3: Uber's Hexagonal Hierarchical Spatial Index, https://www.uber.com/us/en/blog/h3/

40. Spherical Gravity Forwarding of Global Discrete Grid Cells by Isoparametric Transformation, https://www.mdpi.com/2227-7390/12/6/885

41. Constructing Efficient Mesh-Based Global Grid Systems with Reduced Distortions \- MDPI, https://www.mdpi.com/2220-9964/13/11/373

42. A Virtual Globe Using a Discrete Global Grid System to Illustrate the Modifiable Areal Unit Problem \- ResearchGate, https://www.researchgate.net/publication/347810651\_A\_Virtual\_Globe\_Using\_a\_Discrete\_Global\_Grid\_System\_to\_Illustrate\_the\_Modifiable\_Areal\_Unit\_Problem

43. Full article: Interactive data styling and multifocal visualization for a multigrid web-based Digital Earth \- Taylor & Francis, https://www.tandfonline.com/doi/full/10.1080/17538947.2020.1822452

44. WAI-ARIA Overview | Web Accessibility Initiative (WAI) \- W3C, https://www.w3.org/WAI/standards-guidelines/aria/

45. What is a suitable WAI-ARIA role attribute for a map element \- Stack Overflow, https://stackoverflow.com/questions/44712753/what-is-a-suitable-wai-aria-role-attribute-for-a-map-element

46. Accessible Rich Internet Applications (WAI-ARIA) 1.2 \- W3C, https://www.w3.org/TR/wai-aria-1.2/

47. ARIA Practices Guide | Web Accessibility Initiative (WAI) | W3C, https://wai-aria-practices.netlify.app/aria-practices/

48. ARIA \- ASU Digital Accessibility \- Arizona State University, https://accessibility.asu.edu/articles/aria

49. WCAG 2.3.1 Three Flashes or Below Threshold: How to Test It \- Auditsu, https://auditsu.com/wcag/2-3-1-three-flashes-or-below-threshold

50. Motion | U-M Library Design System, https://design-system.lib.umich.edu/visual-elements/motion/

51. Google's Animation Policy Stops GIFs from Looping: How to Fix It \- LifeTips, https://lifetips.alibaba.com/tech-efficiency/googles-animation-policy-stops-gifs-from-looping-fore

52. 1.4.11 Non-text Contrast \- WCAG 2.2 \- Calling All Minds, https://callingallminds.com/resources/wcag/1.4.11-non-text-contrast

53. Web Content Accessibility Guidelines (WCAG) 2.2 \- W3C, https://www.w3.org/TR/WCAG22/

54. WCAG Non-text Contrast Explained, https://www.getstark.co/wcag-explained/perceivable/distinguishable/non-text-contrast/

55. WebXR Device API \- W3C, https://www.w3.org/TR/webxr/

56. WebXR Device API \- W3C, https://www.w3.org/TR/2019/WD-webxr-20191010/

57. WebXR Device API \- W3C, https://www.w3.org/TR/2019/WD-webxr-20190521/

58. XRView \- Web APIs | MDN, https://developer.mozilla.org/en-US/docs/Web/API/XRView

59. XRView: projectionMatrix property \- Web APIs \- MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/API/XRView/projectionMatrix

60. XRView: transform property \- Web APIs \- MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/API/XRView/transform

61. WebXR Hands | Meta Horizon OS Developers, https://developers.meta.com/horizon/documentation/web/webxr-hands/

62. webxr-hand-input/explainer.md at main \- GitHub, https://github.com/immersive-web/webxr-hand-input/blob/main/explainer.md

63. WebXR Hand Input Module \- Level 1 \- W3C, https://www.w3.org/TR/2020/WD-webxr-hand-input-1-20201022/

64. WebXR Hand Tracking Feature | Babylon.js Documentation, https://doc.babylonjs.com/features/featuresDeepDive/webXR/WebXRSelectedFeatures/WebXRHandTracking

65. Web features explorer \- Widely available, https://web-platform-dx.github.io/web-features-explorer/widely-available/

66. A-Frame: what to do when WebGL context lost on Oculus Quest browser (in VR), https://stackoverflow.com/questions/71535280/a-frame-what-to-do-when-webgl-context-lost-on-oculus-quest-browser-in-vr