Web/vr

webxr-chemistry-classroom

2023 · DigiPen Institute of Technology – SIT · University project

A browser-hosted VR chemistry lesson — an immersive classroom students can walk through and interact with, delivered entirely over the web with no install step. Built with TypeScript, React, and Babylon.js on top of the WebXR device API, so the same build runs on a real headset or, for anyone without hardware, through a WebXR emulator browser extension on a desktop.

That dual target was the point: VR coursework normally dies on hardware access, and shipping to the browser removes that gate.


Role and responsibilities

  • Built the web-hosted VR application in TypeScript / React / Babylon.js
  • Integrated the WebXR device API — session setup, headset and controller input, and the fallback path for emulated devices
  • Authored the interactive classroom scene and its chemistry-lesson interactions

Learning outcomes

  • Delivering VR through the browser rather than as a native build — and what that trades away in performance for reach
  • Working against the WebXR / VR equipment API: session lifecycle, reference spaces, and controller input handling
  • Driving a 3D scene from React — reconciling a retained-mode renderer with a declarative UI framework
  • Supporting real headsets and emulated devices from one codebase, so the project stayed testable without hardware on hand

Media

File Description
VR.mp4 Walkthrough of the classroom lesson