mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-21 20:56:09 +03:00
enhance performance demo. rename variables for clarity.
This commit is contained in:
Tom
parent
d912ff3196
commit
c77a7e7386
@ -214,8 +214,8 @@
|
||||
tiledImage._croppingPolygons ||
|
||||
tiledImage.debugMode
|
||||
);
|
||||
let useTwoPassRendering = useContext2dPipeline || (tiledImage.opacity < 1); // TODO: check hasTransparency in addition to opacity
|
||||
|
||||
let useTwoPassRendering = useContext2dPipeline || (tiledImage.opacity < 1); // TODO: check hasTransparency in addition to opacity
|
||||
|
||||
let tilesToDraw = tiledImage.getTilesToDraw();
|
||||
|
||||
@ -276,20 +276,21 @@
|
||||
// iterate over tiles and add data for each one to the buffers
|
||||
for(let tileIndex = 0; tileIndex < tilesToDraw.length; tileIndex++){
|
||||
let tile = tilesToDraw[tileIndex].tile;
|
||||
let index = tileIndex % maxTextures;
|
||||
let indexInDrawArray = tileIndex % maxTextures;
|
||||
let numTilesToDraw = indexInDrawArray + 1;
|
||||
let tileContext = tile.getCanvasContext();
|
||||
|
||||
let textureInfo = tileContext ? this._TextureMap.get(tileContext.canvas) : null;
|
||||
if(textureInfo){
|
||||
this._getTileData(tile, tiledImage, textureInfo, overallMatrix, index, texturePositionArray, textureDataArray, matrixArray, opacityArray);
|
||||
this._getTileData(tile, tiledImage, textureInfo, overallMatrix, indexInDrawArray, texturePositionArray, textureDataArray, matrixArray, opacityArray);
|
||||
} else {
|
||||
// console.log('No tile info', tile);
|
||||
}
|
||||
if( (index === maxTextures - 1) || (tileIndex === tilesToDraw.length - 1)){
|
||||
if( (numTilesToDraw === maxTextures) || (tileIndex === tilesToDraw.length - 1)){
|
||||
// We've filled up the buffers: time to draw this set of tiles
|
||||
|
||||
// bind each tile's texture to the appropriate gl.TEXTURE#
|
||||
for(let i = 0; i <= index; i++){
|
||||
for(let i = 0; i <= numTilesToDraw; i++){
|
||||
gl.activeTexture(gl.TEXTURE0 + i);
|
||||
gl.bindTexture(gl.TEXTURE_2D, textureDataArray[i]);
|
||||
}
|
||||
@ -316,7 +317,7 @@
|
||||
gl.vertexAttribPointer(this._firstPass.aIndex, 1, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Draw! 6 vertices per tile (2 triangles per rectangle)
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6 * (index + 1) );
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6 * numTilesToDraw );
|
||||
}
|
||||
}
|
||||
|
||||
@ -391,7 +392,7 @@
|
||||
}
|
||||
|
||||
});
|
||||
// TODO: the line below is a test!
|
||||
|
||||
if(renderingBufferHasImageData){
|
||||
this._outputContext.drawImage(this._renderingCanvas, 0, 0);
|
||||
}
|
||||
|
||||
@ -15,15 +15,218 @@ const labels = {
|
||||
}
|
||||
let viewer;
|
||||
|
||||
(function(){
|
||||
var script=document.createElement('script');
|
||||
script.onload=function(){
|
||||
var stats=new Stats();
|
||||
document.body.appendChild(stats.dom);
|
||||
requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});
|
||||
/**
|
||||
* based on https://github.com/mrdoob/stats.js/ by @author mrdoob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
class Stats{
|
||||
constructor(){
|
||||
this.mode = 0;
|
||||
|
||||
var container = this.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 );
|
||||
|
||||
|
||||
this.dom = container;
|
||||
|
||||
this.started = false;
|
||||
|
||||
this.fpsPanel = this.addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
|
||||
this.msPanel = this.addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
|
||||
this.mspsPanel = this.addPanel( new Stats.Panel( 'MSPS', '#0f0', '#020' ) );
|
||||
|
||||
if ( window.performance && window.performance.memory ) {
|
||||
|
||||
this.memPanel = this.addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
|
||||
|
||||
}
|
||||
|
||||
this.showPanel( 0 );
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
|
||||
addPanel( panel ) {
|
||||
|
||||
this.container.appendChild( panel.dom );
|
||||
return panel;
|
||||
|
||||
}
|
||||
|
||||
showPanel( id ) {
|
||||
|
||||
for ( var i = 0; i < this.container.children.length; i ++ ) {
|
||||
|
||||
this.container.children[ i ].style.display = i === id ? 'block' : 'none';
|
||||
|
||||
}
|
||||
|
||||
this.mode = id;
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
|
||||
begin() {
|
||||
|
||||
this.beginTime = ( performance || Date ).now();
|
||||
|
||||
if(!this.started){
|
||||
this.started = true;
|
||||
this.prevTime = this.beginTime;
|
||||
this.frames = 0;
|
||||
this.cumulativeMS = 0;
|
||||
}
|
||||
}
|
||||
|
||||
end() {
|
||||
|
||||
this.frames ++;
|
||||
|
||||
var time = ( performance || Date ).now();
|
||||
|
||||
var interval = time - this.beginTime;
|
||||
|
||||
this.cumulativeMS += interval;
|
||||
|
||||
this.msPanel.update( interval, 200 );
|
||||
|
||||
if ( time >= this.prevTime + 1000 ) {
|
||||
|
||||
this.fpsPanel.update( ( this.frames * 1000 ) / ( time - this.prevTime ), 130 );
|
||||
|
||||
this.mspsPanel.update( ( this.cumulativeMS * 1000 ) / ( time - this.prevTime ), 1100 );
|
||||
|
||||
this.prevTime = time;
|
||||
this.frames = 0;
|
||||
this.cumulativeMS = 0;
|
||||
|
||||
if ( this.memPanel ) {
|
||||
|
||||
var memory = performance.memory;
|
||||
this.memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return time;
|
||||
|
||||
}
|
||||
|
||||
update() {
|
||||
|
||||
this.beginTime = this.end();
|
||||
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';
|
||||
document.head.appendChild(script);
|
||||
|
||||
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 ) );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
(function(){
|
||||
|
||||
|
||||
let fpscontainer = $('<div>',{style:'position:fixed;top:0;left:0;'}).appendTo('body');
|
||||
let labels=$('<div>',{style:'display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;'}).appendTo(fpscontainer);
|
||||
$('<label>').text('FPS').appendTo(labels);
|
||||
$('<label>').text('Update (ms)').appendTo(labels);
|
||||
$('<label>').text('Draw (ms)').appendTo(labels);
|
||||
var statsFPS=new Stats();
|
||||
statsFPS.begin();
|
||||
$(statsFPS.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
|
||||
requestAnimationFrame(function loop(){statsFPS.update();requestAnimationFrame(loop)});
|
||||
|
||||
var statsUpdate=new Stats();
|
||||
$(statsUpdate.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
|
||||
statsUpdate.showPanel(2);
|
||||
|
||||
var statsDraw=new Stats();
|
||||
$(statsDraw.dom).css({position:'relative', display:'inline-block'}).appendTo(fpscontainer);
|
||||
statsDraw.showPanel(2);
|
||||
|
||||
let origUpdate = OpenSeadragon.World.prototype.update;
|
||||
let origDraw = OpenSeadragon.World.prototype.draw;
|
||||
|
||||
OpenSeadragon.World.prototype.update = function(){
|
||||
statsUpdate.begin();
|
||||
origUpdate.call(this, ...arguments);
|
||||
statsUpdate.end();
|
||||
};
|
||||
|
||||
OpenSeadragon.World.prototype.draw = function(){
|
||||
statsDraw.begin();
|
||||
origDraw.call(this, ...arguments);
|
||||
statsDraw.end();
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
|
||||
@ -57,7 +260,7 @@ function run(drawerType, num) {
|
||||
let m = movingLeft ? 1 : -1;
|
||||
movingLeft = m === -1;
|
||||
let dist = viewer.viewport.getBounds().width;
|
||||
viewer.viewport.panBy(new OpenSeadragon.Point( dist * m/2, 0));
|
||||
viewer.viewport.panBy(new OpenSeadragon.Point( dist * m/4, 0));
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
@ -90,3 +293,4 @@ function makeTileSources(num){
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -364,20 +364,21 @@
|
||||
// iterate over tiles and add data for each one to the buffers
|
||||
for(let tileIndex = 0; tileIndex < tilesToDraw.length; tileIndex++){
|
||||
let tile = tilesToDraw[tileIndex].tile;
|
||||
let index = tileIndex % maxTextures;
|
||||
let indexInDrawArray = tileIndex % maxTextures;
|
||||
let numTilesToDraw = indexInDrawArray + 1;
|
||||
let tileContext = tile.getCanvasContext();
|
||||
|
||||
let textureInfo = tileContext ? this._TextureMap.get(tileContext.canvas) : null;
|
||||
if(textureInfo){
|
||||
this._getTileData(tile, tiledImage, textureInfo, overallMatrix, index, texturePositionArray, textureDataArray, matrixArray, opacityArray);
|
||||
this._getTileData(tile, tiledImage, textureInfo, overallMatrix, indexInDrawArray, texturePositionArray, textureDataArray, matrixArray, opacityArray);
|
||||
} else {
|
||||
// console.log('No tile info', tile);
|
||||
}
|
||||
if( (index === maxTextures - 1) || (tileIndex === tilesToDraw.length - 1)){
|
||||
if( (numTilesToDraw === maxTextures) || (tileIndex === tilesToDraw.length - 1)){
|
||||
// We've filled up the buffers: time to draw this set of tiles
|
||||
|
||||
// bind each tile's texture to the appropriate gl.TEXTURE#
|
||||
for(let i = 0; i <= index; i++){
|
||||
for(let i = 0; i <= numTilesToDraw; i++){
|
||||
gl.activeTexture(gl.TEXTURE0 + i);
|
||||
gl.bindTexture(gl.TEXTURE_2D, textureDataArray[i]);
|
||||
}
|
||||
@ -404,7 +405,7 @@
|
||||
gl.vertexAttribPointer(this._firstPass.aIndex, 1, gl.FLOAT, false, 0, 0);
|
||||
|
||||
// Draw! 6 vertices per tile (2 triangles per rectangle)
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6 * (index + 1) );
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6 * numTilesToDraw );
|
||||
}
|
||||
}
|
||||
|
||||
@ -479,7 +480,7 @@
|
||||
}
|
||||
|
||||
});
|
||||
// TODO: the line below is a test!
|
||||
|
||||
if(renderingBufferHasImageData){
|
||||
this._outputContext.drawImage(this._renderingCanvas, 0, 0);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user