Shapes - a real-time vector graphics library

I think the answer is yes but it depends what shape you're using and what you mean!

The polyline has support for rounded corners (though not with a configurable radius, but immediate mode has helpers for drawing circular arcs), and some other shapes do too (triangle and rectangle both have rounded corner support)

 

Thanks for your reply. To give a better example of what I'm trying to do, see the attached screenshot. By the way the asset is amazing so far! Looks like I can use ArcTo for it?

 

1. Does it support runtime vector modifying and creating?
2. Does it currently support any UI Components? Would a package like https://assetstore.unity.com/packages/tools/gui/translucent-image-fast-ui-background-blur-78464 work with this system?
3. Whats the state of webgl support?

 

That looks like a job for the polyline and ArcTo yeah! though ArcTo is currently only available in immediate mode, there's no polyline inspector/component way to do it at the moment

1. Yes! Shapes is designed to be dynamic, especially the immediate mode drawing, since it doesn't have any GameObject overhead
2. No, Unity's UI system is fundamentally incompatible with GPU instancing and mesh renderers, so unfortunately you can't do it (I've tried)
3. It should be supported everywhere GPU instancing is supported! There has been some issues on WebGL before, though last time it was due to unity bugs, and at one point bugs in chrome. You can always get a refund in case it ends up not working out!

 

Hi. I work at an animation studio and we're using Unity HDRP on our next project. It's a sci-fi kids show and I'm using Shapes to create all the HUDs in our vehicles. Here's a sample. The entire HUD was created and animated using Shapes(except the pin map)

It looks great with RTX -but we're using PathTracing to render the show. When I switch to PathTracing the Shapes objects all render black.

I assume this has to do with shaders. I'm not sure if its possible or how much work it would be to make Shapes compatible with pathTracing. Any ideas?

Either way, thanks for the amazing tool.

EDIT: I found a solution for anyone else who may be interested. You can put the Shapes objects on their own layer and create a Custom Pass Volume for that layer like in this thread:
https://forum.unity.com/threads/path-tracing-text.1129553/

 

Can someone help me understand the math involved to determine the proper "radius" setting for a square?
I have a 2.5d grid that I want to use this to visualize. The grid runs in the XZ plane and has square cells of configurable size.

I set up a grid with cells sized 5 and then a "Regular Polygon" in Shapes, 4 points, set to a "radius" (I use air quotes here because radius is generally for circles) set to 5. I then rotated the Shape 45 degrees because 0 was point up.

However with the Square radius set at 5, it is far larger than a 5 unit grid cell. I'm assuming the 5 is a measure from the center to one corner which being a diagonal would be longer than center to one side. 3.5 seems about right for a 5 unit square, but that's just eyeballing it. What I need to determine - and I'm NOT a maths person -- is what formula I can use to determine the proper Shapes radius setting for a given cell size.

 

I want to setup a system of icons which render behind scene geometry in some cases, potentially there will be a very large number of icons so I'd really like for them to be instanced.

Is it possible to enable instancing for shapes which have a non-standard depth mode?

 

Hi Freya, I bought shapes a couple months ago in a sale and finally have gotten around to using it. I love how well it works in the editor, but I've run into a big issue with using it for WebGL builds -- having any shapes at all (non-immediate mode, have not tested in IM) in a scene causes the game to freeze for a noticeable time (1 second up to 30 seconds depending how many shapes are present). Even a single quad causes this noticeable startup freeze. If the game is spawning more shapes, it will freeze again for up to 15ish seconds whenever it seems to exceed some threshold. I used the frame debugger to reduce the drawcalls as much as possible (eliminating all polylines helped, but doesn't address the WebGL issue), but again, this is happening with any shapes whatsoever.

WebGL is a target platform for our project, so this makes the package a bit unusable. I'm using URP in a 2d project in this case. Is this a known issue, or is there anything else I can try to do to minimize this issue? I saw a few mentions of possible WebGL issues on this thread, but not sure I expected it to be this noticeable.

 

Is there an example on how to use Draw.Dash via script? I see the online documentation doesn't cover it well and the Draw.LineDashed is now obsolute. Ie. Docs still talks about "Dashed" and not UseDashes, and no reference to DashStyle.

Got it to work like this on my last leg of the points, but trying to customize the DashStyle isn't working, just defaultDashStyle seems to work.

using( Draw.Command( cam ) ){
Draw.LineGeometry = LineGeometry.Volumetric3D;
Draw.ThicknessSpace = ThicknessSpace.Pixels;
Draw.Thickness = 10;
Draw.UseDashes = false;
Draw.Matrix = transform.localToWorldMatrix;
if (LinePoints != null)
{
if (LinePoints.Count > 1)
{
for (int i = 0; i < LinePoints.Count-1; i++)
{
Draw.Line(LinePoints, LinePoints[i + 1], Color.red);
var rot = Quaternion.LookRotation(Camera.main.transform.position - LinePoints);
rot *= Quaternion.Euler(0,180f,0);
Draw.Text(elemA, LinePoints, rot, "Point "+i);
}
Draw.UseDashes = true;
Draw.DashStyle = DashStyle.defaultDashStyle;
Draw.Line(LinePoints[LinePoints.Count-1], IndicatorPoint, Color.red);
}
}
}

 

Hello, I'm getting a z rendering issue as you can see my sprite is inside the disk but the camera is rendering the disk over the sprite. Any fix for this?

 

Hello I'm trying to use Shapes to draw a line from an UI element to a game object in the world space. When the geometry is set to Billboard it ends at the correct position but when set to Flat 2D it doesn't. I've tried converting the the world position of the object to screen space and converting it to the local space of the Line Object but it doesn't point to the game object correctly. I have the line object as a child to the canvas where I'm drawing the rest of the UI. I'm not sure where I'm going wrong.

 

It's a little hidden right now, but, go to the changelog for Shapes 4.0.0 and there are code examples for how the new dash styling system works!

This is a general sorting issue in games - the quick and easy fix is to use opaque shapes instead of transparent, that way the depth buffer will make sure they sort correctly. Otherwise, you can override the sorting and hardcode it to some extent, more info about sorting in the docs!

This depends on if you're using components or immediate mode, but effectively, Flat2D will only use the xy coordinates of the two positions, so if you want to flatten it along a specific axis, you need to make sure the object (or the drawing matrix, if you're using immediate mode) is aligned with that plane, and the coordinates you pass in are in the correct space

 

If I understand correctly, textures are not supported with this plugin, right? It's purely shapes using colors. The LineRenderer uses textures for example, which is functionality I need.

 

Hi! I'm having fun drawing nifty graphs with Shapes and recently added icons to the mix which use Shape's immediate mode Draw.Texture:
https://twitter.com/runevision/status/1594027375347392512

It all works great, I was just wondering if there's a special reason why the texture draw calls are not batched or instanced, even when they all use the same texture and all come right after each other? I mean, the Shapes docs also say instancing is not supported for this draw type, I'm just curious to better understand why.

All the lines batch together in a single draw call, as do all the rectangles. I'm no super shader expert, but I would have thought the texture draw calls would be simpler than those other draw types and wouldn't have been a problem to batch as long as they use the same texture.

I'm also wondering if there's a specific advantage to using Shapes for this draw type? If I were to use a different (non-Shapes) solution for drawing just the icons, Would there be any obvious simple approach to use for that, and is there anything I should keep in mind to make the two things play well together?

Either way, thanks for a great library!

 

yes! all shapes use flat colors/gradients, none of them have support for using a custom texture, with the one exception of the immediate mode

Draw.Texture()

mostly because it would take some extra effort as the system wasn't built to branch based on differing shader properties!

however, I've done that work now, so it'll make it into the next update

The only real advantage is that it would be part of Shapes immediate mode infrastructure, as in, you can use it in tandem with the transformation functions, blend modes etc, and it would work as you would expect with other shapes

 

Thanks for the insight, and thanks a lot for implementing support for instanced Draw.Texture!

 

Hi is it possible to alpha-mask elements with shapes? I have a grid of Lines and wish to soften the perimeter of the grid on the edges so the lines fade out as they reach the ends. I have tried polylines using multi-colour sections and this gets me a fading line at the ends but they don't seem to look as crisp with anti-aliasing as the Lines do for some reason and these lines are very fine in width. Thanks

 

Very excited to explore this for some dynamic UI assets! Are there any limitations with the shaders for VR support? Can we change GL targets and stereo config without breaking?

Thanks for all your awesome work!!

 

Hello, I was wondering if there's a safe way to delete unused shaders? I'm only using the Disc ones, and according to the Memory Profiler, pretty much all Shapes' shaders are loaded (for a total of 28.4 MB). I'm having a error log if I delete the unused ones (from ShapesMaterials.InitMaterial), I guess that I can remove the log?

 

Hey @Acegikmo

using Shapes 4.2.1
using Unity 2021.3.18f1
using URP, with a 2D Renderer

I have a scene with a 2D Global Light and some 2D Spot Lights which affects my GameObjects with a SpriteRenderer but all the Shapes Components are not affected by the light.
Can I set the shapes up to be also affected by the 2D lights, if so, what do I need to do for it? Tinker with the components or the URP 2D Renderer Asset maybe?
I looked into the documentation but I couldnt find anything regarding this functionality, if it is documented, would be great if could link it

 

Some shapes have a gradient overlay that could double as an alpha mask, but right now lines don't support it. There's no easy way to do this right now, unless you have a very simple background color, then you might be able to use other shapes and layer that color on top to emulate transparency fading. for example, a radial gradient on a disc, that's transparent in the center, and has the opaque background color on the outer edges, on top of a grid, would make the grid look faded. but yeah, kind of a hack. You can use the stencil buffer for masking as well, but then you'll only get on/off style masking without gradients

As far as I know, it all *should* work, but I haven't tested it myself. I know people have used Shapes in VR just fine at least!

Hm, yeah it shooould be safe to remove yeah, you'll just need to keep track of which ones you're using vs not yourself. (the reason Shapes loads all is that there's no way for Shapes to detect which ones are used in Immediate Mode drawing, and so they all have to be included)

Shapes doesn't have lighting/shadow support, it's all unlit! This is also something I'm not planning on adding I'm afraid, due to the increased complexities with all the different render pipelines

 

Thanks for the reply, and argh, I understand.

 

In HDRP, in the context of camera-rendered UI, how can I prevent shapes from being affected by post processing like motion blur? I setup a custom pass, which seems to work perfectly when the transparent shapes are over opaques such as the terrain... but when UI shapes are rendered in front of the skybox, the motion blur is still applying.

EDIT: omg I'm an idiot... in case anyone ends up here with the same problem.... in your camera's culling mask, disable your UI layer. The custom pass is rendering it, otherwise you are drawing it twice.

 

Is there a bigger showreel of actual uses of this library in context of an actual scene? All of the demo clips I see are really focused on what primitives there are, in isolation.

For example, do I draw in world space or in local space or in screen space, and if I do draw in world and local spaces, are shapes depth-clipped against all other geometry like any other polygon? Is it done in the transparent pass or the opaque pass, or both? Can I draw in world space but have the shapes overlay like a canvas instead? I know that it's an "Unlit" shader system, but that's about all I get. I think the one-generic-word name of the plugin makes it hard to find actual usage.

 

None as far as I'm aware collected in one place! though you can find a few examples of people sharing their work on twitter

Shape components are mesh renderers, and will be drawn like any other mesh. Immediate mode drawing can be done in whatever space you want! It all just depends on how you set up the drawing matrix

Depends on which blend mode you're using. You can draw with either. Component based shapes will be placed in either pass based on the blend mode you've set, while immediate mode shapes are drawn depending on where in the render pipeline you insert the call. there's more info on this in the docs here.

I'm not entirely sure what this means, but yes you can disable ZTest when drawing, which means you can make them draw on top of everything, regardless of depth, and yes you can draw them in view space if you like. Shapes doesn't support Unity's canvas itself, but you can certainly use it to make in-game UI/HUD

 

For example, the Text Mesh primitives "poke through" the ZTest, but the rest of the shapes in this demo do not. I don't see any particular difference in the configuration of these primitives to make it look this way. If I am using a primitive like these, what's the best way to make it ZTest in front of the cube like the text does? If I am using Immediate Mode, what's the same approach?



[Edit:]

Okay, the Unity docs don't really explain the numerical values for different RenderQueue ranges, while the Shapes component hints at only two.

1. Background = 1000
2. Geometry = 2000
3. AlphaTest = 2450
4. GeometryLast = 2999 (I think)
5. Transparent = 3000
6. Overlay = 4000

With a value of Overlay, the shapes begin to be drawn after all the other 3D elements. But you also need to knock out the Depth Test to let the new drawings show regardless of the existing stuff.

(Still no idea why the Unity built-in "Font Material" and Text Mesh component are set up to punch through, but that's not Shape code.)



Just looking through code to see where/how I would set the render queue and depth tests for Immediate Mode, now.

[Edit2:]

Immediate Mode has

Draw.ZTest = CompareFunction.Always;

and per Shapes documentation, the RenderQueue is irrelevant and all drawing in Immediate Mode is done in URP at the BeforeRenderingPostProcessing phase, so if you combine the two, you get equivalent appearance to the image above.

 

Really liking the Immediate Mode results already.

I noticed your recommendation to have only one ImmediateModeShapeDrawer instance which essentially did all the drawing, so that it was all in one DrawCommand context and thus you had the best control over the ordering of what got drawn.

I added this interface to your API, so that an ImmediateModeShapeDrawer can then parcel out the job to other properly vetted objects in the right order.

Code (CSharp):

1.     public interface IImmediateModeShapeDrawer
2.     {
3.         public void DrawShapes(DrawCommand context);
4.     }
5.  

This reduces the default DrawShapes(Camera cam) implementation down to a very manageable list of tasks, while remaining within one drawcall command. Contrived example:

Code (CSharp):

1.         public override void DrawShapes(Camera renderCam)
2.         {
3.             using (DrawCommand context = Draw.Command(renderCam))
4.             {
5.                 // draw enemy target markers
6.                 foreach (Enemy enemy in trackedEnemies)
7.                     enemy.DrawShapes(context);
8.  
9.                 // draw my own shapes last
10.                 DrawShapes(context);
11.             }
12.         }
13.  

 

Hello! Couple of questions for ya. I had bought the asset a while ago. I tried using it recently and was unable to see anything in the viewport, the asset doesn't seem to render. I also get errors from URP about some stuff not supported. It advises me to click a button to add support. I'm don't remember the exact error and I can't look it up currently as I'm on break at work. I'll get more concrete info later today. In the meantime, I am using ECS which has a dependency on a rendering package. When you mention that ECS is not supported, are you referring to a similar situation as mine? And if my configuration is not supported, is there an ETA on some rendering support?

 

as far as I know (I could be wrong) ECS shouldn't disable the use of regular rendering methods, so it should work fine. As for the errors you're getting, try doing a clean reinstall of shapes! By Shapes not having ECS support, I just mean that it doesn't make use of its specialized rendering tools, but it should work fine even if you use ECS elsewhere

 

anyway to draw gradient from interior of geo to exterior of geo? The radial gradient option seems to be independant from the geo. I'm thinking something similar to how you might fade the edges of a button for an exterior glow effect.

 

nevermind! looks like I can set all the points I want, and then their colors/alphas, this will work well. Thanks!

 

What is Flat2D concretely? I create a new camera that I call uiCamera, and I assign that to a Screenspace camera. Then I run the following script. The line only appears if I disable Flat2D. Why?

Code (csharp):

1.  
2. using Shapes;
3. using UnityEngine;
4. using Utils;
5.  
6. namespace TestShapes {
7. public class Controller : ImmediateModeShapeDrawer {
8. Camera _uiCamera;
9.  
10. new void OnEnable() {
11. base.OnEnable();
12. _uiCamera = GameObject.FindObjectOfType<Canvas>().worldCamera;
13. }
14. public override void DrawShapes(Camera cam) {
15. base.DrawShapes(cam);
16. // if (cam != _uiCamera) return;
17. Debug.Log($"cam {cam}");
18. using (Draw.Command(cam)) {
19. var dc = new DisplayConfig(cam);
20. // Draw.LineGeometry = LineGeometry.Flat2D;
21. Draw.ThicknessSpace = ThicknessSpace.Pixels;
22. Draw.Thickness = 5f;
23.  
24. var colors = new Color[] {
25. Color.cyan, Color.magenta,
26. Color.yellow
27. };
28. for (var z = 0; z < 2; z++) {
29. var color = colors[z + 1];
30. Draw.Disc(new Vector3(dc.SLeft + dc.ScreenWidth * 0.05f + z * 0.1f, dc.SBottom + dc.ScreenHeight * 0.1f, z), 0.05f, color);
31. Draw.Disc(new Vector3(dc.SRight - dc.ScreenWidth * 0.05f + z * 0.1f, dc.STop - dc.ScreenHeight * 0.1f, z), 0.05f, color);
32. Draw.Disc(new Vector3(0 + z * 0.1f, 0, z), 0.1f, color);
33. Draw.Disc(new Vector3(0 + z * 0.1f, 0, z), 0.1f, color);
34. Draw.Disc(new Vector3(0 + z * 0.1f, 0, z), 0.1f, color);
35. Draw.Line(new Vector3(0 + z * 0.1f, 0, z), new Vector3(2, 0, z), color);
36. }
37.  
38. }
39. }
40. }
41. }
42.  

With flat2d:


Without flat2d:


(Unity 2022, BRP, Mac OS X, M2 Metal)

Are there any performance implications of turning off flat2d?

 

This may be a large ask, but in immediate mode, is there any way to click on a vector to get the svg?

Essentially I'd like to be able to click to select a `Draw.Disc()`

 

Not sure what you mean by SVG here, but there's no plans to add interactivity to Shapes right now! It's a rendering-only library

Flat 2D only works in the local XY plane of the current drawing matrix (or the local space of the component, if you're using those), but your code is assigning coordinates for X and Z.

if you're primarily working in the world space XY plane, you can rotate the drawing matrix so that all 2D drawing happens in world XZ, when you're using local XY coordinates in your drawing functions.

And yes, flat 2D is computationally more efficient on the GPU than both 3D and billboarded polylines

Code (CSharp):

1. // Drawing on the XZ plane, with 3D coordinates and billboarded lines
2. Draw.LineGeometry = LineGeometry.Billboard; // we can't use Flat2D here, since Flat2D works in XY
3. Vector3 a = new(1, 0, 2);
4. Vector3 b = new(3, 0, 4);
5. Draw.Line( a, b );
6.  
7. // Drawing on the XZ plane, with 2D coordinates
8. using( Draw.Scope ) { // resets rotation back to what it was before, when leaving this scope
9.     Draw.Rotate( Quaternion.Euler( 90, 0, 0 ) ); // aligns drawing Y with world Z
10.     Draw.LineGeometry = LineGeometry.Flat2D; // restricts coordinates to XY only
11.     Vector2 a = new(1, 2);
12.     Vector2 b = new(3, 4);
13.     Draw.Line( a, b );
14. }

 

Hey there,
I am using a UI framework which uses camera-based UI, basically the shapes do show up so no problem there.
That being said, is it possible to have a shape, a square for example, fit its parent GameObject through the inspector?
Or would I need to make a script which modifies the square dimension based on the parent component?
Thanks in advance.

 

Maybe I’m blind but what’s the API for accessing all of the “details” in the documentation. For example Rectangle has things like pivot but I’m not finding it in any overload for the Draw class - are those not available for IM mode?

 

hey @Acegikmo , is there any API docs around?
just trying to create shapes using code(i don't have problem drawing them but have problem modifying their property such as dashes!) but cant figure out how to apply my desired settings , because there is no API manual at all?
or am i missing something?
for instance i'm trying to apply some dashedDisk and then modify them(first pic) but i have this error(second one)...

thanks

 

Hi there!
Is there any way of modifying the material? I'm particularly looking to use a different shader, or at least to be able to set an emissive color.

 

There's currently no auto-fitting system in Shapes, though the experimental immediate mode canvas might help a little!

Immediate mode and component based drawing have some minor differences in their properties. Generally you'll find all the positioning properties in the Draw.Rectangle overloads, but in some cases some positioning helper methods are only available in component mode, and vice versa, mostly because transform components don't exist in immediate mode, and so the design of the positioning is different

There's no way to use a custom material, since Shapes uses heavily specialized shaders for its rendering.

However, if you want to set emissive color for bloom/HDR purposes, then you can enable HDR color pickers in the Shapes settings, and assign overbright colors if you like

 

Hi @Acegikmo . Does Shapes support rendering lines in the UI? E.g., drawing a line between two points on the canvas? I noticed that the asset store mentions a UI-related limitation, but I'm relatively new to Unity, so I didn't quite understand what it meant. I know it might be overkill to buy your asset for just this one function, but I imagine I might find other uses as I continue to work with Unity.

I've coded a 2D cardgame prototype that is basically all UI -- the user needs to click on cards and the middle of the screen to play the game, and so the canvas covers my entire screen. (Maybe I should rethink this approach? I like to make strategy games, and in the past they've always been all UI. But in this case I may want to add particle effects etc. I have no idea if those will work on the Canvas.) Occasionally I want to draw a line between two points on what is now UI, and Unity's built-in Line Renderer is not really designed for UI, as it uses worldspace units. I've managed to get the Line Renderer to work with, say, wargame maps in the past, but it's a pain, and it doesn't behave as flexibly as your extension seems to.

Anyway, can your utility help me with my UI quest?

 

Hi! Will Shapes support WebGPU when it's officially supported in Unity 6?

 

Hey,
In description in says "No support for ECS, because it seems to be changing every week". So it's not changing anymore after release. Can we expect ECS support finally? We're building ECS based game and it's critical for us to have a working line renderer.