exponenta/gstatsjs

Graphics statistic (DrawCalls and TextureCount) for WebGL

gstatsjs's Issues

Details about DrawPasses

Sorry for the newbie question, I'm new to game development.
I've learnt about draw calls (calling an opengl draw function), and the acronym that you use in the custom panel is DC.
Is that correct that DrawPasses = Draw calls here ?

I'm currently testing with 2 textures (a map and a character). The character can move on the map with a viewport following it (culling enabled).
When moving my character, I'm expecting the DC value to change, but it's always set to 1.

Is that a bug in gstatsjs ?

Demo here (or click on the image):

my implementation of gstatsjs

// 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;

Problems with the npm package

getkey/gstatsjs has issues closed, which is why I'm creating the issue here.
@eXponenta @getkey when checking getkey's repo, I see

This branch is 4 commits ahead, 6 commits behind eXponenta:master.

Since getkey's PR has been merged, it'd be nice to have npm/gstats points to the official repo instead of the outdated fork.

Finally, I'm unable to get the fork working in my setup (react, pixi v5)

Getting errors from the editor:

[tsserver 2307] [E] Cannot find module 'gstats' or its corresponding type declarations.

Ignoring that, I get webpack errors when compiling:

ERROR in /path/to/project/src/components/DebugStatsView.tsx
./src/components/DebugStatsView.tsx
[tsl] ERROR in /path/to/project/src/components/DebugStatsView.tsx(7,9)
TS2461: Type 'StatsJSAdapter' is not an array type.

Ignoring that as well, I get browser console errors:

Stats can't found in window, pass instance of Stats.js as second param

Can we get a working example with es modules ?

Pixi v5 support

Hey @eXponenta!

I just added Pixi v5 support to my fork. Maybe I'll get around sending a PR your way later, if I don't, I still want to share how to you.
It's just a matter of changing a couple lines (see getkey@a2e2488).