Smoother strokes in 2d geometry

Hi guys,

I’m creating some 2d primitives like triangles/square/polygons etc using babylonjs. Although there are great 2d rendering engines, I’d really like to do everything with babylonjs if possible. Now, to the point, strokes are very much essential in 2d primitives. I’m trying to create strokes around babylon meshes. My initial exploration has resulted in these two approaches largely(trying to render strokes around a triangle) -

  1. Rendering edges with enableEdgesRendering. Pg - https://playground.babylonjs.com/#MVSQWZ#40. This draws really smooth edges, but the ends are not pointed/round, they end abruptly.

  2. Using HighlightLayer with isStroke as true. This doesn’t have the above problem, but seems the lines are jagged and not as smooth as above. Are there some engine params or post processing steps that can improve this? Pg - https://playground.babylonjs.com/#MVSQWZ#39 Joints aren’t pointed, a little round, but that is fine for me. 1 is a little unacceptable as it leaves gaps in line joints which doesn’t look appealing.

Any ideas on how this could be handled better are greatly appreciated. Thanks a lot.

You could try increasing the number of samples of the generation: https://playground.babylonjs.com/#MVSQWZ#43

If that works, I ll add a standard way of doing it.

1 Like

Hi, thanks for the reply, really appreciate it. It looks perfect for my use case. Thanks again.

Yep, I think we can expose a method to do this and add to docs as well. Looks like a small thing, I can create a pr if there is some guide on it, and also add this to docs.

I love that you are proposing to do a PR !!!

and here the goal is to simply add a property sample in the file EffectLayer.ts, exposing the underlying _mainTexture.samples so a perfect first contrib !!!

Do not hesitate if you struggle and I ll do the PR.

Cool, let me spend some time on this and get the hang of setting up the project. Would try to open a pr soon.

No rush, you have all the time you want :slight_smile: