Shapes - a real-time vector graphics library

Shapes is a real-time vector graphics library with high-quality line drawing
and infinite resolution shapes, rendered with advanced anti-aliasing techniques

Get Shapes on the Asset Store

WebsiteDocumentationChangelogFeedback CenterTwitter

Hey everyone! It feels almost weird to be back here after such a long time away since the Shader Forge days, hope you’ve all been doing well (all things considered, in the middle of this wild year)

So, it has bothered me for a long time that for some reason, html5 canvas is better at drawing primitives than Unity. I really wanted something to help us make those crisp lines, discs, polylines and, well, Shapes! So, here we are~

I hope you’ll enjoy Shapes and make pretty things with it! If you share your work on Twitter, don’t hesitate to tag me or use #madewithshapes - I’d love to see your work!

// Freya

Features

  • High quality line drawing with arbitrary thickness with advanced anti-aliasing

  • Thickness units can be specified meters, pixels or noots

  • 2D Shapes such as Polyline, Disc, Arc, Pie, Rectangle, and more

  • 3D Shapes such as Sphere, Torus, Cuboid, Cone, 3D line, and more

  • Easy-to-use component-based shapes with tweakable parameters

  • Immediate-mode API for code-based drawing, with scene view gizmo support

  • Heavily GPU based. Tweaking parameters is practically free

  • GPU instancing support

  • URP & HDRP support

  • Single-pass instanced VR rendering support

Limitations

  • Minimum version is Unity 2018.4 LTS
  • No SVG support, Shapes is not designed to be an SVG asset importer/exporter
  • No ECS support yet, because it seems to change every week
  • No UI support in overlay mode, though you can use camera-based or world-space UI to work around it
  • Applying custom shaders is currently difficult unless you know how to code shaders, since every shape has a very specialized shader
17 Likes

Congrats on the Asset Store release! Shapes looks awesome. Just letting you know that you have one customer looking to purchase Shapes once HDRP is (hopefully) officially supported.

Thank you! I’ve got a big update on dashed lines (angled & round dashes + custom spacing & dashed rings) coming up, after which I’ll be looking into URP support. After that I’ll know what the process looks like to add HDRP support! I’m guessing it’ll be relatively easy as soon as URP is in :slight_smile:

2 Likes

Hey!
I’ve purchased this asset to create a dynamic crosshair for my game. Everything looks great except I need to render my crosshair on top of everything else so it doesn’t get occluded by geometry. What would be the best approach to do that?
Thanks!

P.S. I figured I can add ZTest Always to main shader pass, but that would affect all instances of the shape. What if I need this for only one instance and I want the rest to render normally? Is there a way to assign a custom material to just 1 instance?

Hello @Acegikmo , I’m wanting to use DOTween to tween a shapes line color over time but I don’t see any change take affect. Do you have any idea why this might not be working?

Rectangle[] lineStack;
DOTween.To(()=> lineStack[i].Color, x=> lineStack[i].Color = x, Color.red, 1.0f);

currently there’s no way to do that, but it’s something I do want to add soon! likely after the HDRP/URP update which should be releasing this week!

hm, that’s wierd, that should definitely work, unless the DOTween syntax is wrong - I’d try the same line on changing a public color field or something, to see if there’s change happening at all from DOTweens end. also, make sure that * gets captured correctly! another thing to try is doing the same code on a single rectangle outside of the array first*

1 Like

Hello @Acegikmo ,
I am wondering if you could write a few sentences on animating shapes, point, lines, colors…? Maybe even blending shapes (I think that is what I saw in the video).

Kind regards,
Kreso

Generally, any animations you do with the component based shapes will work the same as animating anything else! There are no built-in animation tools in Shapes, but it’s compatible with Unity’s animation system and any other tweening engine, so if you want to animate properties of shapes, you can totally do that! Whether that’s position, color, radius, and all other properties you’ve got

The other type of animation is animating in code with immediate mode shapes, which is a little more complicated since it’s programmatically driven, but there is an included sample if you want to see how you can set something like that up! It’s the FPS HUD from the trailer :slight_smile:

1 Like

Shapes 2.2.0 is now released!

Features
• URP & HDRP support
• Added Polygon shape, for making arbitrary filled polygons, with support for gradient overlay
• Added scene view handles to modify shapes with

Fixes
• Fixed a bug where polyline meshes didn’t always update
• Fixed a bug where scaling flat 2D lines behaved incorrectly
• Fixed a bug where editing polyline thickness when multiselecting was a lil borked
• Removed unnecessary [CreateAssetMenu] attributes

2 Likes

Hi @Acegikmo

Would this be able to reproduce an autocad drawing if the drawing was strictly made with lines, arcs, polylines, etc.

I am trying to reproduce P&ID drawings for clients on the web. The drawing would need to be interactable, so if i clicked a line, i could retrieve data associated with it and display to the user. The CAD drawings look something like this.

Hi there!
1)Will this asset useful in creating grids for games such as crossword?
2)Is it also possible to apply some visual effects such as glow?
3)Can i apply some texture overlay to lines? I mean, if i want to implement a hand drawing effect of lines.

Yes! though shapes is currently rendering only, so the click interactions would have to be manually made

  1. Sure! there’s no grid primitive, but you can make a set of lines that make up each line in the grid
  2. it’s not built-in, but it is possible, mostly! so generally there are two approaches. one is to do it like most games do it, and have bloom as a post effect. this is the most universally applicable way. the other is to duplicate your shape, increase the thickness and make a gradient of your glow color, and make it additive. this isn’t supported by all shapes though, it would mostly work for discs at the moment
  3. because all shapes are heavily GPU based, applying custom effects is difficult unless you know how to code shaders. it has be requested before, so it’s possible I’ll add it at some point in the future! feel free to request it and/or vote on it in the feedback page!
1 Like

Hey your asset looks amazing! Can you tell something about performance for different target platforms? I’m interested in mobile (iOS/Android) and WebGL targets.

Started getting my hands dirty with this great looking asset, but ran into the following issue.

Shapes are not rendering in my VR headset when using immediate drawing mode (they do when I use components). They show in the editor game and scene window, but not in the headset. My setup is as follows:

  • Oculus Quest via Link cable
  • URP using the onPostRender callback as shown in the sample project for SRP
  • Out of the box URP settings
  • OVR camera rig prefab with no modification other than rendering a solid color instead of the skybox
  • Unity 2019.4 LTS

Any pointers to what I could be missing here?

Hi I’m just looking for info about performance (in any way, shape, or form that anyone can provide).
AKA, comparative performance, or how you perceive the performance for what you are working on… etc etc.

Anything you want to say is better than saying nothing.
Thank You… and if you want to send me a message instead, that’s fine too.

@dimib @profuzzy
performance is hard to answer! Shapes is generally very cheap on the CPU, and modifying shapes is basically free, except for the Polygon and Polylines (as they have to reconstruct meshes)

the GPU cost is a little more complicated, because it depends heavily on what shape we’re talking about, as well as what platform and how much of the screen it covers and whether or not it’s batched, and, much more

there are also options you can toggle off to make the shaders cheaper, for instance, turning off local anti-aliasing

generally, the usual rules are as with any other performance optimization applies! keep fill rate in mind etc!

you can find some more info on performance here!
https://www.acegikmo.com/shapes/docs/#performance

important to keep in mind though - I currently have some issues with internal shader compiler errors specifically for WebGL and ios in some versions of Unity, that I’ve yet to figure out!

1 Like

I don’t know too much about your specific setup. the one thing you need to tap into is the OnPostRender call of the cameras that the OVR camera rig is using, but outside of that I’m not entirely sure how the internals work there I’m afraid

Hello Freya/Acegikmo, I didn’t expect you to answer that as I assumed that if you had metrics to share, they’d be in the docs already. // I’ve read the docs and reviews… etc. (FYI)
• Perhaps someone will chime in with some generic balanced data. …else…If I buy the asset package, I’ll share my observations.
//EDIT: I’m just going to buy it.
Thanks for your hard work.

Wish there were more reference samples to create at runtime, I haven’t figured out how to create at runtime…

Hi, im interested in this Asset, but i have 2 questions:

  1. I see 3d Lines have billboard or volumetric 3D mode, these modes will work with depth effects (i need DOF to be applied to the lines)
  2. Do polylines have spline support?