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 ❰



Website • Documentation • Changelog • Feedback Center • Twitter​

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

 

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

 

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?

Code (CSharp):

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

 

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

[i]

gets captured correctly! another thing to try is doing the same code on a single rectangle outside of the array first

 

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

 

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

 

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!

 

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 @spacename
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!

 

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?

 

Hello @Acegikmo ,Rectangles can increase Flat 2D or Billboard

 

What do you mean by create at runtime? Either you can use the components, which can be created just like any other components. As in, you create a game object and attach a shape to it. Or, you can use immediate mode, which doesn't use game objects at all, but instead draws immediately, with all the Draw.X functions!

1) If your DOF is based on the depth buffer, then yes, but Shapes is unable to support replacement shaders, so if you DOF system relies on that, then it won't work

2) Kinda! Polylines are technically shape agnostic, they're always just a set of points, but in terms of helper functions to arrange those points in a bezier curve and arcs, those exist! but only in immediate mode so far, while component-based splines is under consideration

Rectangles so far only support the Flat2D render mode, but feel free to request a billboarded rectangle on the feedback page if you'd like to see the feature at some point!

 

Hi, bought Shapes today and have been playing around with it. I have some questions I'm hoping you can address:

1. In HDRP, OnPostRender doesn't get called anymore. Is there a different method to do Immediate-Mode Drawing but not as a Gizmo?

2. In HDRP, all the methods of anti-aliasing affect lines and shapes except for Temporal Anti-Aliasing. Is this not going to be supported due to the way Shapes are drawn, or am I missing something?

3. I noticed there is a ToArc method for PolylinePath, but is there a way to use a PolylinePath in Polyline Component mode?

4. A feature request - It would be nice if there were the same shapes available for Polylines as Regular Polygons, so I could do something like a Flat2D Regular Polygon filled triangle bordered by a Billboard Polyline triangle with the exact same dimensions, but the billboarded Polylines would give it some thickness from the side when viewed in 3D. I can do this manually, but perhaps some sort of "closed polyline with number of sides" option would be great for Polyline components, as well as a way to do billboard Polyline borders for discs and arcs easily.

Thanks for your time!

 

The included FPS example branches based on render pipeline and Unity versions, if you want to see how it works there!
Long story short, use

RenderPipelineManager.endCameraRendering

This one is a little weird, it should work, but I'm guessing it doesn't for some reason? A bug report on the feedback page would be nice!

ArcTo/BezierTo currently only exist in immediate mode, but there is a feature request open for it if you want to vote on it, so it might come at some point!

I think these types of "macro shapes" is a little too out of scope for Shapes at the moment, I've generally avoided this type of thing because it kinda opens up the expectations that it should both exist for many shapes, and that there should be more presets for things in general, which adds a lot of work overhead for something that is relatively simple to work around. But I can of course make exceptions! Just that it's unlikely that I'll add it at the moment. But, if you open a topic on the feedback page and others would want it too then maybe!

 

Hello there,

interesting asset, I have a quick question about it:
Is it possible to create decal-like effects that project on to terrain or other meshes with this?
For example, for AoE (Area of Effect) preview effects that are common in RPGs.

Best regards!

 

Is there currently any good resources for tutorials and tips and tricks for using this plugin?

I feel like there's so much more I can do with it, but I just need some reading (tutorial) material to get me there.

 

Currently there is no decal projection-like behavior in Shapes! This generally gets into very render pipeline specific stuff and is currently a little out of scope of Shapes at the moment

There are the two scenes included in the project (Shapes Gallery and FPS Example), as well as the documentation on the website. Other than that I've yet to make a proper tutorial video, but, a lot of people have requested it now so I should put one up soon!

 

Thanks Freya. I've seen some pretty cool things being done on twitter with #madewithshapes and I was just wondering if there are more resources that have tutorials of some of the things I've seen. I'll bookmark as much as I can find and share them here soon.

 

Hi there,

Should using shapes drastically increase my build time the first time I build with it in the project?

I'm stuck in the build process at this stage: https://holyfiregames.gyazo.com/f597015e6731b0595d7c54ae96fd8905 for a very long time.

I noticed it processes shaders that I'm not using in my project as well, is there any way to bypass having to process shaders for shapes I'm not using?

I'm targeting Android for my build.

After about an hour and a half of building I get 600+ of these errors:

https://holyfiregames.gyazo.com/8ddb212f8fac9611b9bf85deec8f7837

If I try to just build again, it eventually works but still takes a long time to build.

Thanks

 

Do you have an example with a speedometer, I'm using it for a racing game .

 

When you use a line render and set a rectangle with rounded corners, it deforms depending on the angle you look at it.
Does it happen with this asset?

 

HI, Acegikmo! Shapes is a good asset, thanks. Can you add more examples? I need a gradient color for 3d primitives too.

 

This is a really frustrating issue I'm still trying to find a solution for, it seems to be an internal shader compiler crash that it out of my control. Last time Unity got back to me they said this should be fixed in the latest 2019 LTS version or 2020.1 - I'm not sure what version you're on, but, try updating and let me know if it works!

It depends if the polyline is set to billboarded (as in, it will face the camera) or if it's set to Flat 2D, in which case it's flat along local space X and Y, so, you can choose how it will behave

I might add more examples in the future yeah, but other than that I hope the included examples are good enough for now!

as for gradient fills for 3D primitives - feel free to request it on the feedback forum!

 

Waiting a version on mobile

 

Loving Shapes so far! Great work.

Question, is there a way to get Polyline to support end caps like Line? I wasn't able to find any support for this in intermediate mode I think. If not, I think that'd be a great addition.

 

Shapes already works for mobile! It does focus on quality above optimizations you could do on mobile, but there are quality settings you can turn down if you want to! More info here under peformance

Currently not, but it is something that's planned, feel free to vote on it here!

 

Would it be possible to use Shapes with (UI) Masks? I understand that we cannot use screen space cameras, and I guess for the usual Unity UI Masks, you'd have to go via CanvasRenderer, which is a nightmare.

Is there any other way? My use case is rendering a table / grid in a scrollable panel.

I have just upvoted: Masking / Stencil Buffer Support. That request is about supporting shapes masking other shapes, which would work for my use case (I'd simply have a shapes mask + a Unity UI mask).

 

Yeah, I think since Shapes doesn't have any other UI support, adding masking would be a little bit weird

But yeah, when stencil support drops you should be able to hack it in!

 

FYI I was seeing this issue on 2019.3.15f1 and updating to the latest LTS (2019.4.12f1) fixed it.

 

Hej!
I've been playing around with Shapes for a few days, it's a truly wonderful package!
I'm looking to draw a dynamic polyline on a UI (not overlay mode). If I add a Polyline component to a RectTransform object I get the curve positions relative to the canvas which is great, but if I access the Polyline component and update the curve through code, the performance is horrible.
If I generate a PolylinePath and use Draw.Polyline the performance is great but the curve points are in world coordinates.
What would be the best way to do this?
Thanks!
M

 

Hm, the fact that performance is terrible in the first case is a little worrying, it should perform the same! How did you do the point updating in the first one?

As for drawing in immediate mode, I'd recommend setting Draw.Matrix to the RectTransform.localToWorld matrix before drawing the polyline, and then resetting again! that way it will be drawn in the space of that transform you used before

 

Hello, @Acegikmo! Would Shapes be a good fit to create fancy VR UI interfaces? And is it performant on mobile platforms like the Oculus Quest (Android)?

 

Should work well for VR and on android yes! As for performance characteristics, you can read about that here!

 

Always wanted to ask.. when I import the asset through package manager, there is a popup that says that the asset has some Package Manager dependencies that need to be resolved. If you skip this step, everything seems to work fine.
If you install the dependencies though, it adds ads, iaps, analytics, and some other packages to the project.
It also adds a collab-proxy package that immediately starts spamming console with errors.
Tested on Unity 2020.1 and 2020.2

 

Hi @Acegikmo,
Enjoying the asset . Nice that it automatically imported URP shaders.
Is it possible to use HDR colours? It would be awesome for me if it could.

Thanks.

 

Lol I just found it in the C# config. Awesome!

 

Can this draw lines in a 3d world like in this screenshot, to show movement paths, areas that are interactive, etc etc?

 

Hi Freya, I’m about to buy this awesome asset, seems it’s exact what I need for the project!
Just couple of questions:
- is there a way to draw shapes using external (.xml ?) file? I’m not so good with coding, could you make some explanation for a dummies?
- is it possible to use URP/HDRP materials? I think about having shadows from shapes
Thank you!

 

Should be possible with the polyline, yeah!

There are no external file based ways of drawing shapes, but, Shapes does have a component based side of it, that are fully customizable shapes you place in your scene, without needing to know how to code

Nope! Because Shapes is GPU based, it has very specialized shaders, so you can't put any materials on it I'm afraid, and none of the shapes are currently shadow casting

 

Hey, awesome asset!

I'm so used to asset store stuff that looks great on the store page only to turn into a giant puddle of disappointment so shapes comes as a great surprise. Well written, exposes a ton of functionality right out the gate (so much Asset Store shovelware seems to only be only designed around the author's own unique use case), and intuitive enough that I completely understood every component after only a few moments of interaction.

My only complaint is that of the examples that are shown off on the store page, only two are in the package. In particular, I was interested in the fifth image (the firing angle thing). After playing around with the main demo scene, I understand how it was made, but it would still be preferable to have everything in the package that you see in the store.