From c77a7e738618764a247618c3d91e141056206d53 Mon Sep 17 00:00:00 2001
From: Tom <tmpearce@gmail.com>
Date: Fri, 28 Jul 2023 17:49:24 -0400
Subject: [PATCH] enhance performance demo. rename variables for clarity.
---
src/webgldrawer.js | 15 +--
test/demo/drawerperformance.js | 220 +++++++++++++++++++++++++++++++--
test/demo/webgldemodrawer.js | 17 +--
3 files changed, 229 insertions(+), 23 deletions(-)
diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index 2a9740fd..0d34e299 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -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);
}
diff --git a/test/demo/drawerperformance.js b/test/demo/drawerperformance.js
index 66908e08..56d1b4fc 100644
--- a/test/demo/drawerperformance.js
+++ b/test/demo/drawerperformance.js
@@ -15,15 +15,218 @@ const labels = {
}
let viewer;
+/**
+ * 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();
+
+ }
+
+
+};
+
+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(){
- var script=document.createElement('script');
- script.onload=function(){
- var stats=new Stats();
- document.body.appendChild(stats.dom);
- requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});
+
+
+ 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();
};
- script.src='https://mrdoob.github.io/stats.js/build/stats.min.js';
- document.head.appendChild(script);
+
+ 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){
})
}
+
diff --git a/test/demo/webgldemodrawer.js b/test/demo/webgldemodrawer.js
index 095e228b..e6d86f04 100644
--- a/test/demo/webgldemodrawer.js
+++ b/test/demo/webgldemodrawer.js
@@ -302,8 +302,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();
@@ -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);
}