Runtime
Product and Interaction Specification: KillChains.com Immersive First-Session Architecture
Report summary
The redesign of the KillChains.com first-session experience establishes a rigorous benchmark for spatial educational interfaces, transforming the abstract concepts of threat modeling, military decision-making, and algorithmic vulnerabilities into tangible, interactive spatial architectures. Artifici
Key topics
- Runtime
- AI
- .NET
- Angular
- Privacy
- Semantic Systems
- Research Archive
- Strategy
Research provenance
For citation, use the report title and canonical URL. Archival presence does not establish authorship or promote report statements into portfolio evidence.
This page renders the archived Markdown as safe, formatted HTML. It is background research and does not become a portfolio claim without evidence review.
Full report
On this page
Executive Concept
The redesign of the KillChains.com first-session experience establishes a rigorous benchmark for spatial educational interfaces, transforming the abstract concepts of threat modeling, military decision-making, and algorithmic vulnerabilities into tangible, interactive spatial architectures. Artificial intelligence systems increasingly operate in decision-critical environments where probabilistic outputs and Human-in-the-Loop (HITL) interactions fundamentally reshape user engagement1. Operating under stringent non-operational and ethical constraints, this simulation illustrates the structural anatomy of kill chains—spanning military, traditional cyber, and AI-specific models—without resorting to simulated violence, fearmongering, or the disclosure of functional exploit methodologies. The primary objective is to immerse the visitor in a sociotechnical decision environment where they must confront the cognitive load of rapid analysis, the necessity of meaningful human control, and the inherent risks of automation bias. The architecture leverages WebGPU with a WebGL 2.0 fallback, utilizing the Three.js library to deliver a responsive, 60+ frames-per-second (FPS) experience across desktop, mobile, and WebXR-capable devices2. To ensure accessibility and universal engagement, the platform employs progressive enhancement, initializing with a lightweight HTML/CSS Document Object Model (DOM) overlay that seamlessly transitions into a fully realized three-dimensional scene4. The resulting experience guarantees immediate comprehension within the first ten seconds, fosters a meaningful interaction within twenty seconds, demonstrates the consequences of action within forty-five seconds, and culminates in a three-minute synthetic challenge that empowers the user to successfully interrupt a modeled attack chain.
First-Session Journey Map and Emotional Pacing
The emotional arc of the first-session experience is meticulously calibrated to guide the user from initial curiosity to a state of profound conceptual understanding. Traditional user experience frameworks, designed for deterministic systems, fail to capture the evolving sociotechnical dynamics of AI-enabled systems1. Therefore, the journey eschews shock value, simulated suffering, or political advocacy, focusing instead on agency, consequence, and trust calibration6. The pacing unfolds across seven distinct emotional phases:
1. Accelerate (0:00 \- 0:10): The experience begins rapidly. The immediate rendering of the chain and the early presentation of the first interaction establish a brisk, engaging tempo, signaling that the user's agency is required immediately rather than casting them as a passive observer.
2. Pause (0:10 \- 0:20): Upon the first interaction prompt, time effectively dilates. The system halts, awaiting human input, communicating the weight of the impending decision.
3. Create Uncertainty (0:45 \- 1:00): As the simulation progresses, an AI confidence score is presented in direct opposition to raw sensor telemetry. The audio transitions to a tense, ambiguous drone. The user experiences cognitive dissonance, mirroring the real-world pressure of deciding whether to trust an automated recommendation6.
4. Reward Inspection (1:00 \- 1:15): Users who reject the heuristic shortcut of the AI confidence score and inspect the underlying data are rewarded with the revelation of the anomaly, reinforcing vigilant information seeking over automation bias7.
5. Reveal Hidden Dependencies (1:15 \- 1:30): The simulation visualizes how an error in a preceding node cascades into subsequent stages, illustrating the interconnected nature of the kill chain methodology9.
6. Let the User Recover (1:30 \- 2:15): The rewind mechanic provides immense relief. If an incorrect decision leads to a compromised state, the user is permitted to recover, reinforcing that human oversight can correct systemic trajectories before they culminate in irreversible impact.
7. Deliver Conceptual Insight (2:15 \- 3:00): The final debrief presents the core educational insight in a calm, highly readable spatial layout. The emotional state transitions from adrenaline to reflection, maximizing the retention of the sociotechnical lesson.
Three Semantic Presentation Modes
To accommodate varying levels of user expertise while maintaining a single cohesive codebase, the Three.js scene architecture relies on semantic event triggers that adapt their presentation based on the active mode. The same underlying state machine drives all three modes, preventing the creation of three unrelated, siloed experiences. Guided Mode: Intended for first-time visitors, this mode utilizes high levels of instructional scaffolding to prevent cognitive overload11. Camera movements are entirely automated. Voiceover narration accompanies text prompts, and evidence objects not relevant to the immediate decision are dimmed. Choices are limited to binary safe/unsafe decisions, ensuring the user grasps the fundamental concept of breaking a kill chain without being overwhelmed by data density. Challenge Mode: Designed for returning users seeking to test their comprehension, this mode strips away the narration and dimming effects. It introduces strict time-pressure mechanics; payloads move faster, and decisions must be made within a shrinking time window. The AI confidence scores fluctuate, injecting deliberate uncertainty that requires the user to cross-reference multiple data points before acting8. Branching outcomes allow the user to fail the scenario, requiring them to utilize the rewind mechanic to discover the correct intervention point. Analysis Mode: Engineered for researchers, educators, and advanced users, Analysis Mode grants full manual control over the simulation timeline. Users can scrub forward and backward through the scenario, pausing at any microsecond to inspect the state of the nodes. This mode heavily emphasizes the separation of objective reality from observable telemetry, allowing the user to view the provenance of data sources and compare the consequences of different decision branches side-by-side in a split-spatial view3.
Second-by-Second Opening Sequence
The opening sequence is engineered to instantly communicate that a sequential chain of dependencies is forming, that data is flowing between connected nodes, and that human intervention can alter the deterministic outcome of the system. 0:00 – 0:02: The experience begins before the Three.js rendering context is fully initialized. A localized, progressively enhanced 2D HTML/CSS DOM overlay presents a high-contrast, cinematic title treatment against a deep, pure black background. As the underlying JavaScript bundles and highly compressed Draco-encoded geometry assets load asynchronously via Web Workers13, the DOM text softly blurs, dissolving seamlessly into a Signed Distance Field (SDF) text rendering within the Three.js canvas15. This transition completely obscures loading latency. 0:02 – 0:05: The camera executes a slow, deliberate dolly-in movement through a volumetric void. Subtle particulate matter suspended in the virtual space begins to align along an invisible spline, coalescing into the first three nodes of an attack chain against an AI system: Recon, Poison, and Hijack10. 0:05 – 0:08: Spatial audio cues—rendered via the Web Audio API's PannerNode using Head-Related Transfer Functions (HRTF) for binaural depth—emit low-frequency, rhythmic pulses originating from the first node18. A visual luminescent payload, representing data flow, travels along the spline connecting the nodes. 0:08 – 0:10: The payload reaches the third node, causing it to pulsate with an amber warning state. The camera halts its forward movement, locking the node in the center of the user's viewport (desktop) or at a comfortable conversational distance of roughly 1.5 meters (WebXR) to mitigate vergence-accommodation conflict20. An SDF-rendered text prompt orbits the active node: "Signal Detected: Inspect Data or Allow Transition." The user is immediately presented with a decision, proving that this is a participatory simulation.
The First Meaningful Interaction
To accommodate the diverse hardware capabilities of the target audience, the first meaningful interaction is designed with strict input parity across modalities. On desktop devices, the user interacts via standard mouse hover and click or keyboard Tab-focus and Enter. On mobile touchscreens, a direct tap triggers the interaction. For WebXR users, 6-Degree-of-Freedom (6DoF) controllers emit a raycast for selection, while supported headsets additionally allow hand-tracking pinch gestures22. To ensure accessibility, the WebXR DOM Overlay API guarantees that screen readers can traverse the 3D nodes as if they were standard HTML buttons, allowing visually impaired users to interact via keyboard or voice commands5. When the user selects the "Inspect Data" prompt, the node physically expands, unfolding into a spatial data card. This non-operational interaction reveals a synthetic confidence score generated by a simulated AI monitor. The interface explicitly challenges the user's reliance on automated systems, requiring them to verify the signal rather than passively accepting the transition25. The system provides four distinct feedback states based on the user's action:
1. Correct Decision: If the user correctly identifies a logical anomaly in the synthetic data and activates the "Contain" defensive control, the node emits a resonant, harmonious major chord. The connecting spline shatters, visually arresting the payload. Text feedback appears: Chain Interrupted. Integrity Preserved.
2. Partially Correct Decision: If the user flags the node for review but fails to enact a hard containment protocol, the payload slows but continues to bleed into the next node. The audio tone wavers, and text reads: Signal Flagged. Payload Leaking.
3. Late Decision: If the user partially engages but takes too long to finalize the decision, the payload transitions to the next node. The system triggers a dull, descending audio tone and a visual warning: Late Intervention. Chain Progressing.
4. Ineffective Decision: If the user permits the payload to pass despite the obvious anomaly, the node flashes with a high-frequency strobe, the payload accelerates, and the text reads: Ineffective. Vulnerability Exploited.
This interaction entirely avoids asking the visitor to design an attack, select a real-world target, or input functional exploit parameters, thereby maintaining strict educational boundaries.
Complete Three-Minute "Break the Chain" Challenge
The core retention mechanic is a three-minute synthetic scenario designed to test the user's comprehension of the AI attack chain model10. The scenario utilizes a fictionalized municipal water quality monitoring network that employs AI for predictive chemical balancing, ensuring the context remains sanitized and devoid of real-world casualties or military operations. 0:00 – 0:15 (The Briefing): The camera frames a sleek, abstracted geographic grid. A narrative text overlay, supported by optional text-to-speech audio, establishes the stakes: The user is a civilian oversight analyst monitoring an automated water treatment AI. Their goal is to maintain human control and preserve data integrity against an emerging anomaly. The system explicitly frames the user's role as the Human-in-the-Loop1. 0:15 – 0:45 (Chain Formation and Evidence): The Recon node illuminates, passing benign traffic. Suddenly, the Poison node activates. The user is prompted to inspect three floating evidence objects:
1. A sudden, mathematically perfect spike in synthetic pH sensor readings.
2. A normal, uncorrupted maintenance log showing no physical tampering.
3. An AI confidence score declaring 99% certainty that the pH spike requires an automated chemical counter-release.
The high confidence score serves as a misleading but non-deceptive signal designed to test automation bias. Empirical studies indicate that users frequently defer to high AI confidence scores without verifying the underlying contextual data, assuming the machine possesses superior analytical capabilities6. 0:45 – 1:30 (First Decision and Consequence): The user must decide whether to authorize the chemical release or hold the action for manual review. If the user defers to the machine (falling victim to automation bias), the Hijack and Persist nodes rapidly illuminate28. A consequence animation plays: the network grid turns a stark monochrome, and digital static corrupts the user interface, communicating a loss of systemic integrity without depicting physical destruction or human suffering. 1:30 – 2:15 (Rewind and Second Decision): The simulation pauses, and a spatial "Rewind" mechanic physically pulls the payload backward along the spline to the moment before authorization. The user is granted a second chance. This time, analyzing the spatial relationship of the sensor data reveals that only one isolated sensor reported the pH spike, indicating localized data poisoning rather than a systemic chemical imbalance10. The user selects "Require Human-in-the-Loop Verification." 2:15 – 3:00 (Interruption and Debrief): A physical authorization gate slams shut on the spline before the Impact node. The AI's automated action is rejected. The visual grammar shifts to a serene, contained state characterized by slow, fluid particle orbits and a resolving, ambient soundscape. A spatial debrief panel appears, detailing how the attack was structured, the specific danger of data poisoning in machine learning models, and the critical necessity of maintaining human oversight in decision-critical environments29.
Desktop, Mobile, and WebXR Interaction Differences
The platform relies on a responsive spatial design paradigm that adapts its input heuristics based on the detected hardware environment, ensuring that the cognitive load of navigation does not overshadow the educational content11. Desktop Interaction: Users navigate the 3D space using standardized mouse and keyboard inputs. Hover states drive the primary discovery mechanism, expanding nodes slightly when the cursor intersects their bounding volume. Click events trigger transitions. To support keyboard-only navigation, the WebXR DOM Overlay API maps the 3D spatial coordinates of each node to invisible, focusable HTML elements, allowing users to tab through the kill chain sequentially5. Mobile Interaction: On touchscreens, hover states are disabled. Instead, the interface relies on direct manipulation. Nodes are scaled up to ensure they meet minimum touch-target sizing requirements (44x44 CSS pixels equivalent in screen-space). Pinch-to-zoom gestures allow users to inspect the spatial relationships between nodes, while swipe gestures rotate the camera around a central pivot point. WebXR Interaction: Inside a virtual or augmented reality headset, the interface transitions to a fully immersive 6DoF environment. Users interact primarily through controller raycasting, where a visible laser emanates from the hand controller, highlighting nodes upon intersection. When supported by the hardware (e.g., Apple Vision Pro, Meta Quest 3), the system utilizes direct hand tracking23. Users can physically reach out and pinch to select evidence objects. To mitigate the vergence-accommodation conflict—a common cause of eye strain in headsets—all critical text and interaction nodes are constrained to an optimal focal depth of 1.2 to 2.0 meters from the user's origin20.
Visual and Audio Language
To ensure accessibility for color-blind users and to elevate the aesthetic maturity of the platform, the visual grammar avoids relying exclusively on red and green color coding. Instead, it utilizes a rich vocabulary of shape, animation, line style, and spatial audio to convey systemic states33.
Visual Grammar
- Trusted Information: Displayed within smooth, circular nodes characterized by slow, continuous rotation. Connecting splines are thick and solid.
- Unverified Information: Encapsulated in hexagonal nodes with dashed, marching-ant connecting lines, signifying data in transit that lacks cryptographic or human verification.
- Conflicting Information: Represented by nodes that visually bifurcate or rapidly oscillate between two distinct geometric states, indicating a mismatch between sensor data and AI inference.
- Machine Inference: Displayed with sharp, angular, crystalline structures to distinguish algorithmic processing from raw data.
- Human Authorization: Denoted by a concentric ring that physically locks into place around a node, emphasizing the insertion of a human operator into the chain.
- Automated Action: Characterized by rapid, linear particle streams moving unidirectionally along a spline without pausing at intermediate gates.
- Compromised State: The node geometry physically deforms and fractures. Lighting shifts to stark, high-contrast, directional rim lighting that casts long, dramatic shadows across the spatial grid.
- Contained State: Nodes return to their default geometry but are enveloped in a translucent, pulsing spherical shield.
- Unknown or Insufficient Evidence: Displayed as wireframe, semi-transparent objects that require user interaction to materialize fully.
- Successfully Interrupted Chain: The connecting spline between two nodes is physically severed, and the traveling payload particles dissipate safely into the surrounding void.
Audio Language
The soundscape relies on the Web Audio API's spatialization capabilities to ground the user in the environment. Using HRTF convolutions, sounds are accurately positioned in 3D space, allowing users to audibly locate anomalies before they appear in the viewport18. Trusted nodes emit soft, low-frequency hums, while unverified or conflicting data triggers subtle, erratic granular synthesis textures. Human authorizations are accompanied by distinct, mechanical "click" audio cues, contrasting with the high-frequency, synthetic sine waves of machine inferences.
Human-Control Visualization
As AI-enabled systems increasingly automate complex tasks, illustrating the nuances of human oversight is a critical educational objective. This visualization directly mirrors established governance frameworks, such as DoD Directive 3000.09 and ISO/IEC 42001, translating abstract policy into immediate visual comprehension29. The spatial interface visualizes these control paradigms through concentric orbital rings around a given decision node.
- Human-in-the-loop (HITL): The system mandates explicit human approval before proceeding. Visually, the node's payload is held in a stasis field. An unbroken, solid orbital ring surrounds the node, acting as a physical barrier. The payload cannot breach the ring until the user actively interacts with the authorization prompt27.
- Human-on-the-loop (HOTL): The system operates autonomously but permits human intervention to veto or abort an action. Visually, the payload moves continuously through the node, but the node is surrounded by a dashed orbital ring. The user must actively click the ring to trigger a "stop" command before the payload exits the node's radius.
- Human-out-of-the-loop (HOOTL): The system operates entirely autonomously after initial activation. The node lacks any orbital ring, and the payload moves through it at accelerated speeds, indicating that no immediate human override is architecturally present.
- AI Assistance (No Engagement Authority): The AI acts purely in an advisory capacity. Visually, the AI system is represented as a secondary, smaller node tethered to the main human decision node. It feeds confidence scores and data visualizations to the human node but possesses no direct spline connection to the subsequent action node.
- Publicly Unspecified Control: For theoretical or poorly documented systems, the control mechanism is represented by an obfuscated, blurred orbital cloud, signifying that the extent of human oversight is mathematically or publicly unknown.
Crucially, the visualization is explicitly designed to avoid implying that all AI-enabled systems are autonomous weapons, ensuring the framework applies equally to cyber defense, municipal management, and military targeting36.
Microinteraction Inventory
The platform relies on twenty purposeful microinteractions, engineered to provide immediate tactile, visual, and auditory feedback across all device types, facilitating a continuous dialogue between the user and the system.
| Interaction | Trigger | Animation / Visuals | Audio / Haptics | Duration | Purpose / Accessible Alternative |
|---|---|---|---|---|---|
| Hover / Focus | Mouse hover, Tab key, XR raycast | Node scales up 110%, glows softly. | Subtle 400Hz pure tone. XR controller rumble (10ms). | 150ms | Indicates interactivity. Screen reader announces node name. |
| Node Inspection | Click / Tap / XR Trigger | Node unfolds geometrically into a data card. | Complex mechanical unfolding sound. | 300ms | Reveals deeper context without leaving the primary scene. |
| Timeline Scrub | Dragging timeline slider | Time accelerates/reverses; particle trails follow spline direction. | Tape-scrubbing granular audio effect. | Variable | Allows precise temporal analysis. Arrow keys step by 1-second increments. |
| Evidence Reveal | Selecting wireframe object | Wireframe solidifies into an opaque, lit 3D model. | High-pass filter sweep opening. | 400ms | Rewards curiosity. Alt-text provided to DOM overlay. |
| Confidence Expansion | Clicking AI score | Score expands into a bar chart showing contributing variables. | Ascending arpeggio. | 250ms | Mitigates automation bias by exposing algorithmic reasoning6. |
| Source Opening | Clicking provenance link | Spatial browser window instances in the scene. | Subtle paper-rustle sound. | 200ms | Directs user to methodology and citations. |
| Defensive Activation | Clicking "Contain" button | Energy shield envelops the targeted node. | Heavy bass impact, closing gate sound. | 500ms | Primary agency mechanism. Spacebar activation supported. |
| Authorization Gate | System awaiting HITL input | Pulsing lock icon appears on the spline. | Rhythmic, ticking countdown (subtle). | Looping | Communicates a pending state. ARIA live region announces "Awaiting input." |
| Rejected Action | Vetoing AI suggestion | Node shakes laterally; payload bounces back. | Dissonant, muted thud. | 350ms | Confirms user veto. High-contrast visual shake. |
| Late Intervention | Missing the time window | Screen edges pulse yellow; payload slips past gate. | Descending glissando. XR rumble (50ms). | 600ms | Punishes hesitation without causing complete failure. |
| Replay Comparison | Toggling split-screen | Camera pulls back, scene duplicates with holographic ghosting. | Spatial panning shift (mono to wide stereo). | 800ms | Facilitates analytical comparison of outcomes. |
| Model Switch | Selecting new kill chain | Current chain dissolves into particles; new chain materializes. | Deep atmospheric swoosh. | 1.2s | Transitions between Military, AI, and Cyber models seamlessly. |
| WebXR Entry | Clicking "Enter VR/AR" | Camera zooms into the first node; UI scales to room-size. | Immersion swell (low to high frequency). | 1.0s | Establishes scale. Enters immersive session context. |
| WebXR Exit | Pressing exit/home button | Scene collapses back into inline browser window. | Reverse immersion swell. | 1.0s | Returns user to standard web browsing context. |
| Degradation State | Dropping below 30 FPS | High-poly models swap to low-poly LODs; shadows disable. | None. | Instant | Ensures performance on low-end devices. Silent background operation. |
| Offline Failure | Connection drop detected | Splines turn grey; UI grays out with "Cached Mode" tag. | Muted error chime. | 200ms | Graceful degradation for poor networks. |
| Completion | Finishing the challenge | Nodes align into a victory constellation; stats appear. | Orchestral, resolving major chord. | 2.5s | Rewards completion. Screen reader announces summary stats. |
| Share Generation | Clicking "Share Result" | Camera takes a rapid snapshot; a polaroid-style card slides in. | Camera shutter snap. | 400ms | Generates the social artifact. |
| Drill Down | Double-clicking a sub-node | Camera flies into the node, revealing micro-architecture. | Wind rushing sound. | 600ms | Provides extreme depth for Analysis Mode. |
| Ambient Pulse | 5 seconds of inactivity | Payload emits a slow, glowing ripple along the spline. | Low, rhythmic heartbeat (barely audible). | Looping | Keeps the scene feeling alive without demanding attention. |
Accessibility Specification
True spatial accessibility requires bridging the gap between the opaque WebGL 3D canvas and the browser's accessibility tree. Traditional Canvas elements are functionally invisible to screen readers, creating a massive barrier for visually impaired users. To solve this, the platform utilizes the WebXR DOM Overlay API5. By projecting a transparent, semantic HTML layer over the 3D canvas, screen readers (such as Apple VoiceOver or NVDA) can parse ARIA labels, \<button\> tags, and aria-live regions naturally37. As the user navigates the invisible DOM via keyboard or assistive switch, the 3D camera automatically pans to focus on the corresponding 3D node in the spatial environment, maintaining synchronization between the visual and accessible states. Furthermore, honoring the prefers-reduced-motion CSS media query, the Three.js camera will disable automated dolly movements, eliminate screen-shake effects during consequence animations, and replace rapid transitions with smooth crossfades to accommodate users with vestibular disorders. To assist users with low vision, the platform guarantees that all SDF typography maintains a minimum 4.5:1 contrast ratio against the volumetric background, and provides a toggle to disable all post-processing bloom effects that might cause visual glare.
Shareable Completion Artifact
To drive organic growth and replayability without relying on deceptive gamification tactics, the conclusion of the challenge generates a highly personalized, visually striking "Action Report" card. Because user privacy is paramount, this artifact is rendered entirely client-side using WebGL canvas extraction techniques, avoiding any server-side processing that could capture Personal Identifiable Information (PII)38. The resulting image features a cinematic snapshot of the exact moment the user broke the chain, overlaid with crisp typography detailing the encounter:
- Outcome: "Chain interrupted at: Persist."
- Model Assessed: "Attack Chain against an AI-Powered System."
- Tactics Defeated: "Data Poisoning, Unauthorized Automation."
- Operator Metrics: "Time to Intervention: 14.2s | Confidence Evaluated: 99% (Rejected)."
- Challenge Code: A short alphanumeric hash (e.g., KC-884A) that allows friends to load the exact same procedural seed and attempt to beat the user's metrics.
The sharing mechanism utilizes the Web Share API on mobile devices and generates a direct-download image and copyable URL on desktop. It strictly prohibits the collection of the user’s identity, IP address, or sensitive device telemetry, and completely avoids ranking users by simulated damage, simulated deaths, or destructive efficiency, maintaining the site's ethical mandate.
Analytics and Experiment Plan
To continuously optimize the educational efficacy of the platform, an ethical, privacy-preserving event and conversion model will be deployed. Analytics will record aggregated, anonymized telemetry focusing solely on engagement metrics rather than behavioral profiling. Tracked Conversions:
- Time to first meaningful interaction (Target: \< 20 seconds).
- First-session completion rate (Target: \> 60%).
- Model selection distribution (Military vs. AI vs. Cyber).
- Evidence inspected (Percentage of users who verify raw data vs. those who succumb to automation bias).
- Defensive control utilization (Intervention success rate).
- Replay and mode-switching rates.
- WebXR entry rate (Transitions from inline to immersive sessions).
- Share initiation and completion drop-off.
- Challenge-link conversion (Viral coefficient).
- Day-one and day-seven return rates.
- Accessibility-mode activation and frame-rate degradation events.
Ethical A/B Testing Plan:
1. Time Pressure: Implicit urgency (visual pacing) versus an explicit, numerical countdown timer.
2. Confidence Presentation: Displaying AI confidence as a definitive percentage (99%) versus qualitative text ("Highly Confident") to measure impact on automation bias6.
3. Raycast Thickness: Narrow versus thick visual raycasts in WebXR to determine optimal target selection speed.
4. Information Density: Short, punchy evidence descriptions versus medium-length, detailed logs.
5. Defensive Control Placement: Positioning the "Contain" button directly on the node versus floating it in an orbital menu.
6. Unverified Audio Cues: Testing the frequency and amplitude of audio cues that denote unverified information to find the balance between informative and annoying.
7. Debrief Layout: A linear, scrolling timeline versus a single-view statistical summary.
8. AR Placement: Requiring a manual hit-test to place the spatial graph in the user's room versus automatic, floating placement.
9. Onboarding Pacing: Auto-playing the initial camera dolly versus requiring the user to scroll or click to advance.
10. Share Artifact: A data-heavy statistical card versus a narrative, story-driven card.
None of these tests will employ deceptive countdowns, forced registration, notification spam, hidden subscriptions, or misleading share prompts.
Asset Requirements
To maintain a footprint capable of loading swiftly on mobile connections while delivering cinematic visual fidelity, 3D assets must adhere to strict modern compression standards.
- Geometry: All models must be exported as glTF/glb files utilizing Draco geometry compression, which reduces mesh file sizes by up to 95% while decompressing asynchronously in Web Workers to prevent main-thread blocking13.
- Textures: Textures must employ the KTX2 format with Basis Universal encoding (UASTC for high-detail normal maps, ETC1S for diffuse maps). This ensures textures remain compressed within the GPU's VRAM, preventing mobile browser crashes due to memory exhaustion14.
- Typography: Fonts must be generated as multi-channel signed distance fields (MSDF) to ensure razor-sharp text rendering in WebXR without the overhead of massive, pixelated texture atlases15.
- Audio: Sound files must be delivered in highly compressed, looping formats (e.g., .ogg, .aac), decoded via the Web Audio API upon instantiation.
Performance Considerations
Achieving a continuous 60+ FPS (or 72/90/120 FPS inside a VR headset) requires rigorous performance optimization. Failure to maintain strict frame pacing results in motion-to-photon latency, which rapidly induces simulator sickness in WebXR users39.
- Garbage Collection (GC) Stutter: The JavaScript V8 engine will routinely pause the main thread to clean up discarded memory. To prevent frame drops, the rendering loop must avoid allocating new objects. Vector math must rely on pre-allocated object pools, and the requestAnimationFrame loop must remain perfectly clean40.
- WebGPU First, WebGL Fallback: The engine will leverage the WebGPU API to offload particle simulations and compute tasks to the GPU, significantly reducing CPU overhead. A WebGL 2.0 fallback will ensure broad compatibility for legacy browsers2.
- Audio Overhead: HRTF panning in the Web Audio API requires complex mathematical convolutions that are highly CPU intensive. The number of simultaneous HRTF spatialized audio sources will be strictly capped to prevent thermal throttling on mobile devices, with background ambiance utilizing standard, low-cost stereo panning42.
- Z-Fighting Mitigation: Transparent UI shields and spatial UI planes often suffer from z-fighting (flickering) when occupying similar depth coordinates. The engine will implement depthWrite: false on transparent materials and utilize renderOrder sorting. For extreme depth scaling, a logarithmicDepthBuffer will be enabled43.
Implementation Priorities
Phase 1: Immediate Release (Core Loop)
- Implement the WebGPU/WebGL rendering pipeline and Draco/KTX2 asset loading architecture.
- Construct the 10-second opening sequence and the unified "Inspect Data" meaningful interaction.
- Deploy the 3-minute Challenge Mode featuring the AI data-poisoning scenario.
- Establish basic mouse, touch, and WebXR raycast input handlers.
Phase 2: Next Release (Expansion & Analytics)
- Integrate Guided Mode and Analysis Mode with timeline scrubbing.
- Deploy the client-side shareable artifact generator.
- Implement the WebXR DOM Overlay for full screen-reader accessibility.
- Launch the telemetry pipeline and initiate the first five A/B tests.
Phase 3: Advanced (Refinement)
- Enhance the visual grammar with advanced WebGPU compute-shader particle effects.
- Expand the microinteraction suite with complex HRTF spatial audio.
- Implement the remaining A/B tests and refine the Human-Control visualizations based on empirical user interaction data.
Acceptance Criteria
To guide the development team, the following criteria must be met for a successful deployment:
| Requirement | Threshold | Testing Methodology |
|---|---|---|
| Initial Load Time | \< 2.5s to first interactive frame on standard 4G connection. | Lighthouse / Chrome DevTools Network throttling. |
| Frame Rate Stability | Minimum 60 FPS on mid-tier desktop; 72+ FPS in Meta Quest Browser. | WebGL profiling; monitoring for GC pauses \> 16ms. |
| Input Parity | 100% of interactions completable via Mouse, Touch, XR Raycast, and Keyboard. | Manual QA testing across device spectrum. |
| Accessibility | 100% WCAG 2.1 AA compliance for DOM Overlay elements. | Axe DevTools, NVDA/VoiceOver manual traversal. |
| Non-Operational Safety | Zero instances of functional exploit code or real-world targeting data in the application state. | Manual code review and red-team sanitization check. |
| Asset Compression | Total application payload \< 15MB. | Network payload auditing. |
| Telemetry Integrity | No PII, IP addresses, or device fingerprints transmitted to analytics endpoint. | Packet sniffing and API payload inspection. |
Works cited
1. Beyond the Interface: Redefining UX for Society-in-the-Loop AI Systems \- arXiv, https://arxiv.org/html/2603.04552v1
2. Three.js vs WebGPU in 2026: What Changed for Large-Scale Construction Viewers, https://altersquare.medium.com/three-js-vs-webgpu-in-2026-what-changed-for-large-scale-construction-viewers-79a7ed8b0b34
3. WebXR \+ AI in 2026: Where the Platform Actually Is Today | Articles | Tobias Weiss, https://tobias-weiss.org/content/webxr-ai-2026-platform-state/
5. display CSS property \- MDN Web Docs \- Mozilla, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display
6. Confidence-Based Trust Calibration in Human-AI Teams \- The Science and Information (SAI) Organization, https://thesai.org/Downloads/Volume16No12/Paper\_122-Confidence\_Based\_Trust\_Calibration\_in\_Human\_AI\_Teams.pdf
7. The effects of explanations on automation bias \- Melbourne School of Psychological Sciences, https://psychologicalsciences.unimelb.edu.au/\_\_data/assets/pdf\_file/0019/5252131/2023Vered.pdf
8. Full article: Calibrating Reliance on Automated Advice: Transparency and Trust Calibration Feedback \- Taylor & Francis, https://www.tandfonline.com/doi/full/10.1080/10447318.2025.2487861
9. What is MITRE D3FEND: Framework & ATT\&CK Mapping \- Vectra AI, https://www.vectra.ai/topics/mitre-d3fend
10. Securing Generative AI Systems: Threat-Centric Architectures and the Impact of Divergent EU–US Governance Regimes \- MDPI, https://www.mdpi.com/2624-800X/6/1/27
11. Comparing desktop 3D virtual reality with web 2.0 interfaces: Identifying key factors behind enhanced user capabilities \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC11154203/
12. WebXR Standards and Accessibility Architecture Issues \- W3C, https://www.w3.org/WAI/APA/wiki/WebXR\_Standards\_and\_Accessibility\_Architecture\_Issues
13. Multi-Resolution 3D Rendering for High-Performance Web AR \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC10422453/
14. 100 Three.js Tips That Actually Improve Performance (2026) \- Utsubo, https://www.utsubo.com/blog/threejs-best-practices-100-tips
15. Troika Text for Three.js \- GitHub Pages, https://protectwise.github.io/troika/troika-three-text/
16. From Universe to Metaverse: A Leap into Virtual Collaboration at NASA JPL \- ResearchGate, https://www.researchgate.net/publication/375310966\_From\_Universe\_to\_Metaverse\_A\_Leap\_into\_Virtual\_Collaboration\_at\_NASA\_JPL
17. MITRE ATLAS™, https://atlas.mitre.org/
18. Web audio spatialization basics \- Web APIs \- MDN Web Docs \- Mozilla, https://developer.mozilla.org/en-US/docs/Web/API/Web\_Audio\_API/Web\_audio\_spatialization\_basics
19. A Review on Head-Related Transfer Function Generation for Spatial Audio \- MDPI, https://www.mdpi.com/2076-3417/14/23/11242
20. STRATEGIC RESEARCH & INNOVATION AGENDA SOLVING REAL WORLD PROBLEMS, https://cdn.prod.website-files.com/68a6efddc70239b9187f4888/68c7e07d6f48d1c67474dba6\_Virtual%20Worlds%20SRIA%20v1.0.pdf
21. Understanding Virtual Reality Components | PDF \- Scribd, https://www.scribd.com/document/970555705/ARVR-Answers-Final-Exam
22. vr react development guide for immersive web experiences \- inairspace, https://inairspace.com/blogs/learn-with-inair/vr-react-development-guide-for-immersive-web-experiences
23. What Is Spatial Computing? A Comprehensive Guide | Frame Sixty, https://framesixty.com/what-is-spatial-computing/
24. design-reviews\#1204: Incubation: \[HTML\] html-in-canvas \- TAG Github Status \- W3C, https://tag-github-bot.w3.org/gh/w3ctag/design-reviews/1204
25. Bias in the Loop: How Humans Evaluate AI-Generated Suggestions \- ResearchGate, https://www.researchgate.net/publication/395403018\_Bias\_in\_the\_Loop\_How\_Humans\_Evaluate\_AI-Generated\_Suggestions
26. Transparency improves the accuracy of automation use, but automation confidence information does not \- PMC, https://pmc.ncbi.nlm.nih.gov/articles/PMC11461414/
27. Human in the loop · Collab AI UX Pattern, https://aiuxplayground.com/pattern/human-in-the-loop/
28. Bias in the Loop: How Humans Evaluate AI-Generated Suggestions \- Open Access LMU, https://epub.ub.uni-muenchen.de/128441/1/2509.08514v1.pdf
29. ISO 42001: Meaning, Requirements, Benefits, and Everything You Need to Know, https://www.techmagic.co/blog/iso-42001-standard
30. Understanding AIMS (AI Management System) and ISO/IEC 42001 \- Medium, https://medium.com/@mandarmeghal/understanding-aims-ai-management-system-and-iso-iec-42001-ea5b7d9c0ea7
31. VR vs 2D: Cognitive Load Analysis | PDF | Virtual Reality | Neuroscience \- Scribd, https://www.scribd.com/document/709694209/Enhancing-User-Capabilities-While-Reducing-Cogniti
32. VTT Technology 440: EuroXR 2025, https://publications.vtt.fi/pdf/technology/2025/T440.pdf
33. Comparative Study on 2D and 3D User Interface for Eliminating Cognitive Loads in Augmented Reality Repetitive Tasks | Request PDF \- ResearchGate, https://www.researchgate.net/publication/375783919\_Comparative\_Study\_on\_2D\_and\_3D\_User\_Interface\_for\_Eliminating\_Cognitive\_Loads\_in\_Augmented\_Reality\_Repetitive\_Tasks
34. Responsible Use of AI in Military Systems \- TNO (Publications), https://publications.tno.nl/publication/34642476/rCXNWY/schraagen-2024-responsible.pdf
35. How to Implement ISO 42001 with AI Governance Tools \- Elevate Consult, https://elevateconsult.com/insights/how-to-implement-iso-42001-a-step-by-step-guide-using-ai-governance-tools/
36. Human, Machine, War: How the Mind-Tech Nexus will Win Future Wars \- Air University, https://www.airuniversity.af.edu/Portals/10/AUPress/Books/B\_188\_Wright\_Human\_Machine\_War.1.pdf
37. Discover | web.dev, https://web.dev/discover
38. IMG.LY vs. Fabric.js — Compare Creative SDKs, https://img.ly/fabricjs-alternative/
39. ATAM-Based Evaluation of Architectural Patterns in VR Educational Applications, https://store.computer.org/csdl/proceedings-article/isda/2026/11606007/2iiLqEmimZi
40. Garbage Collector ruins WebGL page performance \- Stack Overflow, https://stackoverflow.com/questions/35917819/garbage-collector-ruins-webgl-page-performance
41. AlgoVision: Interactive Algorithm Learning | PDF | Rendering (Computer Graphics) | Web Gl, https://www.scribd.com/document/905552359/Research-Paper
42. Web Audio API performance and debugging notes, https://padenot.github.io/web-audio-perf/
43. three.js: What is more efficient to layer and resolve z-fighting: using polygonOffsetFactor or transparency with depthWrite disabled? \- Stack Overflow, https://stackoverflow.com/questions/49096626/three-js-what-is-more-efficient-to-layer-and-resolve-z-fighting-using-polygono
44. How can I solve z-fighting using Three.js \- Stack Overflow, https://stackoverflow.com/questions/40328722/how-can-i-solve-z-fighting-using-three-js