update tile drawing logic

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 );

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

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
+// });