Add useTwoPassRendering as an option to the webgl drawer

This commit is contained in:
Paul Cram 2024-12-17 09:59:00 -05:00
parent acb7563257
commit 55f53e8369
3 changed files with 10 additions and 3 deletions

View File

@ -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){

View File

@ -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]{

View File

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