From c77a7e738618764a247618c3d91e141056206d53 Mon Sep 17 00:00:00 2001 From: Tom 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 = $('
',{style:'position:fixed;top:0;left:0;'}).appendTo('body'); + let labels=$('
',{style:'display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;'}).appendTo(fpscontainer); + $('