The simplest FPS meter for playcanvas

FpsCounter.js

pc.script.create('fpsCounter', function (app) {
    // Creates a new FpsCounter instance
    var FpsCounter = function (entity) {
        this.entity = entity; // The scene object
        this.fpsCount = 0;
        this.counterEl = null;
        
        this.insertBeforeElId = "application-canvas";
    };

    FpsCounter.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
            this.counterEl = this.initCounterEl();
        },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
            this.fpsCount = this.culculateFpsCount(dt);
            this.setCounterValue(this.fpsCount);
        },
        
        initCounterEl: function() {
            var insertBeforeEl =  document.getElementById(this.insertBeforeElId);
            var el = document.createElement('div');
            document.body.insertBefore(el, insertBeforeEl);
            
            // @TODO: better use css class with all this rules instead of
            // hardcoding them here
            el.style.position = "fixed";
            el.style.top = "20px";
            el.style.left = "20px";
            el.style.width = "100px";
            el.style.height = "50px";
            el.style.zIndex = 1000;
            
            document.body.insertBefore(el, insertBeforeEl);
            return el;
        },
        
        setCounterValue: function(newVal) {
            this.counterEl.innerHTML = "<h1>" + newVal + "</h1>";
        },
        
        culculateFpsCount: function(dt) {
            var fpsCount = (1/dt).toFixed(2);
            return fpsCount;
        }
        
    };

    return FpsCounter;
});