WebGL / Add support for patterns in polygons and lines #15279

jahow · 2023-10-28T13:17:57Z

This PR adds support for fill and stroke patterns using the following properties of the flat WebGL-specific style:

fill-pattern-src ~~and fill-pattern-img~~
fill-pattern-offset, fill-pattern-offset-origin and fill-pattern-size
stroke-pattern-src ~~and stroke-pattern-img~~
stroke-pattern-offset, stroke-pattern-offset-origin and stroke-pattern-size
stroke-pattern-spacing

These properties work the same way as the icon- properties, letting the user specify an image either as a path ~~or an Image or Canvas instance~~; the offset properties let the user specify a image in a spritesheet.

I didn't reproduce the current API which accepts CanvasPattern and CanvasGradient because:

it is tailor-made for the Canvas2D API and has limitations for WebGL (a texture can be created out of it, but the dimensions are not known)
doesn't let the user pick a sprite in a spritesheet
is not serializable

Fill pattern

Fill patterns have an origin which can be [0,0] in case of vector layers, or the tile origin in case of vector tiles. Patterns are slightly upscaled/downscaled when zooming to match integer zoom levels:

Fill patterns are tinted by the fill color if specified.

(note: I didn't touch the actual webgl vector example)

Stroke pattern

Stroke patterns are scaled to match the line width. They are tinted by the line color if specified. I also worked on fixing the distance computation along the line when applying an offset; before this PR, the computation was off and symbols were clearly not lining up at the joins. Now the symbols line up, although the interpolation the joins still needs work:

Before:

After:

Note: providing Canvas or Image for fill patterns, stroke patterns or icons is not supported anymore. Use data URLs or object URLs instead.

For clarity; now there is style/flat.js and style/webgl.js

github-actions · 2023-10-28T13:26:52Z

📦 Preview the website for this branch here: https://deploy-preview-15279--ol-site.netlify.app/.

… of a style

This is necessary for dashes/symbols to render correctly along the line when an offset is applied. To do this we need to store an additional information for each vertex: the sum of the tangents of the join angles encountered so far. This will then be multiplied by the current line offset in the vertex shader. Did my best ASCII art to try and explain better what is going on in this part of the code.

ahocevar · 2023-10-28T16:07:31Z

Nice! It should be easy to add support for fill pattern images to the Canvas 2D renderer. Stroke patterns like this will be a bit harder to support in Canvas 2D, because they need to consider the segment angle, but doable.

Regarding the new style properties, I'm wondering if we could get along without fill-pattern-offset-origin and stroke-pattern-offset-origin, because I think we'll be moving towards sprite sheets provided to the layer or map, separate from the styles, and the benefit of specifying the origin is quite minor, compared to always assuming top-left. With separate sprite sheets, we can eventually remove all of these new properties and just have fill-pattern and stroke-pattern instead.

mike-000 · 2023-10-28T18:12:42Z

Fill is not working in the deploy preview on some setups when there is no feature detected

(also hit detection reports "Faroe Islands boreal grasslands" for every feature - but that is not caused by this PR as it also happens in main).

jahow · 2023-10-28T20:03:12Z

Nice! It should be easy to add support for fill pattern images to the Canvas 2D renderer. Stroke patterns like this will be a bit harder to support in Canvas 2D, because they need to consider the segment angle, but doable.

Good to hear, feature parity would be awesome.

Regarding the new style properties, I'm wondering if we could get along without fill-pattern-offset-origin and stroke-pattern-offset-origin, because I think we'll be moving towards sprite sheets provided to the layer or map, separate from the styles, and the benefit of specifying the origin is quite minor, compared to always assuming top-left. With separate sprite sheets, we can eventually remove all of these new properties and just have fill-pattern and stroke-pattern instead.

The offset-origin properties are definitely not essential, but I figured they might still be a useful feature, and they don't bring that much complexity. So I don't really have a strong opinion either way.

Fill is not working in the deploy preview on some setups when there is no feature detected

@mike-000 could you please tell me on which platform you witnessed this? Thanks a lot!!

mike-000 · 2023-10-28T21:42:21Z

One of the systems mentioned in #13367 (comment) where until now there were no problems with WebGL, only WebGL2. In this case Firefox is also affected. The same ANGLE backend change will fix Chrome and Edge, I am not sure what can be done for Firefox.

Results for https://webglreport.com/?v=1 with Chrome

default settings (with the issue)

and with Angle backend set to D3D11on12 in flags (no issue but slow)

jahow · 2023-10-29T10:38:18Z

Thanks @mike-000 I could reproduce the issue (false hit detection + missing fill) using an emulated win10 system running both FF and Chrome; it's not related to this PR though.

This looks like an ANGLE-related issue. I will look into this, see if there's anything that can be done on OL side.

mike-000 · 2023-10-29T10:47:08Z

I have seen missing fill in the example in main as well now, so cannot be related to this PR. Both issues can also been seen in the deploy preview for #15121 so probably started with that. Chrome on Android also has the false hit detection issue.

tschaub · 2023-10-30T19:52:09Z

src/ol/style/webgl.js

- * @property {ColorExpression} [fill-color] The fill color.
+ * @property {ColorExpression} [fill-color] Fill color.
+ * @property {string} [fill-pattern-src] Fill pattern image source URI. If `fill-color` is defined as well, it will be used to tint this image.
+ * @property {HTMLImageElement|HTMLCanvasElement} [fill-pattern-img] Fill pattern image object. Can be provided as an alternative to `fill-pattern-src`.


Accepting an image here is at odds with the goal of parsing styles and preparing attribute buffers in a worker. But we could wait until we are doing that and then deal with this then.

Absolutely, and a procedurally-generated image could easily be made into an object URL that could then be read from a worker.

I really went with a conservative approach here and mimicked the existing icon properties (also true for the origin-offset properties which @ahocevar mentioned). But I'm considering removing the code path for Image objects entirely, as there's no point in introducing APIs which we know are not aligned with long-term goals anyway.

edit: I thought this was present in the flat style as well but it isn't; I'll get rid of Image support in WebGL styles in this PR then

tschaub · 2023-10-30T19:55:16Z

src/ol/style/webgl.js

- * be functions and are made up of simple objects instead of classes.
- * @module ol/style/literal
+ * WebGL style objects slightly differ from standard flat styles for certain properties
+ * @module ol/style/webgl


Feels like we should work toward having a single place for these types. I think it would be preferable to have a single set of types and then to allow the implementations to differ (or be incomplete) rather than having two sets of types.

This is definitely what I'm aiming for. Having a separate type for WebGL renderers is helpful to keep track of where we stand and what is the gap between the two style formats, but it's not a situation that we want to keep eternally.

There is still some work to close this gap though, mainly around the concept of rules; I plan on addressing this later on while optimizing the way features are filtered out before rendering in WebGL.

tschaub · 2023-10-30T19:57:13Z

Really impressive work, @jahow. I only left a couple general comments that I'm curious to hear your thoughts on, but think this looks good to go.

A procedurally-generated image can either be turned into a data url or object url and then fed to the corresponding `*-src` property

jahow · 2023-10-31T10:20:43Z

@tschaub I added a commit to remove all traces of -img properties (for icons, fill patterns and stroke patterns), thus bringing the webgl style closer to the flat one.

mike-000 · 2023-11-01T14:55:27Z

The docs describe the action of fill-color/stroke-color on patterns as "to tint". As in #15290 was it intentional for this to affect the alpha of the pattern?

jahow · 2023-11-01T15:45:33Z

The docs describe the action of fill-color/stroke-color on patterns as "to tint". As in #15290 was it intentional for this to affect the alpha of the pattern?

Yes absolutely, being able to get a translucent pattern is one benefit of the "tinting" behavior. Maybe the doc could clarify that tinting means multiplying colors?

mike-000 · 2023-11-02T20:32:41Z

@jahow That makes sense. Applying icon-color of [255, 0, 0, 0.25) in canvas currently has the same effect as [255, 191, 191, 1] (which is the result of applying [255, 0, 0, 0.25] over a white canvas) so [255, 191, 191, 1] should always be used to achieve that, and the bug is [255, 0, 0, 0.25] not multiplying correctly in canvas styles.

mike-000 · 2023-11-05T00:52:05Z

Options to scale/resize patterns would be useful. For example the Esri feature style linked in #15095 (comment) (reproduced in https://codesandbox.io/s/vector-esri-forked-3ly3ry?file=/main.js) contains a data url for the icon pattern (which produces a 256 x 256 image) in the eastern-most polygon and specifies a smaller (64 pixel) width and height to be used in the pattern

This could be specified as

  'fill-pattern-src': 'data:' + symbol.contentType + ';base64,' + symbol.imageData,
  'fill-pattern-width': symbol.width,
  'fill-pattern-height': symbol.height,

but without support for that the data url would need be to be asynchronously loaded to an image, then scaled in canvas to produce another data url.

jahow · 2023-11-05T09:39:47Z

I agree @mike-000, but with the limited resources available we're trying to aim for supporting Mapbox Style features, and the spec does not offer any option for scaling fill patterns.

jahow added 4 commits October 27, 2023 11:18

add pattern properties to webgl style

0483fd0

Rename literal.js~LiteralStyle to webgl.js~WebGLStyle

2037399

For clarity; now there is style/flat.js and style/webgl.js

Style in expression parsing context can be flat or webgl

a525b6f

WebGL / Add PATTERN_ORIGIN uniform for fill patterns

62de655

jahow added 6 commits October 28, 2023 16:04

WebGL / Introduce a computeHash utility for indentifying unique parts…

789d630

… of a style

WebGL / support for stroke and fill pattern (image)

472f620

Add stroke pattern option to webgl-draw-line example

9a469fa

Add rendering tests for stroke-pattern and fill-pattern

c0e39a4

Update rendering test results

acc364e

jahow force-pushed the webgl-image-fill branch from 8712729 to acc364e Compare October 28, 2023 14:08

tschaub reviewed Oct 30, 2023

View reviewed changes

tschaub approved these changes Oct 30, 2023

View reviewed changes

WebGL / remove support for patterns provided as Image

bb7b633

A procedurally-generated image can either be turned into a data url or object url and then fed to the corresponding `*-src` property

mike-000 mentioned this pull request Nov 5, 2023

Rendering issue with rotated WebGLVector layer on some systems #15297

Open

mike-000 mentioned this pull request Nov 5, 2023

Fill pattern scaling based on pixel ratios #15299

Open

jahow merged commit 40d3ed3 into openlayers:main Nov 6, 2023
8 checks passed

jahow deleted the webgl-image-fill branch November 6, 2023 09:11

This was referenced Nov 10, 2023

WebGL / Fix pattern fill issues with vector tiles #15317

Merged

WebGL / Fix hit detection for vector layers #15340

Merged

This was referenced May 16, 2024

fix(deps): update dependency ol to v9 ivaoth/whazzup-tracker#1364

Open

Update dependency ol to v9 SPURB/mapa-consulta-arco-pinheiros#63

Open

Update dependency ol to v9 SPURB/mapa-consulta-setor-central#102

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebGL / Add support for patterns in polygons and lines #15279

WebGL / Add support for patterns in polygons and lines #15279

jahow commented Oct 28, 2023 •

edited

github-actions bot commented Oct 28, 2023

ahocevar commented Oct 28, 2023

mike-000 commented Oct 28, 2023

jahow commented Oct 28, 2023

mike-000 commented Oct 28, 2023

jahow commented Oct 29, 2023

mike-000 commented Oct 29, 2023 •

edited

tschaub Oct 30, 2023

jahow Oct 30, 2023 •

edited

tschaub Oct 30, 2023

jahow Oct 30, 2023 •

edited

tschaub commented Oct 30, 2023

jahow commented Oct 31, 2023 •

edited

mike-000 commented Nov 1, 2023

jahow commented Nov 1, 2023

mike-000 commented Nov 2, 2023

mike-000 commented Nov 5, 2023

jahow commented Nov 5, 2023

WebGL / Add support for patterns in polygons and lines #15279

WebGL / Add support for patterns in polygons and lines #15279

Conversation

jahow commented Oct 28, 2023 • edited

Fill pattern

Stroke pattern

github-actions bot commented Oct 28, 2023

ahocevar commented Oct 28, 2023

mike-000 commented Oct 28, 2023

jahow commented Oct 28, 2023

mike-000 commented Oct 28, 2023

jahow commented Oct 29, 2023

mike-000 commented Oct 29, 2023 • edited

tschaub Oct 30, 2023

Choose a reason for hiding this comment

jahow Oct 30, 2023 • edited

Choose a reason for hiding this comment

tschaub Oct 30, 2023

Choose a reason for hiding this comment

jahow Oct 30, 2023 • edited

Choose a reason for hiding this comment

tschaub commented Oct 30, 2023

jahow commented Oct 31, 2023 • edited

mike-000 commented Nov 1, 2023

jahow commented Nov 1, 2023

mike-000 commented Nov 2, 2023

mike-000 commented Nov 5, 2023

jahow commented Nov 5, 2023

jahow commented Oct 28, 2023 •

edited

mike-000 commented Oct 29, 2023 •

edited

jahow Oct 30, 2023 •

edited

jahow Oct 30, 2023 •

edited

jahow commented Oct 31, 2023 •

edited