StatsVR

Performance statistics HUD specifically for WebVR & THREE.js Projects that use a HMD, such as Oculus Rift

The purpose of StatsVR is to monitor your computers performance while developing and running your application so that you don't need to remove your headset to check.

The StatsVR HUD displays the

• frames per second (FPS),
• millisecond duration (MS) of a section of code,
• Up to 3 custom variables in the HMD view, always facing the camera, and always on top of other meshes in the scene,
• Custom Object3Ds that you can also attach to the StatsVR Object3D. See Example 3.

You can download the project and view the examples.

git clone https://github.com/Sean-Bradley/StatsVR.git
cd StatsVR
npm install
npm run dev

Visit https://127.0.0.1:3000/

This is a typescript project consisting of two sub projects with there own tsconfigs.

To edit this example, then modify the files in ./src/client/ or ./src/server/.

The projects will auto recompile if you started it by using npm run dev

import StatsVR from "statsvr";

Simplest Example

npm install statsvr

• Import StatsVR

  import StatsVR from "statsvr";

• Instantiate and position StatsVR

  //pass in an existing scene and camera
  const statsVR = new StatsVR(scene, camera);
  //change default statsvr position
  statsVR.setX(0);
  statsVR.setY(0);
  statsVR.setZ(-2);

• Update StatsVR in the render loop

  statsVR.update();

See the source code of the working examples.

Example 1

Basic StatsVR setup for WebVR and Threejs projects.

StatsVR Example 1

Example 2

Advanced StatsVR for WebVR and Threejs projects. Change position and show Millisecond Graph.

StatsVR Example 2

Example 3

Advanced StatsVR for WebVR and Threejs projects. Custom Variables and custom 3d objects.

StatsVR Example 3

Example 4

StatsVR in a minigame using WebVR, Threejs, Haptic Feedback and Collision Detection.

StatsVR Example 4