Implement AbstractPatterns for WGLMakie

[fatteneder]

Description

Closes #2294

MWE

using FileIO
using WGLMakie
WGLMakie.activate!()

f = Figure()
ax = Axis(f[1, 1])

pattern = Makie.LinePattern(tilesize=(100,100))
img = load(Makie.assetpath("doge.png"))
img_pattern = Pattern(rotr90(img))
p = poly!(ax, Point2f[(0, 0), (2, 0), (3, 1), (1, 1)],
      color = pattern,
      # color = img_pattern,
      strokecolor = :black,
      strokewidth = 1)

display(f)

Type of change

Delete options that do not apply:

• New feature (non-breaking change which adds functionality)

Checklist

• Added an entry in NEWS.md (for new features and breaking changes)

[fatteneder]

It took me a while to get this to work, also because I am new to JavaScript, WebGL and all that. To get the repeating working I copied whatever GLMakie is doing in the fragment shader.

I have one question to help me understand WGLMakie better:
In all the tutorials I read people always use the default varialbes gl_Position, gl_FragColor etc. to write the final data.
In GLMakie, WGLMakie the data is always written to a user defined variable.
My question is (only about WGLMakie): How does the GPU recognize which of the user defined variables hold the positions and colors? Or is this also wrapped and setup by THREE with BufferAttributes?

[fatteneder]

Looks like the CI itself and/or tests are broken.

Running ] test WGLMakie locally gives me the same error as in the pipeline.

[fatteneder]

Thanks Simon for updating the pipeline.
I will look into the failing ref images for WGLMakie tonight!

[SimonDanisch]

My question is (only about WGLMakie): How does the GPU recognize which of the user defined variables hold the positions and colors? Or is this also wrapped and setup by THREE with BufferAttributes?

No, the shader outputs gets set in WebGL 2.0 via render targets... BufferAttributes are for the array inputs of the vertex shader.

I know, you're asking about WebGL, but I'm actually a bit fuzzy about how threejs + webgl does it exactly, so I'll explain the basics with OpenGL, which looks like this (and should be somewhat similar in pure WebGL 2.0):

// Declaration of output in fragment shader
layout(location=0) out vec4 fragment_color;
layout(location=1) out uvec2 fragment_groupid;

And the index corresponds to the render target in this call:

https:/MakieOrg/Makie.jl/blob/master/GLMakie/src/rendering.jl#L73

Which gets setup here: https:/MakieOrg/Makie.jl/blob/master/GLMakie/src/glwindow.jl#L88

For THREEJS/WebGL it's a bit different, but if I remember correctly, threejs rewrites shaders a bit to e.g. abstract away the difference between WebGL 1.0/2.0, so I think I had to look up to which variable one needs to write the color output of the fragment shader stage, which threejs then replaces in WebGL 1.0 with gl_FragColor and in WebGL 2.0 possibly with something like the above.

[SimonDanisch]

Going to merge this, thanks for getting this to work! :)