Update webgldrawer.js

[sbarex]

Fixed a bug that caused a completely white image to be rendered when two-pass rendering mode was requested (required when multiple images, using transparency, or in debug mode).

[pearcetm]

Thanks for fixing this, looks reasonable to me. Interestingly, even without this change two-pass rendering is working fine in the demo page, I guess because _firstPass.aTexturePosition and _secondPass.aTexturePosition have the same value. Presumably this is not true in your scenario... what setup do you have where this is a problem?

[sbarex]

Yes, in my test the second image has an offset of few pixels (and also a rotation).

I noticed however that there is a flickering during the enlargement/reduction with white squares (or only the bottom layer and the next in deferred) even when the tiles were previously loaded. This does not occur with a single image.

[pearcetm]

When running grunt dev and using the demo page at http://localhost:8000/test/demo/drawercomparison.html you can change lots of settings including offset, rotation, opacity, etc, with multiple images. I still don't see a problem. Do you see the problem you're describing on the demo page too? If so, what browser, operating system and hardware are you on?

I noticed however that there is a flickering during the enlargement/reduction with white squares (or only the bottom layer and the next in deferred) even when the tiles were previously loaded.

And the change you've made here fixes all of those issuse (flickering and white squares), correct?

Since I can't seem to reproduce what you're describing I can't test it myself.

[sbarex]

This PR solve only the image completely white. I noticed the flickering only after fixing this bug which for me is still present.

I had some problems running grunt (Uglifying source build/openseadragon/openseadragon.js failed) but I managed to run the tests successfully:

QUnit 2.19.4; Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

277 tests completed in 30506 milliseconds, with 0 failed, 0 skipped, and 0 todo.
2350 assertions of 2350 passed, 0 failed.

In this image the two drawers works correctly:

Then if I set an opacity or the debug, or clip, or crop, or composite, the WebGL drawer show a white image:

And then with my patch:

I try the drawercomparison.html with 2 images (rainbow grids and leaves) without flickering. But I it seems to me that the leaves image in not tiled. In my app I have 2 tiled images (both 8742 x 11656px, tile of 256x256px).

[pearcetm]

I see you are using Firefox and I was using Chrome. I can reproduce the "white screen" error you were seeing when I also use Firefox. And I can confirm your change fixes the problem :).

Even in Firefox I do not see any flickering. I'm on mac OSX 13.3; I'm not sure if the fact that you are on OSX 10.15 would explain this or not.

I try the drawercomparison.html with 2 images (rainbow grids and leaves) without flickering. But I it seems to me that the leaves image in not tiled.

You are correct, the leaves image is not tiled. You can turn on the Duomo image for a second tiled image.

[sbarex]

Oh, Chrome was not afflicted by the "white screen" bug!

This is the flickering effect, on Chrome 131.0.6778.86, macOS 15.1.1, M4 pro processor:

test.mp4

There are two overlapped images (a lighter image at the bottom, one with more saturated colors above), the above image have an opacity of 0.5.

[pearcetm]

Thanks for the video, it helps to see what is going on.

Does this only happen when there are multiple image and opacity < 1? Or does opacity not matter? What is the cache size set at for your viewer? I wonder if adding extra images means you're running out of cache space and the textures of the lower-resolution tiles are getting unloaded once you've zoomed in a lot, and then are missing when zooming back out.

[sbarex]

With the opacity set to 1 the flickering is still present but less noticeable.

How can I know/change the cache size?

[pearcetm]

With the opacity set to 1 the flickering is still present but less noticeable.

Does it flicker with drawer: 'canvas' too, or only webgl?

How can I know/change the cache size?

It is the maxImageCacheCount setting.

[sbarex]

Flickering also with canvas drawer.
Setting the maxImageCacheCount to a large value (like 800) solve the problem!

This is probably not the right topic to ask, but is it possible to add a personal post-production shader to the webgl drawer (for example to apply a kernel function)? I've currently modified the original drawer code to do so, but it doesn't seem like an elegant solution.

Thanks!

[pearcetm]

Flickering also with canvas drawer.
Setting the maxImageCacheCount to a large value (like 800) solve the problem!

Great! I think in that case, this PR fixes the bug you found. @iangilman I think this can be merged.

If you're loading multiple images like this, setting the maxImageCacheCount setting to a larger value is the right way to eliminate the flicker you're seeing with the smaller default cache size.

Is it possible to add a personal post-production shader to the webgl drawer (for example to apply a kernel function)? I've currently modified the original drawer code to do so, but it doesn't seem like an elegant solution.

There is no official way to do this yet. I've wanted to add such a feature for some time, and I am planning to work on it in the coming months, but if you have a good idea of how an API for such a thing should be structured, you're welcome to make a PR to get the process started!

[sbarex]

Thanks again, if I can develop an elegant solution I will propose it to you!

[iangilman]

Thank you both for working through this!