Paran: Disaster training simulation
Client: Paran Year: 2024 Services: Interactive 3D, Scenario Simulation, Safety-Training Software Duration: 14 weeks Tech: Babylon.js-family runtime with custom scenario state, particle systems, first-person controls
The problem
Paran develops industrial safety training software for the Korean manufacturing sector. Chemical plants, refineries, large-scale industrial sites where an untrained operator reacting incorrectly to a disaster scenario can cost lives and hundreds of millions of won in damages.
Existing training content in this space is dominated by two formats. The first is traditional video (passive, one-pace-fits-all, forgotten within a week. The second is fully-immersive VR simulations built in Unity or Unreal) technically impressive but expensive to produce, dependent on headset hardware, and impossible to deploy at enterprise training scale where hundreds of operators need access without specialized equipment.
Paran wanted a middle path: browser-based, scenario-driven, genuinely interactive, running on the laptops and workstation hardware already deployed across their client sites. Safety training that an operator could open in a browser, go through a scenario, get a certification record, and repeat as needed.
What we built
A multi-scenario disaster-simulation training platform running in any modern browser, with first-person navigation, particle-system-driven hazards, scripted timed events, and branching operator-decision flows.
- Multi-scenario library. Fire incident, chemical spill, gas leak, equipment failure, containment breach. Each scenario has its own environment, hazard sequence, and decision tree.
- First-person navigation. Operators move through the plant environment using keyboard or gamepad controls. Camera is head-height; movement speed is realistic.
- Particle-system hazards. Smoke, fire, chemical fog, debris. Not cinematic, but realistic enough that operators read the hazard cues the same way they would on-site.
- Scripted timed events. Scenarios unfold on a clock. Operator has a limited decision window per event; inaction is itself a choice, and the scenario responds accordingly.
- Branching decision trees. Each decision the operator makes changes what happens next. Correct decisions lead to safe outcomes; incorrect decisions trigger cascading consequences and a debrief at the end explaining what should have happened.
- Certification records. Completion data, decision history, and timing captured per operator for training-compliance reporting.
- Versioned scenarios. The URL path includes a version number (
paran_v05/Paran_v01.html) because Paran iterates scenario content based on incidents observed in the field. Each scenario version is its own archived build, referenced in compliance records.
How we built it
Weeks 1–2. Kickoff with Paran's training-content team and their safety subject-matter experts. Scenario scoping, decision-tree design, reference-material review (incident reports, existing training video).
Weeks 3–5. Environment modeling. The base plant scene that would be reused across multiple scenarios. Lighting baking, texture work, performance budget definition.
Weeks 6–8. Scenario engine. The state machine handling scripted events, particle-system triggering, decision-tree branching, and completion scoring. Plus the first playable scenario (fire incident) on staging.
Weeks 9–11. Additional scenarios built on top of the engine. Chemical spill, gas leak, equipment failure. Each scenario reuses the base environment and the engine but has its own event sequence.
Weeks 12–13. UI layer. First-person controls, decision-prompt overlays, debrief screens, certification recording. Training compliance reporting hand-off to Paran's LMS.
Week 14. QA across a range of client hardware (from modern laptops down to 2019-era workstations), performance tuning, launch.
What it changed
Paran deployed the platform to their enterprise clients and began replacing portions of their video-based training with the interactive simulation. Client feedback on operator-retention improved measurably. Trainees who went through the interactive scenarios retained more of the safety content than those who watched the equivalent video.
What we learned
Browser-based simulation is a different discipline than VR simulation. A full-VR Unity build would have had more visual fidelity, but it would also have needed hardware nobody has at scale. Browser-based simulation trades fidelity for deployability, and for industrial training at scale, deployability wins. The operators who needed the training were not going to get headsets.
Inaction must be a choice. Early scenario drafts paused when the operator didn't respond. We found that operators were gaming the pause. Stopping to think, then un-pausing only when they had the "right" answer. That's not how real incidents unfold. We changed scenarios to run on a clock regardless. Not responding is itself a choice with a consequence. Training outcomes got sharper immediately.
Debrief is the product. Operators learn more from the post-scenario debrief ("here's what happened, here's what you did, here's what you should have done") than from the scenario itself. We put the majority of the late-project polish budget into the debrief UI. It was the right call.
Scenario versioning is a compliance artifact. Safety training content has to be traceable for regulatory purposes. A certification from 2024 should be tied to the exact scenario version the operator completed, not "scenario A in general." Built the versioning into the URL path from week one. Paran's compliance team uses it.
Stack
- Runtime: Babylon.js-family WebGL runtime with custom state-machine and particle layers (Three.js was considered but Babylon's built-in scenario/particle tooling saved weeks of engineering)
- First-person controls: custom pointer-lock controls with gamepad support (Paran's clients have operators who prefer gamepad over WASD)
- Particle systems: GPU-instanced particles for smoke / fire / fog, tuned for 60 fps on mid-range hardware
- UI: Next.js App Router for the shell, vanilla-JS overlays on the scenario canvas
- Compliance hand-off: JSON event stream posted to Paran's LMS at session end
- Hosting: client-managed Korean hosting (security-reviewed)
Want something similar?
Safety training, disaster simulation, operational-decision training. The pattern generalizes. If you build or deploy training content for high-stakes industrial environments and you're deciding between video and full VR, the browser-simulation middle path may be the better fit.
Send a two-sentence email to hello@cclemang.com.
