Updated rStats
This commit is contained in:
Paul Graffam
parent
6064df572e
commit
2f150b614c
|
|
@ -1,73 +1,86 @@
|
|||
.rs-base{
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
padding: 10px;
|
||||
background-color: #222;
|
||||
font-size: 10px;
|
||||
line-height: 1.2em;
|
||||
width: 350px;
|
||||
font-family: 'Roboto Condensed', tahoma, sans-serif;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
.alarm {
|
||||
color: #b70000;
|
||||
text-shadow: 0 0 0 #b70000,
|
||||
0 0 1px #ffffff,
|
||||
0 0 1px #ffffff,
|
||||
0 0 2px #ffffff,
|
||||
0 0 2px #ffffff,
|
||||
0 0 3px #ffffff,
|
||||
0 0 3px #ffffff,
|
||||
0 0 4px #ffffff,
|
||||
0 0 4px #ffffff;
|
||||
}
|
||||
|
||||
.rs-base h1{
|
||||
.rs-base {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
width: 350px;
|
||||
background-color: #222222;
|
||||
font-size: 10px;
|
||||
font-family: 'Roboto Condensed', tahoma, sans-serif;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.rs-base h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.4em;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
padding: 0;
|
||||
color: #ffffff;
|
||||
font-size: 1.4em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rs-base div.rs-group{
|
||||
.rs-base div.rs-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rs-base div.rs-group.hidden{
|
||||
.rs-base div.rs-group.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rs-base div.rs-fraction{
|
||||
.rs-base div.rs-fraction {
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.rs-base div.rs-fraction p{
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
.rs-base div.rs-fraction p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rs-base div.rs-legend{
|
||||
.rs-base div.rs-legend {
|
||||
position: absolute;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.rs-base div.rs-counter-base{
|
||||
.rs-base div.rs-counter-base {
|
||||
position: relative;
|
||||
margin: 2px 0;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.rs-base span.rs-counter-id{
|
||||
.rs-base span.rs-counter-id {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.rs-base div.rs-counter-value{
|
||||
.rs-base div.rs-counter-value {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 90px;
|
||||
width: 30px;
|
||||
height: 1em;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rs-base canvas.rs-canvas{
|
||||
.rs-base canvas.rs-canvas {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,265 @@
|
|||
window.glStats = function () {
|
||||
|
||||
var _rS = null;
|
||||
|
||||
var _totalDrawArraysCalls = 0,
|
||||
_totalDrawElementsCalls = 0,
|
||||
_totalUseProgramCalls = 0,
|
||||
_totalFaces = 0,
|
||||
_totalVertices = 0,
|
||||
_totalPoints = 0,
|
||||
_totalBindTexures = 0;
|
||||
|
||||
function _h ( f, c ) {
|
||||
return function () {
|
||||
c.apply( this, arguments );
|
||||
f.apply( this, arguments );
|
||||
};
|
||||
}
|
||||
|
||||
WebGLRenderingContext.prototype.drawArrays = _h( WebGLRenderingContext.prototype.drawArrays, function () {
|
||||
_totalDrawArraysCalls++;
|
||||
if ( arguments[ 0 ] == this.POINTS ) _totalPoints += arguments[ 2 ];
|
||||
else _totalVertices += arguments[ 2 ];
|
||||
} );
|
||||
|
||||
WebGLRenderingContext.prototype.drawElements = _h( WebGLRenderingContext.prototype.drawElements, function () {
|
||||
_totalDrawElementsCalls++;
|
||||
_totalFaces += arguments[ 1 ] / 3;
|
||||
_totalVertices += arguments[ 1 ];
|
||||
} );
|
||||
|
||||
WebGLRenderingContext.prototype.useProgram = _h( WebGLRenderingContext.prototype.useProgram, function () {
|
||||
_totalUseProgramCalls++;
|
||||
} );
|
||||
|
||||
WebGLRenderingContext.prototype.bindTexture = _h( WebGLRenderingContext.prototype.bindTexture, function () {
|
||||
_totalBindTexures++;
|
||||
} );
|
||||
|
||||
var _values = {
|
||||
allcalls: {
|
||||
over: 3000,
|
||||
caption: 'Calls (hook)'
|
||||
},
|
||||
drawelements: {
|
||||
caption: 'drawElements (hook)'
|
||||
},
|
||||
drawarrays: {
|
||||
caption: 'drawArrays (hook)'
|
||||
}
|
||||
};
|
||||
|
||||
var _groups = [ {
|
||||
caption: 'WebGL',
|
||||
values: [ 'allcalls', 'drawelements', 'drawarrays', 'useprogram', 'bindtexture', 'glfaces', 'glvertices', 'glpoints' ]
|
||||
} ];
|
||||
|
||||
var _fractions = [ {
|
||||
base: 'allcalls',
|
||||
steps: [ 'drawelements', 'drawarrays' ]
|
||||
} ];
|
||||
|
||||
function _update () {
|
||||
_rS( 'allcalls' ).set( _totalDrawArraysCalls + _totalDrawElementsCalls );
|
||||
_rS( 'drawElements' ).set( _totalDrawElementsCalls );
|
||||
_rS( 'drawArrays' ).set( _totalDrawArraysCalls );
|
||||
_rS( 'bindTexture' ).set( _totalBindTexures );
|
||||
_rS( 'useProgram' ).set( _totalUseProgramCalls );
|
||||
_rS( 'glfaces' ).set( _totalFaces );
|
||||
_rS( 'glvertices' ).set( _totalVertices );
|
||||
_rS( 'glpoints' ).set( _totalPoints );
|
||||
}
|
||||
|
||||
function _start () {
|
||||
_totalDrawArraysCalls = 0;
|
||||
_totalDrawElementsCalls = 0;
|
||||
_totalUseProgramCalls = 0;
|
||||
_totalFaces = 0;
|
||||
_totalVertices = 0;
|
||||
_totalPoints = 0;
|
||||
_totalBindTexures = 0;
|
||||
}
|
||||
|
||||
function _end () {}
|
||||
|
||||
function _attach ( r ) {
|
||||
_rS = r;
|
||||
}
|
||||
|
||||
return {
|
||||
update: _update,
|
||||
start: _start,
|
||||
end: _end,
|
||||
attach: _attach,
|
||||
values: _values,
|
||||
groups: _groups,
|
||||
fractions: _fractions
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
window.threeStats = function ( renderer ) {
|
||||
|
||||
var _rS = null;
|
||||
|
||||
var _values = {
|
||||
'renderer.info.memory.geometries': {
|
||||
caption: 'Geometries'
|
||||
},
|
||||
'renderer.info.memory.textures': {
|
||||
caption: 'Textures'
|
||||
},
|
||||
'renderer.info.programs': {
|
||||
caption: 'Programs'
|
||||
},
|
||||
'renderer.info.render.calls': {
|
||||
caption: 'Calls'
|
||||
},
|
||||
'renderer.info.render.faces': {
|
||||
caption: 'Faces',
|
||||
over: 1000
|
||||
},
|
||||
'renderer.info.render.points': {
|
||||
caption: 'Points'
|
||||
},
|
||||
'renderer.info.render.vertices': {
|
||||
caption: 'Vertices'
|
||||
}
|
||||
};
|
||||
|
||||
var _groups = [ {
|
||||
caption: 'Three.js - Memory',
|
||||
values: [ 'renderer.info.memory.geometries', 'renderer.info.programs', 'renderer.info.memory.textures' ]
|
||||
}, {
|
||||
caption: 'Three.js - Render',
|
||||
values: [ 'renderer.info.render.calls', 'renderer.info.render.faces', 'renderer.info.render.points', 'renderer.info.render.vertices' ]
|
||||
} ];
|
||||
|
||||
var _fractions = [];
|
||||
|
||||
function _update () {
|
||||
|
||||
_rS( 'renderer.info.memory.geometries' ).set( renderer.info.memory.geometries );
|
||||
//_rS( 'renderer.info.programs' ).set( renderer.info.programs.length );
|
||||
_rS( 'renderer.info.memory.textures' ).set( renderer.info.memory.textures );
|
||||
_rS( 'renderer.info.render.calls' ).set( renderer.info.render.calls );
|
||||
_rS( 'renderer.info.render.faces' ).set( renderer.info.render.faces );
|
||||
_rS( 'renderer.info.render.points' ).set( renderer.info.render.points );
|
||||
_rS( 'renderer.info.render.vertices' ).set( renderer.info.render.vertices );
|
||||
|
||||
}
|
||||
|
||||
function _start () {}
|
||||
|
||||
function _end () {}
|
||||
|
||||
function _attach ( r ) {
|
||||
_rS = r;
|
||||
}
|
||||
|
||||
return {
|
||||
update: _update,
|
||||
start: _start,
|
||||
end: _end,
|
||||
attach: _attach,
|
||||
values: _values,
|
||||
groups: _groups,
|
||||
fractions: _fractions
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* From https://github.com/paulirish/memory-stats.js
|
||||
*/
|
||||
|
||||
window.BrowserStats = function () {
|
||||
|
||||
var _rS = null;
|
||||
|
||||
var _usedJSHeapSize = 0,
|
||||
_totalJSHeapSize = 0;
|
||||
|
||||
var memory = {
|
||||
usedJSHeapSize: 0,
|
||||
totalJSHeapSize: 0
|
||||
};
|
||||
|
||||
if ( window.performance && performance.memory )
|
||||
memory = performance.memory;
|
||||
|
||||
if ( memory.totalJSHeapSize === 0 ) {
|
||||
console.warn( 'totalJSHeapSize === 0... performance.memory is only available in Chrome .' );
|
||||
}
|
||||
|
||||
var _values = {
|
||||
memory: {
|
||||
caption: 'Used Memory',
|
||||
average: true,
|
||||
avgMs: 1000,
|
||||
over: 22
|
||||
},
|
||||
total: {
|
||||
caption: 'Total Memory'
|
||||
}
|
||||
};
|
||||
|
||||
var _groups = [ {
|
||||
caption: 'Browser',
|
||||
values: [ 'memory', 'total' ]
|
||||
} ];
|
||||
|
||||
var _fractions = [ {
|
||||
base: 'total',
|
||||
steps: [ 'memory' ]
|
||||
} ];
|
||||
|
||||
var log1024 = Math.log( 1024 );
|
||||
|
||||
function _size ( v ) {
|
||||
|
||||
var precision = 100; //Math.pow(10, 2);
|
||||
var i = Math.floor( Math.log( v ) / log1024 );
|
||||
if( v === 0 ) i = 1;
|
||||
return Math.round( v * precision / Math.pow( 1024, i ) ) / precision; // + ' ' + sizes[i];
|
||||
|
||||
}
|
||||
|
||||
function _update () {
|
||||
_usedJSHeapSize = _size( memory.usedJSHeapSize );
|
||||
_totalJSHeapSize = _size( memory.totalJSHeapSize );
|
||||
|
||||
_rS( 'memory' ).set( _usedJSHeapSize );
|
||||
_rS( 'total' ).set( _totalJSHeapSize );
|
||||
}
|
||||
|
||||
function _start () {
|
||||
_usedJSHeapSize = 0;
|
||||
}
|
||||
|
||||
function _end () {}
|
||||
|
||||
function _attach ( r ) {
|
||||
_rS = r;
|
||||
}
|
||||
|
||||
return {
|
||||
update: _update,
|
||||
start: _start,
|
||||
end: _end,
|
||||
attach: _attach,
|
||||
values: _values,
|
||||
groups: _groups,
|
||||
fractions: _fractions
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
if (typeof module === 'object') {
|
||||
module.exports = {
|
||||
glStats: window.glStats,
|
||||
threeStats: window.threeStats,
|
||||
BrowserStats: window.BrowserStats
|
||||
};
|
||||
}
|
||||
|
|
@ -451,269 +451,3 @@ window.rStats = function rStats ( settings ) {
|
|||
if (typeof module === 'object') {
|
||||
module.exports = window.rStats;
|
||||
}
|
||||
|
||||
window.glStats = function () {
|
||||
|
||||
var _rS = null;
|
||||
|
||||
var _totalDrawArraysCalls = 0,
|
||||
_totalDrawElementsCalls = 0,
|
||||
_totalUseProgramCalls = 0,
|
||||
_totalFaces = 0,
|
||||
_totalVertices = 0,
|
||||
_totalPoints = 0,
|
||||
_totalBindTexures = 0;
|
||||
|
||||
function _h ( f, c ) {
|
||||
return function () {
|
||||
c.apply( this, arguments );
|
||||
f.apply( this, arguments );
|
||||
};
|
||||
}
|
||||
|
||||
WebGLRenderingContext.prototype.drawArrays = _h( WebGLRenderingContext.prototype.drawArrays, function () {
|
||||
_totalDrawArraysCalls++;
|
||||
if ( arguments[ 0 ] == this.POINTS ) _totalPoints += arguments[ 2 ];
|
||||
else _totalVertices += arguments[ 2 ];
|
||||
} );
|
||||
|
||||
WebGLRenderingContext.prototype.drawElements = _h( WebGLRenderingContext.prototype.drawElements, function () {
|
||||
_totalDrawElementsCalls++;
|
||||
_totalFaces += arguments[ 1 ] / 3;
|
||||
_totalVertices += arguments[ 1 ];
|
||||
} );
|
||||
|
||||
WebGLRenderingContext.prototype.useProgram = _h( WebGLRenderingContext.prototype.useProgram, function () {
|
||||
_totalUseProgramCalls++;
|
||||
} );
|
||||
|
||||
WebGLRenderingContext.prototype.bindTexture = _h( WebGLRenderingContext.prototype.bindTexture, function () {
|
||||
_totalBindTexures++;
|
||||
} );
|
||||
|
||||
var _values = {
|
||||
allcalls: {
|
||||
over: 3000,
|
||||
caption: 'Calls (hook)'
|
||||
},
|
||||
drawelements: {
|
||||
caption: 'drawElements (hook)'
|
||||
},
|
||||
drawarrays: {
|
||||
caption: 'drawArrays (hook)'
|
||||
}
|
||||
};
|
||||
|
||||
var _groups = [ {
|
||||
caption: 'WebGL',
|
||||
values: [ 'allcalls', 'drawelements', 'drawarrays', 'useprogram', 'bindtexture', 'glfaces', 'glvertices', 'glpoints' ]
|
||||
} ];
|
||||
|
||||
var _fractions = [ {
|
||||
base: 'allcalls',
|
||||
steps: [ 'drawelements', 'drawarrays' ]
|
||||
} ];
|
||||
|
||||
function _update () {
|
||||
_rS( 'allcalls' ).set( _totalDrawArraysCalls + _totalDrawElementsCalls );
|
||||
_rS( 'drawElements' ).set( _totalDrawElementsCalls );
|
||||
_rS( 'drawArrays' ).set( _totalDrawArraysCalls );
|
||||
_rS( 'bindTexture' ).set( _totalBindTexures );
|
||||
_rS( 'useProgram' ).set( _totalUseProgramCalls );
|
||||
_rS( 'glfaces' ).set( _totalFaces );
|
||||
_rS( 'glvertices' ).set( _totalVertices );
|
||||
_rS( 'glpoints' ).set( _totalPoints );
|
||||
}
|
||||
|
||||
function _start () {
|
||||
_totalDrawArraysCalls = 0;
|
||||
_totalDrawElementsCalls = 0;
|
||||
_totalUseProgramCalls = 0;
|
||||
_totalFaces = 0;
|
||||
_totalVertices = 0;
|
||||
_totalPoints = 0;
|
||||
_totalBindTexures = 0;
|
||||
}
|
||||
|
||||
function _end () {}
|
||||
|
||||
function _attach ( r ) {
|
||||
_rS = r;
|
||||
}
|
||||
|
||||
return {
|
||||
update: _update,
|
||||
start: _start,
|
||||
end: _end,
|
||||
attach: _attach,
|
||||
values: _values,
|
||||
groups: _groups,
|
||||
fractions: _fractions
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
window.threeStats = function ( renderer ) {
|
||||
|
||||
var _rS = null;
|
||||
|
||||
var _values = {
|
||||
'renderer.info.memory.geometries': {
|
||||
caption: 'Geometries'
|
||||
},
|
||||
'renderer.info.memory.textures': {
|
||||
caption: 'Textures'
|
||||
},
|
||||
'renderer.info.programs': {
|
||||
caption: 'Programs'
|
||||
},
|
||||
'renderer.info.render.calls': {
|
||||
caption: 'Calls'
|
||||
},
|
||||
'renderer.info.render.faces': {
|
||||
caption: 'Faces',
|
||||
over: 1000
|
||||
},
|
||||
'renderer.info.render.points': {
|
||||
caption: 'Points'
|
||||
},
|
||||
'renderer.info.render.vertices': {
|
||||
caption: 'Vertices'
|
||||
}
|
||||
};
|
||||
|
||||
var _groups = [ {
|
||||
caption: 'Three.js - Memory',
|
||||
values: [ 'renderer.info.memory.geometries', 'renderer.info.programs', 'renderer.info.memory.textures' ]
|
||||
}, {
|
||||
caption: 'Three.js - Render',
|
||||
values: [ 'renderer.info.render.calls', 'renderer.info.render.faces', 'renderer.info.render.points', 'renderer.info.render.vertices' ]
|
||||
} ];
|
||||
|
||||
var _fractions = [];
|
||||
|
||||
function _update () {
|
||||
|
||||
_rS( 'renderer.info.memory.geometries' ).set( renderer.info.memory.geometries );
|
||||
//_rS( 'renderer.info.programs' ).set( renderer.info.programs.length );
|
||||
_rS( 'renderer.info.memory.textures' ).set( renderer.info.memory.textures );
|
||||
_rS( 'renderer.info.render.calls' ).set( renderer.info.render.calls );
|
||||
_rS( 'renderer.info.render.faces' ).set( renderer.info.render.faces );
|
||||
_rS( 'renderer.info.render.points' ).set( renderer.info.render.points );
|
||||
_rS( 'renderer.info.render.vertices' ).set( renderer.info.render.vertices );
|
||||
|
||||
}
|
||||
|
||||
function _start () {}
|
||||
|
||||
function _end () {}
|
||||
|
||||
function _attach ( r ) {
|
||||
_rS = r;
|
||||
}
|
||||
|
||||
return {
|
||||
update: _update,
|
||||
start: _start,
|
||||
end: _end,
|
||||
attach: _attach,
|
||||
values: _values,
|
||||
groups: _groups,
|
||||
fractions: _fractions
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
* From https://github.com/paulirish/memory-stats.js
|
||||
*/
|
||||
|
||||
window.BrowserStats = function () {
|
||||
|
||||
var _rS = null;
|
||||
|
||||
var _usedJSHeapSize = 0,
|
||||
_totalJSHeapSize = 0;
|
||||
|
||||
var memory = {
|
||||
usedJSHeapSize: 0,
|
||||
totalJSHeapSize: 0
|
||||
};
|
||||
|
||||
if ( window.performance && performance.memory )
|
||||
memory = performance.memory;
|
||||
|
||||
if ( memory.totalJSHeapSize === 0 ) {
|
||||
console.warn( 'totalJSHeapSize === 0... performance.memory is only available in Chrome .' );
|
||||
}
|
||||
|
||||
var _values = {
|
||||
memory: {
|
||||
caption: 'Used Memory',
|
||||
average: true,
|
||||
avgMs: 1000,
|
||||
over: 22
|
||||
},
|
||||
total: {
|
||||
caption: 'Total Memory'
|
||||
}
|
||||
};
|
||||
|
||||
var _groups = [ {
|
||||
caption: 'Browser',
|
||||
values: [ 'memory', 'total' ]
|
||||
} ];
|
||||
|
||||
var _fractions = [ {
|
||||
base: 'total',
|
||||
steps: [ 'memory' ]
|
||||
} ];
|
||||
|
||||
var log1024 = Math.log( 1024 );
|
||||
|
||||
function _size ( v ) {
|
||||
|
||||
var precision = 100; //Math.pow(10, 2);
|
||||
var i = Math.floor( Math.log( v ) / log1024 );
|
||||
if( v === 0 ) i = 1;
|
||||
return Math.round( v * precision / Math.pow( 1024, i ) ) / precision; // + ' ' + sizes[i];
|
||||
|
||||
}
|
||||
|
||||
function _update () {
|
||||
_usedJSHeapSize = _size( memory.usedJSHeapSize );
|
||||
_totalJSHeapSize = _size( memory.totalJSHeapSize );
|
||||
|
||||
_rS( 'memory' ).set( _usedJSHeapSize );
|
||||
_rS( 'total' ).set( _totalJSHeapSize );
|
||||
}
|
||||
|
||||
function _start () {
|
||||
_usedJSHeapSize = 0;
|
||||
}
|
||||
|
||||
function _end () {}
|
||||
|
||||
function _attach ( r ) {
|
||||
_rS = r;
|
||||
}
|
||||
|
||||
return {
|
||||
update: _update,
|
||||
start: _start,
|
||||
end: _end,
|
||||
attach: _attach,
|
||||
values: _values,
|
||||
groups: _groups,
|
||||
fractions: _fractions
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
if (typeof module === 'object') {
|
||||
module.exports = {
|
||||
glStats: window.glStats,
|
||||
threeStats: window.threeStats,
|
||||
BrowserStats: window.BrowserStats
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue