{"id":20066052,"url":"https://github.com/sean-bradley/statsvr","last_synced_at":"2025-05-05T18:32:15.771Z","repository":{"id":31467773,"uuid":"126298343","full_name":"Sean-Bradley/StatsVR","owner":"Sean-Bradley","description":"FPS and Custom Values HUD for WebVR \u0026 THREE.js Projects","archived":false,"fork":false,"pushed_at":"2024-03-28T22:53:51.000Z","size":2988,"stargazers_count":35,"open_issues_count":0,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-11T20:15:20.611Z","etag":null,"topics":["rift","statsvr","threejs","vive","webvr"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sean-Bradley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Sean-Bradley"],"patreon":"seanwasere","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-03-22T07:44:36.000Z","updated_at":"2024-10-30T19:00:49.000Z","dependencies_parsed_at":"2024-06-19T00:11:08.911Z","dependency_job_id":"57b6f90d-8931-4759-82a3-2fe213d3c7aa","html_url":"https://github.com/Sean-Bradley/StatsVR","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FStatsVR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FStatsVR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FStatsVR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FStatsVR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sean-Bradley","download_url":"https://codeload.github.com/Sean-Bradley/StatsVR/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224461761,"owners_count":17315116,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rift","statsvr","threejs","vive","webvr"],"created_at":"2024-11-13T13:54:22.720Z","updated_at":"2024-11-13T13:54:23.303Z","avatar_url":"https://github.com/Sean-Bradley.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Sean-Bradley","https://patreon.com/seanwasere"],"categories":[],"sub_categories":[],"readme":"# StatsVR\n\nPerformance statistics HUD specifically for WebVR \u0026amp; THREE.js Projects that use a HMD, such as Oculus Rift\n\nThe 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.\n\nThe StatsVR HUD displays the\n\n- frames per second (FPS),\n- millisecond duration (MS) of a section of code,\n- Up to 3 custom variables in the HMD view, always facing the camera, and always on top of other meshes in the scene,\n- Custom Object3Ds that you can also attach to the StatsVR Object3D. See Example 3.\n\nYou can download the project and view the examples.\n\n```bash\ngit clone https://github.com/Sean-Bradley/StatsVR.git\ncd StatsVR\nnpm install\nnpm run dev\n```\n\nVisit https://127.0.0.1:3000/\n\nThis is a typescript project consisting of two sub projects with there own _tsconfigs_.\n\nTo edit this example, then modify the files in ./src/client/ or ./src/server/.\n\nThe projects will auto recompile if you started it by using _npm run dev_\n\n```javascript\nimport StatsVR from \"statsvr\";\n```\n\n## Simplest Example\n\n```bash\nnpm install statsvr\n```\n\n- Import StatsVR\n  ```javascript\n  import StatsVR from \"statsvr\";\n  ```\n- Instantiate and position StatsVR\n  ```javascript\n  //pass in an existing scene and camera\n  const statsVR = new StatsVR(scene, camera);\n  //change default statsvr position\n  statsVR.setX(0);\n  statsVR.setY(0);\n  statsVR.setZ(-2);\n  ```\n- Update StatsVR in the render loop\n  ```javascript\n  statsVR.update();\n  ```\n\nSee the source code of the working examples.\n\n## Example 1\n\nBasic StatsVR setup for WebVR and Threejs projects.\n\n[StatsVR Example 1](https://sbcode.net/threejs/statsvr-1/)\n\n[![StatsVR Example 1](./dist/client/img/demo1.gif)](https://sbcode.net/threejs/statsvr-1/)\n\n## Example 2\n\nAdvanced StatsVR for WebVR and Threejs projects. Change position and show Millisecond Graph.\n\n[StatsVR Example 2](https://sbcode.net/threejs/statsvr-2/)\n\n[![StatsVR Example 2](./dist/client/img/demo2.gif)](https://sbcode.net/threejs/statsvr-2/)\n\n## Example 3\n\nAdvanced StatsVR for WebVR and Threejs projects. Custom Variables and custom 3d objects.\n\n[StatsVR Example 3](https://sbcode.net/threejs/statsvr-3/)\n\n[![StatsVR Example 3](./dist/client/img/demo3.gif)](https://sbcode.net/threejs/statsvr-3/)\n\n## Example 4\n\nStatsVR in a minigame using WebVR, Threejs, Haptic Feedback and Collision Detection.\n\n[StatsVR Example 4](https://sbcode.net/threejs/statsvr-4/)\n\n[![StatsVR Example 4](./dist/client/img/demo4.gif)](https://sbcode.net/threejs/statsvr-4/)\n\n\u003c!-- ## Video Tutorial of using StatsVR\n[![StatsVR Tutorial for WebVR and ThreeJS projects](https://img.youtube.com/vi/TZNZoaiTUwg/0.jpg)](https://www.youtube.com/watch?v=TZNZoaiTUwg) --\u003e\n\n\u003c!-- ## StatsVR GitHub Repository\nhttps://github.com/Sean-Bradley/StatsVR --\u003e\n\n\u003c!-- ## StatsVR Examples,\nhttps://sean-bradley.github.io/StatsVR/  --\u003e\n\u003c!--\n## Initial Setup\nDownload statsvr.js, save it, and include reference to script in your html head. eg\n\n``\u003cscript type=\"text/javascript\" src=\"statsvr.min.js\"\u003e\u003c/script\u003e`` --\u003e\n\n\u003c!-- Create global variables\n```javascript\nvar camera, scene, renderer;  // these are commonly used THREE.js variables and may already exist in your project\nvar statsVR; // create your global statsvr variable. I named mine statsVR\n\nfunction init(){\n\t// existing THREE.js and webvr setup goes here\n\t// then after you've instantiated the THREE.js renderer, scene and camera objects,\n\tstatsVR = new StatsVR(scene, camera);  // pass your scene and camera objects to the StatsVR constructor\n}\ninit();\n```\n\n## Showing the Default FPS Counter and Graph\n![Default FPS Counter and Graph](docs/img/statsVR_FPS.jpg)\n\nTo show the default StatsVR FPS counter and graph, add the line\n``statsVR.update();``\nanywhere inside your THREE.js render or animation loop.\n\neg,\n```javascript\nfunction render() {\n\t// your existing animation magic\n\n\tstatsVR.update();  // required anywhere within the loop\n\n\trenderer.render(scene, camera)\n}\nrenderer.animate(render);\n```\n\n## Showing the FPS and also the optional MS Counters and Graphs\n![FPS and Optional MS Counters and Graphs](docs/img/statsVR_FPS_MS.jpg)\n\nTo show the StatsVR FPS along with the optional MS counter and graph, also add the lines\n\n```javascript\nstatsVR.msStart();\n//code you want to monitor the MS duration of goes here\nstatsVR.msEnd();\n```\n\nanywhere inside your THREE.js render or animation loop.\n\neg,\n```javascript\nfunction render() {\n\t// your existing animation magic\n\tstatsVR.msStart(); // starts the MS monitor timespan\n\t// specific code you want to monitor the MS duration of goes here\n\tstatsVR.msEnd(); // ends the MS monitor timespan\n\n\tstatsVR.update(); //required anywhere within the loop\n\n\trenderer.render(scene, camera)\n}\nrenderer.animate(render);\n```\nor, if you want to check the MS duration of your entire render or animation loop, put the ``msStart()`` and ``msEnd()`` procedure calls at the beginning and end of your entire render loop.\neg,\n```javascript\nfunction render() {\n\tstatsVR.msStart(); // starts the MS monitor timespan\n\n\t// your existing animation magic\n\n\tstatsVR.update();  // required anywhere within the loop\n\n\trenderer.render(scene, camera)\n\n\tstatsVR.msEnd(); // end the MS monitor timespan\n}\nrenderer.animate(render);\n```\n\n\n### Also Show the optional custom fields along with the usual FPS and optional MS Counters and Graphs.\n![FPS, MS and Custom fields](docs/img/statsVR_FPS_MS_3Customs.jpg)\n\nYou can also show up to 3 extra custom values in the display, such as values you may want to track during execution of your program.\neg, anywhere witihn your render loop,\n```javascript\nstatsVR.setCustom1(myVar);\nstatsVR.setCustom2(anotherVar);\nstatsVR.setCustom3(optionalyAnyOtherVarYouWantToMonitor);\n```\n\n\n### Customising the StatsVR position inside the HMD view\nThe default panel is shown at offset\n```javascript\nX = 0,\nY = 1.5,\nZ = -5\n```\nfrom the camera position and rotation in the THREE.js worldspace.\nYou can modify those defaults if you want, eg, after you initialise the StatsVR object, you can change it's display coordinates.\n```\nstatsVR.setX(1);\nstatsVR.setY(0);\nstatsVR.setZ(-10);\n```\n\n\nThe benefit of using StatsVR is that you don't need to remove the HMD to view the FPS or any other custom variable you want to monitor.\n\n\n### Set Visibility\n```javascript\nstatsVR.setEnabled(true);  //visible, default\nstatsVR.setEnabled(false); //hidden\n```\nNote that the StatsVR is still in memory and may still be updated by your code.\nStatsVR was originally written as as a debug tool, so you will get slightly better performance by removing StatsVR once you are satisified with your performance of your code or when compiling your production build.\n\n\n --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-bradley%2Fstatsvr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsean-bradley%2Fstatsvr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-bradley%2Fstatsvr/lists"}