From 55f53e8369629c2dd490040bce44abea0961310a Mon Sep 17 00:00:00 2001
From: Paul Cram <paul.cram@techcyte.com>
Date: Tue, 17 Dec 2024 09:59:00 -0500
Subject: [PATCH] Add useTwoPassRendering as an option to the webgl drawer

---
 src/webgldrawer.js              | 3 ++-
 test/demo/drawercomparison.html | 4 ++--
 test/demo/drawercomparison.js   | 6 ++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/webgldrawer.js b/src/webgldrawer.js
index 4e4ca052..b939a46d 100644
--- a/src/webgldrawer.js
+++ b/src/webgldrawer.js
@@ -56,6 +56,7 @@
     * @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport.
     * @param {Element} options.element - Parent element.
     * @param {Number} [options.debugGridColor] - See debugGridColor in {@link OpenSeadragon.Options} for details.
+    * @param {Boolean} [options.useTwoPassRendering] - Always use two pass rendering.
     */
     OpenSeadragon.WebGLDrawer = class WebGLDrawer extends OpenSeadragon.DrawerBase{
         constructor(options){
@@ -322,7 +323,7 @@
                         tiledImage.debugMode
                     );
 
-                    let useTwoPassRendering = useContext2dPipeline || (tiledImage.opacity < 1) || firstTile.tile.hasTransparency;
+                    let useTwoPassRendering = this.options.useTwoPassRendering || useContext2dPipeline || (tiledImage.opacity < 1) || firstTile.tile.hasTransparency;
 
                     // using the context2d pipeline requires a clean rendering (back) buffer to start
                     if(useContext2dPipeline){
diff --git a/test/demo/drawercomparison.html b/test/demo/drawercomparison.html
index e8ca6e48..32e243f2 100644
--- a/test/demo/drawercomparison.html
+++ b/test/demo/drawercomparison.html
@@ -10,7 +10,7 @@
     <script type="module" src="./drawercomparison.js"></script>
     <style type="text/css">
         .content{
-            max-width:960px;
+            max-width:1060px;
             margin: 0 auto;
         }
         .mirrored{
@@ -47,7 +47,7 @@
         }
         .option-grid{
             display: grid;
-            grid-template-columns: 7em 7em 9em 9em 10em 9em;
+            grid-template-columns: 7em 7em 10em 10em 10em 10em;
             /* grid-template-columns: repeat(5, auto); */
         }
         .image-options input[type=number]{
diff --git a/test/demo/drawercomparison.js b/test/demo/drawercomparison.js
index 16acc74e..8008dce2 100644
--- a/test/demo/drawercomparison.js
+++ b/test/demo/drawercomparison.js
@@ -220,6 +220,11 @@ function updateTiledImage(tiledImage, data, value, item){
             } else {
                 tiledImage.debugMode = false;
             }
+        } else if (field == 'twoPassRendering'){
+            const checked = $(item).prop('checked');
+            viewer1.drawer.options.useTwoPassRendering = checked;
+            viewer2.drawer.options.useTwoPassRendering = checked;
+            $('[data-field=twoPassRendering]').prop('checked', checked);
         }
     } else {
         //viewer-level option
@@ -361,6 +366,7 @@ function makeImagePickerElement(key, label){
             <label>Composite: <select data-image="" data-field="composite"></select></label>
             <label>Wrap: <select data-image="" data-field="wrapping"></select></label>
             <label>Smoothing: <input type="checkbox" data-image="" data-field="smoothing" checked></label>
+            <label>Two Pass Rendering:<input type="checkbox" data-image="" data-field="twoPassRendering"></label>
         </div>
     </div>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label));