getkey / gstatsjs Goto Github PK

// eslint-disable-next-line import/no-extraneous-dependencies
import Stats from "stats.js";
import React, { useEffect, useMemo } from "react";
// @ts-ignore
import { PIXIHooks, StatsJSAdapter } from "gstats";
import { useApp, useTick } from "@inlet/react-pixi";

// @ts-ignore gross, but needed by gstat
window.Stats = Stats;

/** @SR
 * development env only component to show FPS/RAM/GRAM stats
 *  *
 * FPS: Frames rendered in the last second. The higher the number the better.
 * MS:  Milliseconds needed to render a frame. The lower the number the better.
 * MB:  MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
 * DC: DrawPasses
 * TC: Texture count
 */
const DebugStatsView: React.FC = () => {
  const app = useApp();
  const stats = useMemo(() => new StatsJSAdapter(new PIXIHooks(app)), [app]);

  useTick(() => stats?.update());
  useEffect(() => {
    const domElement = stats.stats.dom || stats.stats.domElement;
    domElement.style.top = "";
    domElement.style.bottom = "0px";
    return stats.stats && document.body.appendChild(domElement);
  }, [stats.stats]);
  return null;
};

export default DebugStatsView;