fps-counter affect FPS

[kennardconsulting]

Hi there.

Thanks for all your wonderful work contributing to A-Frame!

I'm a little concerned about the fps-counter component. Such a component needs to be very sensitive to FPS, both measuring and impacting, and I'm not sure the component is 'careful' enough with regard to DOM access and garbage collection.

Specifically:

• it creates a new anonymous function (to pass to setTimeout) every tick
• it accesses the DOM (.innerHTML) every tick
• it parses floats from text every tick
• it formats floats (.toFixed) every tick
• it requires the stats component (and keeps parsing its DOM)

I'm not good enough at A-Frame to know if this is a big deal, but it seemed to be a problem for me. I ended up writing my own version of fps-counter:

AFRAME.registerComponent( 'fps-counter', {

	init() {
		this.el.setAttribute( 'text', { align: 'center', side: 'double', color: 'white' } );
		this.ticksSinceLastInterval = 0;
		setInterval( () => {			
			this.ticksToDisplay = this.ticksSinceLastInterval.toString();
			this.ticksSinceLastInterval = 0;
		}, 1000 );
	},

	tick() {
		this.ticksSinceLastInterval++;
		
		if ( this.ticksToDisplay !== undefined ) {
			this.el.setAttribute( 'text', 'value', this.ticksToDisplay );
			this.ticksToDisplay = undefined;
		}
	}
} );

[ngokevin]

Thanks! That may be a better route...would maybe want to do some weighted average so it's not erratic.

[kennardconsulting]

Actually erratic is quite good, since frame drops normally happen suddenly and don't last long (i.e. when some model/texture is first loaded). So you want to be able to see it.

A better solution would be the stats counters' moving graph, but that's probably too much for a simple component