[wip] Circles support

[tmcw]

Basic support to allow circle in v8 styles. Both the circle_bucket and
draw_circle need to be implemented.

This stub will not draw circles, but is sufficient to keep from failing
when it encounters a circle in a stylesheet.

• Previously: Draw dot if no image provided in point bucket #282

---

if you use gl.POINTS you don't need to use indexed drawing. You don't need an element buffer and you would use drawArrays instead of drawElements. The tradeoffs:
ansis: gl.POINTS only needs one vertex in the buffer per point. gl.TRIANGLES needs 4 vertices.
ansis: gl.POINTS has a maximum size that varies depending on the platform. gl.TRIANGLES can be any size. I'm trying to find stats on what the minimum max size is for points.

The maximum size of a circle appears to be 64 https://developer.apple.com/opengl/capabilities/

With that limitation, we'll need to use triangles

you'd draw the circular part in the shader. there would be two triangles to make a square. the fragment shader would figure out the distance of each pixel from the center and shade it appropriately

[tmcw]

I'm grabbing this branch and working on it today/tomorrow

[tmcw]

CIRCLES! This branch is ready for review: it draws circles of various colors, with blurring. I assume we'll merge this into the v8 branch if it passes muster?

/cc @kkaefer @ansis @jfirebaugh @mourner

[ansis]

If you switch from a rotated square to an axis aligned square with vertices ((-1, -1), (1, -1), (1, 1), (-1, 1)) you should be able to remove the sqrt(2.0) here

[ansis]

We can reduce the size of circle vertex buffers by half if we pack the position and extrude together into 4 bytes. If we switch to a square, there will be only two possible extrude component values: -1 and 1. Each component of the extrude only needs a single byte. Each position component has 16 bytes but doesn't need all of them.

The x position and x extrude could be combined into a single short with something like this:
Math.round(x * 2) + Math.round(extrudeX / 2 + 0.5)

They would need to be unpacked in the vertex shader.

We do something similar for lines: buffer, vertex shader.

[tmcw]

• Switched to axis-aligned boxes
• Packed the data into fewer bytes

Remaining issue

• It doesn't seem like pixel scaling is working correctly: a circle that should be 100px across is 134px, and the same if i drop out the shader magic and just draw the square that's behind it.

[tristen]

👀

[ansis]

The circle needs to be antialiased. Something needs to be added here so that 1px is always blurred.

Also, what are the units for circle-blur?

[ansis]

Most glsl operations can work with vectors, so this can be written as v_extrude = vec2(mod(a_pos, 2.0) * 2.0 - 1.0);

[tmcw]

The circle needs to be antialiased. Something needs to be added here so that 1px is always blurred.

Done

Also, what are the units for circle-blur?

It's relative to the radius of the circle... blur: 1 is "fully blurred" afaik, where the gradient from center to outside is linear

[tmcw]

@ansis @jfirebaugh - I've added anti-aliasing and expanded the documentation of the blur parameter in the v8 style spec. Anything else remaining?

[peterqliu]

It's relative to the radius of the circle... blur: 1 is "fully blurred"

line-blur measures in pixels. I'm not partial to either way, but let's pick one

[tmcw]

I think we should not pick one: relative blur makes sense for circles and their use cases, and line-blur as pixels makes sense for lines. Let's keep this as-is.

[tmcw]

@kkaefer @ansis added retina/non-retina handling. I think this is good to merge. Final review?

[ansis]

Yes! looks good

[tmcw]

Merged in 59c7af4

[jfirebaugh]

\o/

[kkaefer]

\o/