Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
3.4 KiB
167 lines
3.4 KiB
var Stats = function () { |
|
|
|
var mode = 0; |
|
|
|
var container = document.createElement( 'div' ); |
|
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000'; |
|
container.addEventListener( 'click', function ( event ) { |
|
|
|
event.preventDefault(); |
|
showPanel( ++ mode % container.children.length ); |
|
|
|
}, false ); |
|
|
|
// |
|
|
|
function addPanel( panel ) { |
|
|
|
container.appendChild( panel.dom ); |
|
return panel; |
|
|
|
} |
|
|
|
function showPanel( id ) { |
|
|
|
for ( var i = 0; i < container.children.length; i ++ ) { |
|
|
|
container.children[ i ].style.display = i === id ? 'block' : 'none'; |
|
|
|
} |
|
|
|
mode = id; |
|
|
|
} |
|
|
|
// |
|
|
|
var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0; |
|
|
|
var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) ); |
|
var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) ); |
|
|
|
if ( self.performance && self.performance.memory ) { |
|
|
|
var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) ); |
|
|
|
} |
|
|
|
showPanel( 0 ); |
|
|
|
return { |
|
|
|
REVISION: 16, |
|
|
|
dom: container, |
|
|
|
addPanel: addPanel, |
|
showPanel: showPanel, |
|
|
|
begin: function () { |
|
|
|
beginTime = ( performance || Date ).now(); |
|
|
|
}, |
|
|
|
end: function () { |
|
|
|
frames ++; |
|
|
|
var time = ( performance || Date ).now(); |
|
|
|
msPanel.update( time - beginTime, 200 ); |
|
|
|
if ( time >= prevTime + 1000 ) { |
|
|
|
fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 ); |
|
|
|
prevTime = time; |
|
frames = 0; |
|
|
|
if ( memPanel ) { |
|
|
|
var memory = performance.memory; |
|
memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 ); |
|
|
|
} |
|
|
|
} |
|
|
|
return time; |
|
|
|
}, |
|
|
|
update: function () { |
|
|
|
beginTime = this.end(); |
|
|
|
}, |
|
|
|
// Backwards Compatibility |
|
|
|
domElement: container, |
|
setMode: showPanel |
|
|
|
}; |
|
|
|
}; |
|
|
|
Stats.Panel = function ( name, fg, bg ) { |
|
|
|
var min = Infinity, max = 0, round = Math.round; |
|
var PR = round( window.devicePixelRatio || 1 ); |
|
|
|
var WIDTH = 80 * PR, HEIGHT = 48 * PR, |
|
TEXT_X = 3 * PR, TEXT_Y = 2 * PR, |
|
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR, |
|
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR; |
|
|
|
var canvas = document.createElement( 'canvas' ); |
|
canvas.width = WIDTH; |
|
canvas.height = HEIGHT; |
|
canvas.style.cssText = 'width:80px;height:48px'; |
|
|
|
var context = canvas.getContext( '2d' ); |
|
context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif'; |
|
context.textBaseline = 'top'; |
|
|
|
context.fillStyle = bg; |
|
context.fillRect( 0, 0, WIDTH, HEIGHT ); |
|
|
|
context.fillStyle = fg; |
|
context.fillText( name, TEXT_X, TEXT_Y ); |
|
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); |
|
|
|
context.fillStyle = bg; |
|
context.globalAlpha = 0.9; |
|
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT ); |
|
|
|
return { |
|
|
|
dom: canvas, |
|
|
|
update: function ( value, maxValue ) { |
|
|
|
min = Math.min( min, value ); |
|
max = Math.max( max, value ); |
|
|
|
context.fillStyle = bg; |
|
context.globalAlpha = 1; |
|
context.fillRect( 0, 0, WIDTH, GRAPH_Y ); |
|
context.fillStyle = fg; |
|
context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y ); |
|
|
|
context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT ); |
|
|
|
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT ); |
|
|
|
context.fillStyle = bg; |
|
context.globalAlpha = 0.9; |
|
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) ); |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
export default Stats;
|
|
|