Search Unity

  1. Get the latest news, tutorials and offers directly to your inbox with our newsletters. Sign up now.
    Dismiss Notice

Shapes - a real-time vector graphics library

Discussion in 'Assets and Asset Store' started by Acegikmo, Jul 3, 2020.

  1. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259


    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
     
    Last edited: Aug 14, 2020
  2. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    555
    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.
     
  3. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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 :)
     
    Korindian likes this.
  4. Devil_Inside

    Devil_Inside

    Joined:
    Nov 19, 2012
    Posts:
    1,058
    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?
     
    Last edited: Aug 10, 2020
  5. rxmarccall

    rxmarccall

    Joined:
    Oct 13, 2011
    Posts:
    350
    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.  
     
  6. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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
     
    rxmarccall likes this.
  7. kreso

    kreso

    Joined:
    Sep 7, 2013
    Posts:
    130
    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
     
  8. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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 :)
     
    kreso likes this.
  9. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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
     
    Last edited: Aug 14, 2020
    BTStone and rxmarccall like this.
  10. KeithBrown

    KeithBrown

    Joined:
    Apr 1, 2017
    Posts:
    175
    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.

    upload_2020-8-28_14-29-43.png
     
  11. justtime

    justtime

    Joined:
    Oct 6, 2013
    Posts:
    375
    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.
     
  12. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
    justtime likes this.
  13. dimib

    dimib

    Joined:
    Apr 16, 2017
    Posts:
    48
    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.
     
  14. mischa_unity407

    mischa_unity407

    Joined:
    Sep 10, 2020
    Posts:
    1
    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?
     
  15. profuzzy

    profuzzy

    Joined:
    Mar 13, 2015
    Posts:
    22
    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.
     
  16. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    @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!
     
  17. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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
     
  18. profuzzy

    profuzzy

    Joined:
    Mar 13, 2015
    Posts:
    22
    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.
     
    Last edited: Sep 11, 2020
  19. goomar

    goomar

    Joined:
    Apr 13, 2013
    Posts:
    4
    Wish there were more reference samples to create at runtime, I haven't figured out how to create at runtime...
     
  20. lordzeon

    lordzeon

    Joined:
    Jun 1, 2018
    Posts:
    44
    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?
     
  21. TheFlyHawk

    TheFlyHawk

    Joined:
    Mar 23, 2016
    Posts:
    40
    Hello @Acegikmo ,Rectangles can increase Flat 2D or Billboard
     
  22. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
  23. Korindian

    Korindian

    Joined:
    Jun 25, 2013
    Posts:
    555
    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!
     
  24. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
    Korindian likes this.
  25. Devsagi

    Devsagi

    Joined:
    Sep 28, 2019
    Posts:
    29
    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!
     
  26. rrahim

    rrahim

    Joined:
    Nov 30, 2015
    Posts:
    190
    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.
     
    Neto_Kokku likes this.
  27. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
    Devsagi and rrahim like this.
  28. rrahim

    rrahim

    Joined:
    Nov 30, 2015
    Posts:
    190
    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.
     
  29. HolyFireGames

    HolyFireGames

    Joined:
    Apr 23, 2014
    Posts:
    119
    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
     
    Last edited: Sep 21, 2020
  30. keithsoulasa

    keithsoulasa

    Joined:
    Feb 15, 2012
    Posts:
    2,089
    Do you have an example with a speedometer, I'm using it for a racing game .
     
  31. ExtrysGO

    ExtrysGO

    Joined:
    Oct 25, 2017
    Posts:
    196
    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?
     
  32. linq

    linq

    Joined:
    Jun 20, 2015
    Posts:
    7
    HI, Acegikmo! Shapes is a good asset, thanks. Can you add more examples? I need a gradient color for 3d primitives too.
     
  33. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
    ExtrysGO likes this.
  34. jingray

    jingray

    Joined:
    Feb 6, 2015
    Posts:
    53
    Waiting a version on mobile :)
     
    NathanielAH likes this.
  35. MasterControlProgram

    MasterControlProgram

    Joined:
    Apr 18, 2015
    Posts:
    38
    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.
     
  36. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
  37. jashan

    jashan

    Joined:
    Mar 9, 2007
    Posts:
    3,294
    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).
     
  38. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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!
     
    jashan likes this.
  39. SuppleTeets

    SuppleTeets

    Joined:
    Aug 22, 2014
    Posts:
    25
    FYI I was seeing this issue on 2019.3.15f1 and updating to the latest LTS (2019.4.12f1) fixed it.
     
    xpxilom and jashan like this.
  40. Mr-Oliv

    Mr-Oliv

    Joined:
    Sep 14, 2012
    Posts:
    28
    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
     
    Last edited: Nov 3, 2020
  41. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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
     
  42. ForemanDesigns

    ForemanDesigns

    Joined:
    Feb 4, 2018
    Posts:
    14
    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)?
     
  43. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    Should work well for VR and on android yes! As for performance characteristics, you can read about that here!
     
  44. Devil_Inside

    Devil_Inside

    Joined:
    Nov 19, 2012
    Posts:
    1,058
    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
     
  45. BruceBarratt

    BruceBarratt

    Joined:
    Jun 20, 2015
    Posts:
    55
    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.
     
  46. BruceBarratt

    BruceBarratt

    Joined:
    Jun 20, 2015
    Posts:
    55
    Lol I just found it in the C# config. Awesome!
     
  47. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    578
    Can this draw lines in a 3d world like in this screenshot, to show movement paths, areas that are interactive, etc etc?
     

    Attached Files:

  48. Lacostic

    Lacostic

    Joined:
    Nov 29, 2017
    Posts:
    14
    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!
     
  49. Acegikmo

    Acegikmo

    Joined:
    Jun 23, 2011
    Posts:
    1,259
    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
     
  50. hurleybird

    hurleybird

    Joined:
    Mar 4, 2013
    Posts:
    100
    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.
     
unityunity