From 1bc93be3f25663935895ebc481499a7f7ca8d433 Mon Sep 17 00:00:00 2001 From: Tom Date: Tue, 6 Jun 2023 19:37:24 -0400 Subject: [PATCH] update tile drawing logic --- src/tiledimage.js | 36 +++++++++++++++++++++++++++++++----- test/demo/threejsdrawer.js | 7 ++++--- test/demo/webgl.js | 30 +++++++++++++++--------------- 3 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src/tiledimage.js b/src/tiledimage.js index a8d937b0..219e0507 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1290,8 +1290,32 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag return; } + // make a list of levels to use for the current zoom level + var levelList = new Array(highestLevel - lowestLevel + 1); + // go from highest to lowest resolution + for(let i = 0, level = highestLevel; level >= lowestLevel; level--, i++){ + levelList[i] = level; + } + // if a single-tile level is loaded, add that to the end of the list + // as a fallback to use during zooming out, until a lower-res tile is + // loaded + for(let level = highestLevel + 1; level <= this.source.maxLevel; level++){ + var tile = ( + this.tilesMatrix[level] && + this.tilesMatrix[level][0] && + this.tilesMatrix[level][0][0] + ); + if(tile && tile.isBottomMost && tile.isRightMost && tile.loaded){ + levelList.push(level); + levelList.hasHigherResolutionFallback = true; + break; + } + } + + // Update any level that will be drawn - for (var level = highestLevel; level >= lowestLevel; level--) { + for (let i = 0; i < levelList.length; i++) { + let level = levelList[i]; var drawLevel = false; //Avoid calculations for draw if we have already drawn this @@ -1300,8 +1324,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag true ).x * this._scaleSpring.current.value; - if (level === lowestLevel || - (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio)) { + if (i === levelList.length - 1 || + (!haveDrawn && currentRenderPixelRatio >= this.minPixelRatio) ) { drawLevel = true; haveDrawn = true; } else if (!haveDrawn) { @@ -1562,8 +1586,8 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag } var result = this._updateTile( - drawLevel, haveDrawn, + drawLevel, flippedX, y, level, levelVisibility, @@ -1687,7 +1711,9 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag best: best }; } - + if (tile.loaded && tile.opacity === 1){ + this._setCoverage( this.coverage, level, x, y, true ); + } if ( haveDrawn && !drawTile ) { if ( this._isCovered( this.coverage, level, x, y ) ) { this._setCoverage( this.coverage, level, x, y, true ); diff --git a/test/demo/threejsdrawer.js b/test/demo/threejsdrawer.js index eea58e32..9c0f6d5e 100644 --- a/test/demo/threejsdrawer.js +++ b/test/demo/threejsdrawer.js @@ -103,7 +103,7 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{ } this._stats && this._stats.end(); - console.log(this._renderer.info.memory, this._renderer.info.render.triangles); + // console.log(this._renderer.info.memory, this._renderer.info.render.triangles); } renderContinuously(continuously){ if(continuously){ @@ -397,8 +397,9 @@ export class ThreeJSDrawer extends OpenSeadragon.DrawerBase{ _updateMeshIfNeeded(tiledImage){ let tileContainer = this._tiledImageMap[tiledImage[this._uuid]].userData.tileContainer; let scene = this._tiledImageMap[tiledImage[this._uuid]] - let levelsInterval = tiledImage._getLevelsInterval(); - let level = levelsInterval.highestLevel; + // let levelsInterval = tiledImage._getLevelsInterval(); + // let level = levelsInterval.highestLevel; + let level = Math.max(...tiledImage.getTilesToDraw().map(tile => tile.level)); if(scene.userData.currentLevel === level){ //we are already drawing the highest-resolution tiles, just return diff --git a/test/demo/webgl.js b/test/demo/webgl.js index b50fbc64..87a0fd56 100644 --- a/test/demo/webgl.js +++ b/test/demo/webgl.js @@ -1,6 +1,6 @@ //imports import { ThreeJSDrawer } from './threejsdrawer.js'; -import { default as Stats } from "https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.js"; +// import { default as Stats } from "https://cdnjs.cloudflare.com/ajax/libs/stats.js/17/Stats.js"; //globals // const canvas = document.querySelector('#three-canvas'); const sources = { @@ -20,9 +20,9 @@ const labels = { } var stats = null; -var stats = new Stats(); -stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom -document.body.appendChild( stats.dom ); +// var stats = new Stats(); +// stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom +// document.body.appendChild( stats.dom ); //Double viewer setup for comparison - CanvasDrawer and ThreeJSDrawer @@ -57,17 +57,17 @@ viewer.addHandler("resize", function(){ // Single viewer showing how to use plugin Drawer via configuration // Also shows sequence mode -var viewer2 = window.viewer2 = OpenSeadragon({ - id: "three-viewer", - prefixUrl: "../../build/openseadragon/images/", - minZoomImageRatio:0.01, - customDrawer: ThreeJSDrawer, - tileSources: [sources['leaves'], sources['rainbow'], sources['duomo']], - sequenceMode: true, - imageSmoothingEnabled: false, - crossOriginPolicy: 'Anonymous', - ajaxWithCredentials: false -}); +// var viewer2 = window.viewer2 = OpenSeadragon({ +// id: "three-viewer", +// prefixUrl: "../../build/openseadragon/images/", +// minZoomImageRatio:0.01, +// customDrawer: ThreeJSDrawer, +// tileSources: [sources['leaves'], sources['rainbow'], sources['duomo']], +// sequenceMode: true, +// imageSmoothingEnabled: false, +// crossOriginPolicy: 'Anonymous', +// ajaxWithCredentials: false +// });