mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-23 18:23:13 +03:00
Code Issues Projects Releases Wiki Activity

Add useTwoPassRendering as an option to the webgl drawer

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/webgldrawer.js
View File

@ -56,6 +56,7 @@
* @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport. * @param {OpenSeadragon.Viewport} options.viewport - Reference to Viewer viewport.
* @param {Element} options.element - Parent element. * @param {Element} options.element - Parent element.
* @param {Number} [options.debugGridColor] - See debugGridColor in {@link OpenSeadragon.Options} for details. * @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{ OpenSeadragon.WebGLDrawer = class WebGLDrawer extends OpenSeadragon.DrawerBase{
constructor(options){ constructor(options){
@ -322,7 +323,7 @@
tiledImage.debugMode 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 // using the context2d pipeline requires a clean rendering (back) buffer to start
if(useContext2dPipeline){ if(useContext2dPipeline){

4
test/demo/drawercomparison.html
View File

@ -10,7 +10,7 @@
<script type="module" src="./drawercomparison.js"></script> <script type="module" src="./drawercomparison.js"></script>
<style type="text/css"> <style type="text/css">
.content{ .content{
max-width:960px; max-width:1060px;
margin: 0 auto; margin: 0 auto;
} }
.mirrored{ .mirrored{
@ -47,7 +47,7 @@
} }
.option-grid{ .option-grid{
display: 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); */ /* grid-template-columns: repeat(5, auto); */
} }
.image-options input[type=number]{ .image-options input[type=number]{

6
test/demo/drawercomparison.js
View File

@ -220,6 +220,11 @@ function updateTiledImage(tiledImage, data, value, item){
} else { } else {
tiledImage.debugMode = false; 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 { } else {
//viewer-level option //viewer-level option
@ -361,6 +366,7 @@ function makeImagePickerElement(key, label){
<label>Composite: <select data-image="" data-field="composite"></select></label> <label>Composite: <select data-image="" data-field="composite"></select></label>
<label>Wrap: <select data-image="" data-field="wrapping"></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>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>
</div>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label)); </div>`.replaceAll('data-image=""', `data-image="${key}"`).replace('__title__', label));