WebGL rect glyph with hatch pattern #11159
Conversation
|
Rebased with respect to |
CI is failing on size of legacy js bundle. Is it OK for me to bump up this limit a few more kb in the short term? |
Yes, just add another 50k. |
I'm wondering if hatch patterns shouldn't be handled as textures in general? Does this make sense at all? |
|
cc @jsignell @jrbourbeau just an FYI, webgl rects may be of interest for the dask dashboard |
Hatch patterns could be implemented as textures, but the results will be lower quality and the code more complicated than using distance functions. Lower quality because texture interpolation is bilinear, so essentially cartesian. This is fine for axis-aligned patterns, but for curved ones like dot, ring and spiral the cartesian interpolation does not correctly determine the distance from the curve whereas distance functions do. So the texture solution will effectively have different antialiasing width as you move around the curve. More complicated because you cannot just have a single texture per hatch pattern as we allow the hatch scale and weight to be changed independently. A texture for a particular hatch scale and weight can be reused for other scales but only if the scale-to-weight ratio is the same. To support all possible scale and weight combinations we'd have to create textures on the fly as they are required. To create the patterns here we'd have to draw on the textures which could be done using canvas but of course I would do so using webgl and the very same distance functions already written here! The distance functions give very accurate results and are very simple; the most complicated ones are only 7 lines of code in the fragment shader. |
|
I've made a number of changes following review, and also switched the shader files from 4 to 2-space indents to save a few bytes. |
|
@ianthomas23 IIUC I've moved this to |
We will have to minify shaders at some point, but this is still a good change for the sake of consistency across bokehjs. |
mattpap
added
reso: completed
status: accepted
tag: component: bokehjs
tag: webgl
type: feature
and removed
status: ready
labels
|
Thanks @ianthomas23 ! |
* WebGL rect basic implementation of fill and line * WebGL rect line joins * Hatch patterns * Add test * Add macos and windows test images * Changes following review comments * Use 2-space indents in rect shaders
This PR implements WebGL
rectglyph rendering comprising fill, optional hatch pattern, and line with line joins. Lines are rendered on top of the fill/hatch, as occurs in canvas and svg backends, but this is accomplished in a single pass, i.e. each pixel of each rect is only rendered once in the fragment shader. Implemented using ReGL instanced rendering in the usual manner.Things not done (which are silently ignored):
LineGLbefore they can be added here.Imagesupport to be written first.Here is the new test image:
Fully supports hatch color, alpha, scale and weight, although I haven't added explicit tests for these.
This code will form the basis for WebGL rendering of many
glyphclasses, all the ones that are of defined shape and are rendered within a (scaled and rotated) quad. This includesquad,hbar,vbar,circle,ellipseand all the scatter markers. To do this it will need to be expanded to support glyph size being 1D or 2D, presence or not ofangleproperty, and whether glyph size is specified in data or canvas coordinates.I have reorganised some of the shared code into a new file
webgl_utils.ts. There is some duplication of code inregl_wrap.tsand betweenwebgl/rect.tsandwebgl\markers.tswhich I should be able to reduce/remove as I proceed with the unification mentioned above.