I am teaching a class on reinforcement learning and I need to demonstrate how Deep Q-Networks (DQN) work in a visually engaging way. I want to create a browser-based driving simulator that runs 8 parallel environments simultaneously to train a DQN agent. The entire thing should happen in the browser with no server-side dependencies.
The simulator should feature:
- 8 parallel 3D driving environments rendered using Three.js (or similar), displayed in a 4x2 grid layout
- A simple low-poly 3D scene of a car driving on a winding forest road with curves/bends, grass terrain, and trees lining the road
- The DQN agent learns to drive (stay on road, steer, avoid going off-road) across all 8 environments simultaneously
- The DQN agent's input observation is a pixelated low-resolution image (e.g., 8x8 pixels) captured from the environment's camera. The pixelated observation of the first environment (Env 0) should be displayed in the info panel so viewers can see what the agent actually perceives.
- Real-time visualization of training metrics: action Q-values, per-environment reward, epsilon (exploration rate), and an average episode reward chart over training batches
The simulation should run at interactive speed — the implementation must be efficient enough that all 8 environments render and train smoothly in real-time without noticeable lag or frame drops.
Use screenshot.png as a reference.