statsvr

Performance statistics HUD specifically for WebXR THREE.js Projects.

Usage no npm install needed!

<script type="module">
  import statsvr from 'https://cdn.skypack.dev/statsvr';
</script>

README

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 http://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

StatsVR Example 1

Example 2

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

StatsVR Example 2

StatsVR Example 2

Example 3

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

StatsVR Example 3

StatsVR Example 3

Example 4

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

StatsVR Example 4

StatsVR Example 4