Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow canvas reuse for WebGL layers #12965

Merged
merged 1 commit into from
Nov 14, 2021
Merged

Allow canvas reuse for WebGL layers #12965

merged 1 commit into from
Nov 14, 2021

Conversation

tschaub
Copy link
Member

@tschaub tschaub commented Nov 6, 2021

The goal of this branch is to make it possible to share canvas elements between WebGL layers.

As with Canvas layers, WebGL layers only share a canvas if they are adjacent in render order and share a class name.

To make for easier review, I'm splitting this work up into a few different pieces:

After the above changes are in, the remaining changes will be about adding a canvas cache key to helpers and sharing canvas elements when helpers are created with the same key. Layer renderers are responsible for generating the key based on whether or not a canvas element can be shared.

Fixes #12800.

src/ol/webgl/Helper.js Outdated Show resolved Hide resolved
@tschaub tschaub marked this pull request as ready for review November 12, 2021 19:09
@tschaub
Copy link
Member Author

tschaub commented Nov 12, 2021

I'm reworking how we manage the map property on layers. Consider this back in draft status.

@tschaub tschaub changed the title Allow canvas reuse for WebGL layers WIP: Allow canvas reuse for WebGL layers Nov 13, 2021
@tschaub
Copy link
Member Author

tschaub commented Nov 13, 2021

I'm going to pull this apart into multiple pull requests to make review easier.

@@ -255,9 +255,6 @@ function parseStyle(style, bandCount) {
* property on the layer object; for example, setting `title: 'My Title'` in the
* options means that `title` is observable, and has get/set accessors.
*
* **Important**: after removing a `WebGLTile` layer from your map, call `layer.dispose()`
* to clean up underlying resources.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cleanup of the canvas and associated resources happens when you remove a layer from the map now.

@tschaub tschaub changed the title WIP: Allow canvas reuse for WebGL layers Allow canvas reuse for WebGL layers Nov 14, 2021
@tschaub
Copy link
Member Author

tschaub commented Nov 14, 2021

This is now ready for review.

Copy link
Contributor

@jahow jahow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this great improvement! I could test it out on the layer swipe example, it works seamlessly. I also tried on the Heatmap example by switching the background to a webgl Tile layer and both layers also shared the same context.

I was worried that this would bring too much complexity to the renderer but, as it is now, I think that's not the case. Nothing to add on my side, great implementation, thanks again!


varying vec2 v_texCoord;

void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
gl_FragColor = texture2D(u_image, v_texCoord) * u_opacity;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, this way opacity can be handled per layer without bailing on context sharing!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very smart indeed!

src/ol/renderer/webgl/Layer.js Outdated Show resolved Hide resolved
@tschaub tschaub merged commit c8da29c into openlayers:main Nov 14, 2021
@tschaub tschaub deleted the shared-context branch November 14, 2021 19:43
Copy link
Member

@ahocevar ahocevar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work, especially the opacity handling. Thanks, @tschaub.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Reduce the number of WebGL contexts required
3 participants