Merciven
Work · Automation, QA & immersive

XR showroom with gaze analytics

A 3D gallery you can walk through in the browser or a VR headset, measuring live which exhibits hold your attention.

Organisation
Imisi 3D, Lagos (XR creation lab)
My role
Data & Immersive Realities Intern
When
2024
Stack
Three.js, WebXR, JavaScript, Panda3D

Try it in your browser

Problem statement

XR experiences are usually designed on instinct. Without data on where people actually look, a team can't tell whether an exhibit, lesson or product demo is working.

Objectives & goals

  • Measure attention inside a 3D scene
  • Run on a laptop, a phone and a VR headset
  • Export the data for analysis
  • Show the same method in the engines XR teams use

Process

  1. DiscoverWorked alongside the Imisi 3D VR game team, who built across Godot, Defold and Panda3D.
  2. DefineChose dwell time per exhibit as the attention measure: under 12 degrees from the centre of view, within 20 metres.
  3. BuildA WebXR gallery in Three.js, a Panda3D desktop version, and ports for Godot, Unity and Defold.
  4. ProveScripted visitors, offscreen renders, and browser tests on desktop and mobile.

Who it's for

XR designers

Want to know which exhibits work.

Educators

Want lessons built around what holds attention.

Museums and brands

Want evidence from virtual showrooms.

Challenges

  • Defining "looking at" in 3D, for a mouse, a touch screen and a headset
  • Running one experience on a laptop, a phone and a VR headset
  • Testing without a headset or a screen

What I built

Live gaze analytics

Seconds in view per exhibit, updated as you look around.

Works everywhere

Keyboard and mouse, touch on phones, and Enter VR on WebXR headsets.

CSV export

Download dwell times for analysis in any tool.

Five implementations

JavaScript/Three.js, Python/Panda3D, GDScript/Godot, C#/Unity and Lua/Defold.

Flow

  1. Visitor walks or looks
  2. Camera forward vector
  3. Angle to each exhibit
  4. Closest under 12°
  5. Add frame time
  6. Live panel
  7. dwell_times.csv

Screens

The web version, with the live gaze panel on the right. Try it yourself with the button above.
The web version, with the live gaze panel on the right. Try it yourself with the button above.

Tools & languages

  • Three.js
  • WebXR
  • JavaScript
  • Panda3D
  • Python
  • Godot (GDScript)
  • Unity (C#)
  • Defold (Lua)

The code

The web and VR version, the Panda3D app, and drop-in gaze trackers for Godot (GDScript), Unity (C#) and Defold (Lua).

The repository is private. I'm happy to share it with a hiring team or walk you through it on a call.

Try it in your browser Request a code walkthrough

Samples are written with synthetic data. No client code or client data is used.