Add support for drawing points with WebGL #2967

elemoine · 2014-11-21T17:24:47Z

This PR adds support for drawing points with WebGL.

Both icons and symbols are supported, and all the icon/symbol styling properties supported by the Canvas renderer are also supported by the WebGL renderer.

We've added two new examples, one with icons and one with symbols. See

(These examples use WebGL by default but ?renderer=canvas can be appended to the URL to use Canvas for comparison.)

The vector API is unchanged. But you have to use an AtlasManager for symbols if you want to get good performance with WebGL:

var atlasManager = new ol.style.AtlasManager();
var circle = new ol.style.Circle({
  // …
  atlasManager: atlasManager
});

It should still work w/o the atlas manager, but it will be a lot less performant. The same problem exists for icons. But for icons the application developer is responsible for creating sprites to get good performance.

The symbol-atlas-webgl example shows how to use an atlas manager. The icon-sprite-webgl example shows how to use an icon sprite.

Drawing points at postcompose time, with the immediate API or with feature overlays, is also supported. The dynamic-data and draw-features examples can now be loaded with ?renderer=webgl in the URL to see this working.

What this PR does not include: Hit Detection. This is our next (big) step! We will start working on it as soon as this PR is merged.

A final note about the commit history:

This PR includes a lot of commits, including merge commits. But we decided not to rewrite the commit for this PR. It is a large work, so it makes sense not too loose the history. And we have merge commits that point to PRs on http://github.com/camptocamp/ol3, with valuable information on the code.

Please review.

[webgl-point] Make WebGL image replay support icon sprites

Clean up WebGL replay code

[webgl-point] Refactoring and fixes

[webgl-point] Merge openlayers:master into the branch

[webgl-point] Add support for icon anchors

[webgl-point] Add support for icon opacity

Address precision/jitter problems by using coordinates relative to the Replay max extent rather that the world.

[webgl-point] Address precision/jitter problems

tschaub · 2014-11-22T21:16:56Z

src/ol/style/atlasmanager.js

+   * @private
+   * @type {number}
+   */
+  this.maxSize_ = goog.isDef(options.maxSize) ? options.maxSize : 2048;


Why isn't this set to ol.has.WEBGL_MAX_TEXTURE_SIZE by default (or ol.WEBGL_MAX_TEXTURE_SIZE if renamed)?

The original idea was that the atlas manager is independent from WebGL. But I have no problem with setting ol.WEBGL_MAX_TEXTURE_SIZE as default.

So maybe it should be called ol.MAX_ATLAS_SIZE or something more appropriate.

ol.WEBGL_MAX_TEXTURE_SIZE is used as the maximum atlas size, that's right. But I would like to make it clear that this value is actually the WebGL constant MAX_TEXTURE_SIZE. Also, later the constant might be used elsewhere.

tschaub · 2014-11-22T21:22:30Z

I haven't reviewed thoroughly yet, but I'm curious if you considered making it so a renderer would create an atlas manager. I understand there are cases where it needs to be configured, but it would be nice to avoid poor(er) performance by default if possible.

tschaub · 2014-11-22T21:25:38Z

examples/icon-sprite-webgl.html

+          <p id="shortdesc">Icon sprite with WebGL.</p>
+          <div id="docs">
+            <p>See the <a href="icon-sprite-webgl.js" target="_blank">icon-sprite-webgl.js source</a> to see how this is done.</p>
+            <p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performances with WebGL.</p>


Performance should be singular.

elemoine · 2014-11-24T09:50:44Z

I haven't reviewed thoroughly yet, but I'm curious if you considered making it so a renderer would create an atlas manager. I understand there are cases where it needs to be configured, but it would be nice to avoid poor(er) performance by default if possible.

Yes, we discussed and considered having the renderer create an atlas manager, and render symbols in atlases at prepareFrame time.

But we identified several issues with that approach:

Currently the renderer handles icons and symbols the same way. They're just "image" styles for the renderer. If the renderer uses an atlas manager for symbols then it needs to know whether it is handling an icon or a symbol. This would make the renderer code a lot messier. Especially when considering that this needs to work with layers, feature overlays and the immediate API.
By having the renderer itself manage the rendering of symbols in atlases we bind symbol styles to a map: symbols styles include a reference to an atlas that is associated to a map. Then what will happen if the icon is used in multiple maps? To handle that case we cannot have symbols have a reference to their atlas. But if we change the relationship direction, and have atlases include references to their symbols instead, then we again need to handle icons and symbols in a very different way.
Currently symbols render themselves at construction time. If the renderer has an atlas manager then it means the rendering of symbols will occur at map rendering time. This means that we'd also need to change the code of Canvas and DOM renderers.
For icons we decided that the user is responsible for using sprites for good performance with WebGL. (This is also how MapBox GL JS works.) So it feels natural that the user has the same responsibility for symbols.

So, based on our discussions, and because of the issues described above, we decided not to go with the "renderer creates atlas manager" approach.

If we really wanted good WebGL performance by default, and we know that using atlases doesn't have a negative impact with Canvas, then I'd personally use a global atlas manager instance (ol.style.atlasManager), while keeping the possibility to pass an atlas manager to the symbol constructor for maximum flexibility. This wouldn't change the API and can be introduced later if necessary.

Thank you for your comments.

elemoine · 2014-12-02T19:27:19Z

We're going to resume the work on WebGL Points this week (hit detection), so we'd like to merge this to avoid too much branch juggling. We're also happy to get more review comments and make changes. Thanks!

tschaub · 2014-12-02T20:43:45Z

examples/symbol-atlas-webgl.html

+          <h4 id="title">Symbols with WebGL example</h4>
+          <p id="shortdesc">Using symbols in an atlas with WebGL.</p>
+          <div id="docs">
+            <p>See the <a href="symbol-atlas-webgl.js" target="_blank">symbol-atlas-webgl.js source</a> to see how this is done.</p>


Since you're adding a new concept here, I think this example needs better documentation.

tschaub · 2014-12-02T22:35:13Z

Minor comments above. This is very nice work. Please merge when conflicts are fixed and you think it is ready.

Conflicts: src/ol/style/circlestyle.js src/ol/style/regularshapestyle.js test/spec/ol/style/regularshapestyle.test.js

elemoine · 2014-12-04T12:11:25Z

@tschaub, thanks a lot for your comments. I think we've addressed them all. I'm going to merge this. Feel free to provide more comments on our latest commits, and we will address them with separate PRs. Thanks again.

Add support for drawing points with WebGL

elemoine and others added 30 commits October 27, 2014 09:18

Add very basic webgl vector renderer

33adcd3

Get renderer from query string in vector point examples

9f10839

Use triangles to draw points with WebGL

c8225e4

Remove snap code from synthetic-points example

2ecd2ea

Use texture to draw points with WebGL

bbea205

Add support for icon sprites

9201312

Add Hashable interface

46ec078

Add an icon sprite webgl example

f332cda

Merge pull request #10 from elemoine/icon-sprite

ed1be0d

[webgl-point] Make WebGL image replay support icon sprites

Flatten the WebGL replay class hierarchy

8bff6a1

Better typing, fewer arrays

64bc8f7

Clearer comment

495a7c9

Merge pull request #11 from elemoine/webgl-point-refactor

95d2085

Clean up WebGL replay code

Implement hashCode for ol.style.Circle

22e1159

Make shaders closer to WebGL image replay

4534bb8

Delete ImageReplay textures

14d7f2a

Fix drawElement call

2c92d9a

Merge pull request #12 from elemoine/webgl-point-refactor

787f98c

[webgl-point] Refactoring and fixes

Merge remote-tracking branch 'upstream/master' into webgl-point

46b03e7

Merge pull request #13 from elemoine/webgl-point-merge

c99b177

[webgl-point] Merge openlayers:master into the branch

Support image anchor

05bbfd5

Add atlas manager

1bd3881

Merge pull request #15 from elemoine/webgl-point-anchor

d7a992b

[webgl-point] Add support for icon anchors

Support image opacity

209d39a

Merge pull request #16 from elemoine/webgl-point-opacity

1c9a87d

[webgl-point] Add support for icon opacity

Address precision/jitter problems

28e5174

Address precision/jitter problems by using coordinates relative to the Replay max extent rather that the world.

Double the size when creating new atlases

7618c96

Merge pull request #17 from elemoine/webgl-point-jitter

0115368

[webgl-point] Address precision/jitter problems

Fix type for image replay origin

8415a0c

Use replay maxExtent center as the coord system origin

9029c0f

tschaub reviewed Nov 22, 2014
View reviewed changes

tsauerwein added 2 commits November 24, 2014 09:42

Move constants from ol.has to ol

e307579

Use WEBGL_MAX_TEXTURE_SIZE as default

b8b48af

Fix tests for when not run with WebGL support

d6841e6

tsauerwein mentioned this pull request Nov 27, 2014

Add an example to show off ol.style.RegularShape #2976

Merged

Correct spelling for "performance"

1845665

elemoine mentioned this pull request Nov 29, 2014

Use lineDash in ol.style.Circle's and ol.style.RegularShape's stroke #2981

Merged

tschaub reviewed Dec 2, 2014
View reviewed changes

tsauerwein and others added 6 commits December 4, 2014 09:23

Remove star example in favor of openlayers#2976

88a3fda

Add and fix documentation for atlas manager

b5d8067

Better comment in ivectorcontext.js

aef11b7

Remove @api for ol.render.webgl.Immediate#flush

6d1d47a

Use string instead of ol.structs.Checksum

0fd1a57

Rename size to initialSize

e109be4

tsauerwein force-pushed the webgl-point branch from ed47b80 to e109be4 Compare December 4, 2014 10:50

elemoine added 2 commits December 4, 2014 12:13

Add ol.INITIAL_ATLAS_SIZE and ol.MAX_ATLAS_SIZE

b2e4196

Merge remote-tracking branch 'upstream/master' into webgl-point

87bb1b9

Conflicts: src/ol/style/circlestyle.js src/ol/style/regularshapestyle.js test/spec/ol/style/regularshapestyle.test.js

elemoine pushed a commit that referenced this pull request Dec 4, 2014

Merge pull request #2967 from camptocamp/webgl-point

dfb55fb

Add support for drawing points with WebGL

elemoine merged commit dfb55fb into openlayers:master Dec 4, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for drawing points with WebGL #2967

Add support for drawing points with WebGL #2967

elemoine commented Nov 21, 2014

tschaub Nov 22, 2014

tsauerwein Nov 24, 2014

tschaub Nov 24, 2014

tsauerwein Nov 26, 2014

tschaub commented Nov 22, 2014

tschaub Nov 22, 2014

elemoine commented Nov 24, 2014

elemoine commented Dec 2, 2014

tschaub Dec 2, 2014

tschaub commented Dec 2, 2014

elemoine commented Dec 4, 2014

Add support for drawing points with WebGL #2967

Add support for drawing points with WebGL #2967

Conversation

elemoine commented Nov 21, 2014

tschaub Nov 22, 2014

Choose a reason for hiding this comment

tsauerwein Nov 24, 2014

Choose a reason for hiding this comment

tschaub Nov 24, 2014

Choose a reason for hiding this comment

tsauerwein Nov 26, 2014

Choose a reason for hiding this comment

tschaub commented Nov 22, 2014

tschaub Nov 22, 2014

Choose a reason for hiding this comment

elemoine commented Nov 24, 2014

elemoine commented Dec 2, 2014

tschaub Dec 2, 2014

Choose a reason for hiding this comment

tschaub commented Dec 2, 2014

elemoine commented Dec 4, 2014