Line of width 0.1 , antialias=false

61 views
Skip to first unread message

Ivan Popelyshev

unread,
Jun 9, 2021, 9:29:55 AM6/9/21
to WebGL Dev List
Behold, the thin line in WebGL!

WIP graphics solution for pixijs

Currently places for most of line joints cases are empty, there are a bit of artifacts on fill , also its not batched, but all issues i saw in my webgl years are taken into account in architecture.

I'm sharing this with the people who lost the hope on good AA for 2d and 3d shapes with lines and fills.

Thanks everyone who made articles like https://wwwtyro.net/2019/11/18/instanced-lines.html (which does not make thin lines, but shows neat tricks with instanced lines)

I hope to show how its done in next WebGL meetup :)

Ivan Popelyshev (aka Hackerham)

Ivan Popelyshev

unread,
Jun 10, 2021, 7:00:25 PM6/10/21
to WebGL Dev List
Smoothed line joints: https://codesandbox.io/s/hsaa-smoothing-line-joints-t3b3n . Line butts aren't ready yet

среда, 9 июня 2021 г. в 16:29:55 UTC+3, Ivan Popelyshev:

Ken Russell

unread,
Jun 11, 2021, 5:20:10 PM6/11/21
to WebGL Dev List
Looks nice Ivan! Looking forward to hearing more about how you implemented it!

-Ken



--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To view this discussion on the web visit https://groups.google.com/d/msgid/webgl-dev-list/23addf4e-bfeb-4403-9fcc-659913dc334cn%40googlegroups.com.

Mark Callow

unread,
Jun 15, 2021, 3:48:57 AM6/15/21


On Jun 11, 2021, at 8:00 AM, Ivan Popelyshev <[email protected]> wrote:

Smoothed line joints: https://codesandbox.io/s/hsaa-smoothing-line-joints-t3b3n . Line butts aren't ready yet

With this and the previous one, I’m just seeing the source code list and a blank white preview pane.

Regards

    -Mark

signature.asc

Mark Callow

unread,
Jun 15, 2021, 4:51:20 AM6/15/21
I should have said, I’m on macOS Big Sur (11.4) and I’ve tried both Firefox and Safari.

Regards

    -Mark

signature.asc

Ivan Popelyshev

unread,
Jun 15, 2021, 3:08:18 PM6/15/21
to WebGL Dev List
Most probably its problem with codesandbox. It works on my Macm though its not Big Sur.

вторник, 15 июня 2021 г. в 11:51:20 UTC+3, Mark Callow:

Mark Callow

unread,
Jun 16, 2021, 5:27:36 AM6/16/21
Thank you. That works in both Firefox and Safari.

When the angle between the rotating part and the static part is very small, the length of the rotating part grows enormously. Presumably this is something you are still working on. Like Ken I look forward to hearing more about how you implemented it. Are you familiar with Slug? Any similarity between that technique and yours? Warning: Slug is patented so you may not want to look at it.

Regards

    -Mark
signature.asc

Ivan Popelyshev

unread,
Jun 16, 2021, 7:10:02 AM6/16/21
to WebGL Dev List
Thank you!

> the length of the rotating part grows enormousl

That's how it works in canvas2d and flash too :) When it hits miterLimit (usually 10 * lineWidth), it switches to Bevel behaviour.

> Are you familiar with Slug?

Slug is awesome, I hope someone will make free solution like that :) 

Slug works with big amount of info available for fragment shader, my solution is more vertex-heavy, it fails if there's complex subpixel geometry. Subpixel edges/corners of lines are OK though :)

My input currently is human-made moveTo/lineTo and curves. If I somehow fit subpixel scanline like canvas2d AAA, we'll be able to draw very heavy vector shapes.

But for now, I'm trying to hack something that works only with human input and simple imported SVG's or SWFs, across all the devices with webgl1.

After I integrate it in pixi, I would like to put it in other html5 renderers.


среда, 16 июня 2021 г. в 12:27:36 UTC+3, Mark Callow:

Ivan Popelyshev

unread,
Jun 18, 2021, 8:17:22 AM6/18/21
to WebGL Dev List
OK, this is now an official PixiJS plugin https://github.com/pixijs/graphics-smooth , and  there are several testers like https://foundryvtt.com/ .

Still many things to fix and many possible performance optimizations, but at least we know that's not another Fermat's theorem proof, it actually works in production.


среда, 16 июня 2021 г. в 14:10:02 UTC+3, Ivan Popelyshev:
Reply all
Reply to author
Forward
0 new messages