stats.js随时查看fps

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>Document</title>

	<script type="text/javascript" src="./libs/stats.js"></script>

</head>

<body>

	<div id="Stats-output">

	</div>

	<script type="text/javascript">

		var stats = initStats();

		function initStats() {

	            var stats = new Stats();

	            stats.setMode(0); // 0: fps, 1: ms

	            // Align top-left

	            stats.domElement.style.position = 'absolute';

	            stats.domElement.style.left = '0px';

	            stats.domElement.style.top = '0px';

	            document.getElementById("Stats-output").appendChild(stats.domElement);

	            return stats;

	        }

	        setInterval(function(){

	        	stats.update();

	        },500);

	</script>

</body>

</html>

　源码：

/**

 * @author mrdoob / http://mrdoob.com/

 */

var Stats = function () {

    var startTime = Date.now(), prevTime = startTime;

    var ms = , msMin = Infinity, msMax = ;

    var fps = , fpsMin = Infinity, fpsMax = ;

    var frames = , mode = ;

    var container = document.createElement( 'div' );

    container.id = 'stats';

    container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode %  ) }, false );

    container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';

    var fpsDiv = document.createElement( 'div' );

    fpsDiv.id = 'fps';

    fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';

    container.appendChild( fpsDiv );

    var fpsText = document.createElement( 'div' );

    fpsText.id = 'fpsText';

    fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';

    fpsText.innerHTML = 'FPS';

    fpsDiv.appendChild( fpsText );

    var fpsGraph = document.createElement( 'div' );

    fpsGraph.id = 'fpsGraph';

    fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';

    fpsDiv.appendChild( fpsGraph );

    while ( fpsGraph.children.length <  ) {

        var bar = document.createElement( 'span' );

        bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';

        fpsGraph.appendChild( bar );

    }

    var msDiv = document.createElement( 'div' );

    msDiv.id = 'ms';

    msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';

    container.appendChild( msDiv );

    var msText = document.createElement( 'div' );

    msText.id = 'msText';

    msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';

    msText.innerHTML = 'MS';

    msDiv.appendChild( msText );

    var msGraph = document.createElement( 'div' );

    msGraph.id = 'msGraph';

    msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';

    msDiv.appendChild( msGraph );

    while ( msGraph.children.length <  ) {

        var bar = document.createElement( 'span' );

        bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';

        msGraph.appendChild( bar );

    }

    var setMode = function ( value ) {

        mode = value;

        switch ( mode ) {

            case :

                fpsDiv.style.display = 'block';

                msDiv.style.display = 'none';

                break;

            case :

                fpsDiv.style.display = 'none';

                msDiv.style.display = 'block';

                break;

        }

    }

    var updateGraph = function ( dom, value ) {

        var child = dom.appendChild( dom.firstChild );

        child.style.height = value + 'px';

    }

    return {

        REVISION: ,

        domElement: container,

        setMode: setMode,

        begin: function () {

            startTime = Date.now();

        },

        end: function () {

            var time = Date.now();

            ms = time - startTime;

            msMin = Math.min( msMin, ms );

            msMax = Math.max( msMax, ms );

            msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';

            updateGraph( msGraph, Math.min( ,  - ( ms /  ) *  ) );

            frames ++;

            if ( time > prevTime +  ) {

                fps = Math.round( ( frames *  ) / ( time - prevTime ) );

                fpsMin = Math.min( fpsMin, fps );

                fpsMax = Math.max( fpsMax, fps );

                fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';

                updateGraph( fpsGraph, Math.min( ,  - ( fps /  ) *  ) );

                prevTime = time;

                frames = ;

            }

            return time;

        },

        update: function () {

            startTime = this.end();

        }

    }

};

stats.js随时查看fps的更多相关文章

微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定
1:编辑文档无法输入文字出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
dat.gui stats.js 通用参数配置及图像统计工具
在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...
谷歌浏览器插件-html页面js事件查看器
谷歌浏览器插件-html页面js事件查看器 1.下载下载地址:http://files.cnblogs.com/files/graceup/VisualEvent.zip 解压得到文件:Visual ...
iOS小Tip之查看FPS
可能大家有的时候会想要查看app在运行时的帧率能否达到60帧,如果达不到的话,你可能会想着去优化动画或者其它任何会影响显示性能的问题. 但是,你首先要观察到你的FPS,对吧? 我告诉大家一个简单的方法 ...
【jQuery小实例】js 插件查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
使用PDF.JS在线查看PDF
过程简单粗暴. 第一步:下载源码https://github.com/mozilla/pdf.js 第二步:将源码拷贝进项目中,可以新建一个PDFShow文件夹存放代码第三步:修改viewer.js ...
JS：指定FPS帧频，requestAnimationFrame播放动画
Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...
viewer.js图片查看器插件（可缩放/旋转/切换）
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
js通过查看屏幕大小，更改其他css属性
首先,我们要知道如何得到屏幕的相关数据. <html><head><title>获取当前对象大小以及屏幕分辨率等</title><body> ...

随机推荐

thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
codeforces 461C
这题说的是给了一张长方形的纸 1*n 然后可以按照不同的做法去折这个纸张他有两种操作,操作1 给了一个pi 点然后将左边的纸往右边折,第2种操作是给了一个L 和 R 然后计算出 L和R 之间的纸 ...
M2C的概念
M2C即Manufacturers to Consumer(生产厂家对消费者),生产厂家(Manufacturers)直接对消费者(Consumers)提供自己生产的产品或服务的一种商业模式,特点是流 ...
CSS3----实现毛玻璃完美效果
其实毛玻璃的模糊效果技术上比较简单,只是用到了 css 滤镜(filter)中的 blur 属性.但是要做一个好的毛玻璃效果,需要注意很多细节. 比如我们需要将上图中页面中间的文字区域变成毛玻璃效果, ...
Linux基础命令---more
more 将内容较长的文本文件内容分屏显示,支持定位关键字.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 ...
使用原生的javascript封装动画函数(有callback功能)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
centos 网卡名称修改
在centos6.4之前,如果6.2,6.3安装后网卡名称都是em开始,如果想用eth0这种名称,或者是自定义名称,可以参照以下来实施. 第一步:修改/boot/grub/grub.conf增加一个 ...
aspose 小记
/// <summary> /// 定位书签替换值 /// </summary> /// <param name="documentBuilder"& ...
20135234mqy-——信息安全系统设计基础第九周学习总结
第十章系统级I/O 10.1 Unix I/O 一个Unix文就是一个m个字节的序列 Unix:将设备映射为文件的方式,允许Unix内核引出一个简单低级的应用接口能够使得所有输入输出都能以一种统一 ...
BZOJ 2594 水管局长数据加强版（动态树）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2594 题意:给出一个无向图,边有权值.定义一条路径的长度为该路径所有边的最大值.两种操作 ...

stats.js随时查看fps

stats.js随时查看fps的更多相关文章

随机推荐

热门专题