Shapes - a real-time vector graphics library

Hey i just bought the asset i was wondering how you made the animations (like shown in the showcase) i couldn't seem to find any documentation on that ?

 

Hi, I have a few questions to determine if this asset, which looks really great so far, would be the right fit for my current project.

1) Can everything be generated purely from code? Let's say I wanted to create a few thousand polygons from data in an xml file, would that be possible? "Polylines and Polygons can't be instanced" in the documentation suggests that this might not work.
2) Is there a limit to the complexity of polygons? Some polygons I'd have to create can have well over 500-1000 points.
3) Are holes in polygons supported?
4) I'm working with map data, so I would use float coordinates like "6.19691914,50.530300345" to create polygons. Would that create any issues?
5) In the documentation you mention "Polygons and the Polylines both generate meshes on the fly when they are modified. They might be expensive on the CPU end in some cases, if you use a lot of points". What would be considered "a lot" in this case? For example, I'm displaying 50 polygons with an average of 500 points each.

Thank you very much!

 

Hi!

Shapes is just brilliant. Looks amazing and I'm using it quite a bit.

I'm not really a coder and I've been using PlayMaker for years. I've studied your code (to the extent that I can 'study' any code) and attempted to implement a modified version of it for my own purposes, without any real success.

I was just wondering if some PlayMaker actions were part of the development plan for Shapes?

Thanks for the asset.

 

I'm modifying the color and radius via script and I'm getting this behaviour ("gradient pie"?) on the circles.



As soon as I modify any value from the inspector it repaints itself as a normal disc. Do I need to call a specific method after modifying a shape in the code (something like "Repaint")?

 

Apologies for the late response, I've had a bit of a holiday break! (I hope you all had a good one too!)

almost all of them are using animation curves, while others are code-based animation, so they're all using Unity's existing animation tools. Animation isn't really a part of this package, but all things are animatable, if that makes sense!

In this case, "can't be instanced" means that they will not take advantage of GPU instancing as a form of optimization. But you can definitely instantiate everything from code as well as from prefabs!

there are no limits except Unity's mesh limitations, which is at 65,535 vertices. Though at that number, the triangulation algorithm might get into performance issues when you generate or modify any existing polygons, but you should be totally fine in the 500-1000 range

Nope! Not yet, though stencil buffer support is coming soon, which could achieve similar effects. A halfway solution if you have the ability to code it, would be to create splits in your polygon to turn it into a polygon without holes, and then feed those points into Shapes

Pretty much all positioning in Shapes is using floating point coordinates, so that should be totally fine. Positioning is not pixel based, it's all in local space coordinates of your objects

it really depends on the hardware - however, you only pay the triangulation cost on generate and on modify, not while drawing it, after that point it comes down to your hardware and how many draw calls you can push. It sounds like it should be fine?

There are no plans for PlayMaker integration at the moment I'm afraid!

could you clarify a little how you are modifying it, how it looks before modification, and what you expect it to look like?

 

Is it possible to build a grid layer visualization (like the default grid layer in Unity or Blender) with this library? Or would this result in too many individual lines (which are all separete meshes)?

 

currently that would involve lots of separate lines which can get heavy en-masse, but, people have been requesting support for pattern overlays for things like the rectangle, and a grid could be one of those patterns!

 

Hi,

I am trying to draw a polyline with a Polyline-Component. I want to change the point in start with a script and draw the new points. The new Points are added/updated but somehow the line is not updating (it disapeered) here is the code:
public List <PolylinePoint> _path = new List<PolylinePoint>();
public Polyline _polyline;
// Start is called before the first frame update
void Start()
{
_polyline = GetComponent<Polyline>();

_polyline.meshOutOfDate = true;
_polyline.points = new List<PolylinePoint>();
// _polyline.points = _path;
_polyline.points.AddRange(_path);
_polyline.UpdateMesh(true);
_polyline.meshOutOfDate = false;
_polyline.UpdateMesh(false);
}
I tried a lot with UpdateMesh and out of date but did not get the solution. - Do you have a code expample that works?

Thanks in Advance!

 

It's enough to just do these two, the out-of-date state and mesh updating will be done automatically:

Code (CSharp):

1. _polyline = GetComponent<Polyline>();
2. _polyline.SetPoints( _path );

my guess is that your points have a thickness of 0 or the colors have an alpha of 0!

 

Greetings from the Amplify team,

I've been trying Shapes for the last couple of days, you've done a great job with the asset btw.

Was trying to scale a group of round cornered rectangular shapes and wondering if there's a way to do a non-uniform scale without distorting the shape layout, using Unity's Transform > Scale.
Seems like I can only achieve this per shape and through "Size" input with "Scale Mode > Coordinate" Enabled

Thanks, keep it up!

 

Hello, I'm very interested on your asset but my use case for it is 100% UI (it's a heavy UI game).

• Are you planning to support UI overlay in the future?
• Is there an example provided that uses camera space? Does it support things like auto resize to resolution?
• Is it performant when used like that vs UI canvas?

Thanks!

 

Hi,

Like @Amplify_Jeff mentioned we started using Shapes on an external project of ours, its really clean and so pleasant to look at its results.

I have another question/request on top of Jeff's one .

Just to give contextt, on our end Shapes main usage will be for UI and we're on the process of creating UI primitives like buttons, sliders, scroll views,etc on top of it.

We noticed is that there isn't any way to mask Shapes components, which will be required for p.e. scroll views. After some digging we found out that this was already requested by another user over here and it was already implemented on your end but it hasn't been released yet.

Do you have any estimate on when you can release a new version with this feature?

Thank you so much!

 

Just implemented this for 3.0.0 when using coordinate scaling mode!

I have no plans to support Unity's canvas UI - their system is almost diametrically opposed to the way Shapes works, and it's incredibly hard if not impossible to get Shapes up and running in it

kinda yes, but it's pretty complex! It's a FPS hud that scales with the view

it should be performant, but it really depends on how many things you draw and how you draw them!

generally, I think it's good to keep in mind that Shapes is not designed to be a UI library, but it can be used for HUD/UI like things

soon, as mentioned here!

 

Hey @Acegikmo

I noticed that Shapes doesn't support the URP 2D Renderer (or I missed some settings somewhere?)

By support I mean: the shapes don't get drawn/rendered on screen at all. Just nonexistent, not even purple on screen.

Did the 3.0.0 update fix that in any way?

 

nope! I generally don't support experimental APIs, but some people have found workarounds in the meantime;

https://shapes.userecho.com/en/comm...g-with-2d-renderer-after-regenerating-shaders

 

Alright, I'll try that workaround for now then, thanks
Aaaand hope that Unity will make the 2D Renderer stable asap

 

Just diggin into Shapes, loving it so far

I'm struggling with rendering stuff in the right order/sorting though. As far as I can see this isn't covered in the docs. I'm using Immediate Mode mostly. With the default objects, I can stack elements using the Sorting Order in the Sorting & Depth dropdown, but how can I do this in Immediate Mode?

Also, I must be missing something with the Sorting Layer options exposed in the same dropdown. I tried to create a sorting layer for the elements to render them on top of some non-Shapes game objects (on a lower sorting layer), but they're still obscured by these objects. How can I for example, ensure Shapes are always drawn on top of lower sorting layers?

Thanks!

 

while the component-based Shapes sort like any other mesh renderer, immediate mode draw order will always be the order in which you call the draw commands, at the point in the render pipeline specified by the second parameter of Draw.Command()

so in other words, the first Draw.X you call will be furthest back, the last Draw.X you call will be closest/on top

that being said, opaque shapes specifically will also write to the depth buffer, so if you draw an opaque shape close to the camera, and then another shape further behind that line, the closer line will still be on top since it wrote to the depth buffer

 

Hello,
Can we do these operation with Shapes ?
1. touch down: get point0
2. touch move: get all point on Bezier Curve and draw with immediate mode
3. touch up: get all point on Bezier Curve and generate Mesh.

We just want to get mesh along Cubic Bezier Curve Path after user touch up.
Is the Shape draw in immediate mode matching with Mesh ?

Best regards

 

Immediate mode has a feature to draw bezier curves specifically yes!

you can find example code here

basically you do this:

Code (CSharp):

1. using( var path = new PolylinePath() ) {
2.     path.AddPoint( a );
3.     path.BezierTo( b, c, d, pointCount );
4.     Draw.Polyline( path, lineThickness, PolylineJoins.Simple );
5. }

 

Any way I can set the Depth test using Draw.Polyline()? I'm using two polylines one on top of the other, one as LessEqual and one Greater, so I can render any part of the line with a different visual when its behind an object. I'd like to use immediate mode so I can round out the corners, unless theres a way to do that in the component at this point.

 

you can set Draw.ZTest to change the depth testing in immediate mode! As for rounding corners, you can have round joins, but you can't set an arbitrary radius, for that you'll need to use polylinePath.ArcTo in immediate mode

 

Im assuming theres a reason this cant work, but it would have been really easy if I could just apply a constant "rounding radius" to the entire component, which would just make sure all points in the polyline smooth out according to that number in a consistent way.

Basically, I just want to make the line look more toony (smooth curves) and less sci-fi (angles, ie: x-com).

In case that could be done somehow, someday, using the regular polyline component ... Im flagging it would be awesome. Basically, I want you to do the math, and just let me say how round I want things without having to check per-point if it should arc .

 

Oh, oh, also ... is there any way to give the polyline an outline? That would be huge for a toon shaded game. With an outline PP effect it looks much better, but I have other reasons for not using that ... would be great to have that built in.

Oh, and loving this btw! Thanks!

 

The lines are too dark against the color scheme of the rest of the scene ... its a toon shaded game, and I have colors adjust to get it looking the way I want, and it would be nice to be able to increase the intensity of the color of the lines ... they should be basically glowing for this style. Right now they blend in too much.

[Edit -- Yay! I searched around and found the Shapes.config file, and just set HDR to true there. Thanks so much for the foresight ]

 

Okay, just flagging that I used Immediate Mode to redo the lines using ArcTo as mentioned above ... and holy moly its awesome. Great product. If anyone is thinking of purchasing, I highly recommend ...

It was really easy getting it to work with ArcTo once I got used to it, and I even realized I could do outlines if I want super easily by making a thicker line behind my main one thats black. Good stuff!

 

Hi Freya,
Picked this up yesterday, really excited!

On Unity v. 2020.2.1f1, with URP 10.2.2, anything rendered with Immediate Mode does not actually appear. The Procedural Tree scene does not work for example. I have tried the different camera callbacks as well as switch to a default forward render pipeline for URP just in case it was some setting of mine related to transparency etc. Component based shapes work fine.

I am going to try upgrading to the new LTS, 2020.3.2f1 and see if that changes anything. I'll post when I know.

Thanks for making Shapes!

Edit 3, for clarity : In order to test if this is an issue with some setting in my project, I Installed Shapes via package manager into a blank URP project. I received a pop up message to the effect of the plugin locating URP and updating the shaders to reflect. Did not see that message when I installed the package in my main project. Some time I will invest in trying to figure out what is happening there. I have strange issues with my project sometimes related to assemblies because my code is in namespaces. For now I'll be using component versions of shapes.

 

Are you using the recent version of Shapes (v3.2.3)? Some earlier versions had issues that have been resolved so that should be the first thing to check.

 

Do you know if this works with 2020, standard rendering, for Oculus Quest VR?

 

it should yes!

 

Hi there, enjoying the tool so far thanks. I am trying to make a curved UI and have realised it might be tricky to do with Shapes shapes Do you know if it might be possible to deform and bend rects? I can see there is an arc tool that might help me but it would cool to be able to bend any shape.

Edit
I think the billboard setting has got me there. Seems that takes Z into account

 

Is it easy to create decals (attack range/area) with this package? Some examples

 

there's no way to bend/morph shapes, but it sounds like you want to use the arc shape?

kinda, it depends on how much control you want over the look of it, there's obviously limitations in Shapes on what the shaders will look like, on top of not having support for projecting onto surfaces, but you can definitely do stuff in this direction! There's an example of this included in the example screenshots too

 

Looks fun! Unfortunately, most shapes are only showing in the left eye with hdrp vr. This is 2020.3.4f1 with shapes 3.2.3 using openxr and hdrp 10.4.0.

Here's a sample scene from each eye:

 

Hello,

I saw that immediate mode in HDRP wasn't working at one point. Did that ever get fixed? I just switched my project from BiRP to HDRP and wondering if I cant use what I had going now (movement grid ala x-com done with immediate mode).

[Edit -- I figured it out. I just searchd HDRP in your docs and it came up in one place, pieced it together from there. Very easy. Thanks for a great product!]

 

Hello @Acegikmo, super excited to finally have purchased Shapes, excellent asset!
Currently the Disc component API only gives access to Start and End angles in Radians, however in the Editor Inspector we can choose Degrees and Turns. Is there some way for me to set the angle value using Degrees? Or will I need to convert to Radians always?

 

Are there any known issue with Shapes and WebGL? I just did a quick test build of my game for WebGL and most of the Shapes components that I'm using seemed to be ok except for circles which were missing. If that's a known issue are there any workarounds?

 

Hi,
This asset looks great - will it run on Universal Windows Platform (HoloLens - DirectX)?

Thanks!

 

Shapes uses radians all across its internals, so, you have to convert!

degrees*Mathf.Deg2Rad // degrees to radians

turns*ShapesMath.TAU // turns to radians

unfortunately yeah, currently Unity (and/or google chrome?) has issues with GPU instancing on webGL in some browsers. I don't know of the timeline for a fix on that, since it's out of my control, but there's more info on that here. you can of course also turn off GPU instancing in Unity and in Shapes

should work as far as I know, as long as it has support for GPU instancing!

 

Is it possible have a component for us to override and draw custom shapes like using the Immediate Mode so that I can have draw order working correctly easily.

I was trying to re-create dashed spline by drawing a lot of line segments. It is very hard to use Line component in this case.

 

Cheers! Is there a recommended way to draw shapes in 2d behind sprites ordered by SpriteRenderer/Canvas "Order in Layer", or to sort in 3d space using transform Z? Otherwise, is there a way to draw shapes to a render texture via another camera so I can try to sort that behind my sprites?

 

It looks like the static Draw helper doesn't support changing draw layer or depth. I was able to achieve the procedural effects I needed by creating a hierarchy of GameObjects and attaching ShapeRenderer components (eg the provided Line, Rectangle, Disc components), one per object since it won't let me attach multiple. Then I could configure params of each shape at runtime from my other scripts AND access draw depth and layer properties.

Very cool library. It'd be awesome if the static Draw helper could support draw depth and layer for drawing in immediate mode since this would be way cleaner than having prefab hierarchies of template objects.

 

unfortunately, by nature of how immediate mode works it will always draw in the order you issue the calls. there are however ways to work around it, for instance, if you use the opaque blend mode, then it will always be sorted correctly since they read and write to the depth buffer. you can also change where in the render pipeline the whole command buffer is run, using the second parameter of the Draw.Command() function

as for using layers to filter drawing, this is also not really possible, but with a little bit of extra code you can cull based on it if you want. more elaborate answer with example code in this feedback thread!

 

Thanks for your reply and the reference to that feedback thread! IMO and as a feature request, it'd still be nice for Shapes to include a helper class to simplify drawing with sort order from code, even if it's not 'true' immediate mode. (The explanation for why immediate mode itself doesn't work with draw depth makes sense to me.) Maybe a DrawManager prefab that handles the necessary game objects hierarchy? A lot of us rely on SpriteRenderer draw depth with 2d games and the workarounds so far seem a little clunky / require homegrown solutions.

Cheers!

 

Is there something I am missing as the sample gallery does not seem to be working for me in the latest 2021 stable version using URP:

 

that looks weird, did you update an existing install of Shapes in that project? If so, it might be worth trying a clean install

you can also try regenerating shaders and materials from the advanced menu at the bottom of the shapes settings window

in addition - if you're using any experimental URP things, or the 2D renderer, it's possible things aren't working correctly there either

edit: I just opened it in 2021.1 URP and it seems fine on my end

 

How can I make this ?

 

I have an issue with shapes (drawn using immediate mode) flickering.

You can see it happening in this video. I'm stepping frame by frame here, as you can see the lines and circles attached to the asteroids are flickering. This video shows the same thing on another shape, this time it's running in realtime.

The flickering seems to be with the batch count changing up and down very rapidly - is it possible that some shapes are getting drawn twice? If so, how can I fix this?

Here's a sample of code which draws the circle around the asteroids, just to show I'm not doing anything crazy (I hope):

Code (CSharp):

1. public override void DrawShapes(Camera cam)
2. {
3.    if (_parent == null)
4.       _parent = transform.parent;
5.  
6.    var pos = _parent.position;
7.    var bot = new Vector3(pos.x, 0, pos.z);
8.    var scale = ScaleReference.localScale.x;
9.  
10.    using (Draw.Command(cam))
11.    {
12.       Draw.BlendMode = ShapesBlendMode.Screen;
13.       Draw.DiscGeometry = DiscGeometry.Flat2D;
14.       Draw.Color = Color.gray;
15.       Draw.RingThickness = 3;
16.       Draw.RingDashed(bot, Quaternion.Euler(90, 0, 0), _dashStyle, scale);
17.    }
18. }

 

• The large hue ring is a closed polyline arranged in a circle, where the hue of each point is set to a fully saturated value, going all the way around the hue circle
• The center rectangle is a Quad shape, with a color set in each color
• The border of the quad is a rectangle border
• The drop shadow of the polyline ring are made of Disc/Rings with gradients

Your code looks fine and should work fine! I've recently fixed an issue with instancing in Shapes, which would cause issues like this. I imagine this will likely be fixed in the coming version. In the meantime, you can disable GPU instancing in the Shapes settings, which might help it stop flickering for now