Vectrosity - fast and easy line drawing

Update--version 4.0 available now! Get Vectrosity here. Please post about Vectrosity 4 or later here; this topic is for Vectrosity 3 and earlier.

-----

Funny thing is, as Unity's graphics get ever more advanced, certain simple things are actually not that simple. Drawing lines, for example. There's the line renderer, but it has various limitations. There's GL.LINES, but that can be hard to work with and also has many limitations. Enter Vectrosity, which I hope addresses this lack and goes far beyond, too.

Drawing lines can be as simple as this:

Code (javascript):

1. VectorLine.SetLine (Color.yellow, Vector2(0, 0), Vector2(100, 200));

Or you can even make complete vector-graphics games, like Battle Zone, Tempest, etc., not to mention all kinds of graphs, grids, selection boxes, and anything else to do with lines.



• Not a shader, works on iOS and Android, doesn't need Unity Pro.
• "Free" anti-aliasing when used with textures, which means you don't need FSAA to have anti-aliased lines.
• Can also use textures for making things like glowing lines without full-screen glow effects, dotted or dashed lines, etc.
• 3D, 2D, and point drawing. Lines can be any number of pixels thick.
• Can have continuous or discontinuous lines with arbitrary colors and widths for each segment. This way, with discrete lines, many "separate" lines can be drawn with a single draw call.
• Lines can have end caps, for making arrows, rounded ends, etc.
• Many functions for easily making boxes, circles, splines, etc.
• Fast -- lines only have to update when they change, so static lines take no extra CPU time, which means you can potentially have hundreds of thousands of line segments at high framerates. Even if you constantly update lines every frame, it draws 600K-700K line segments/second on a G5 Mac from 2005 (quite a bit more on modern CPUs).
• 3D vector lines aren't limited to triangles or 4-sided polygons; has a utility for quickly making customized 3D vector shapes from existing meshes, or can automatically make wireframes in code with one function call.
• Helper scripts for making 3D vector objects behave like standard game objects.
• Complete documentation (apparently good enough that someone deliberately bought two copies because of it--really), plus a reference guide covering all functions.
• Complete "Tank Zone" game project is included free, plus dozens of example scripts and demos.
• Low price, so most anyone can afford it.

--Eric

 

This is very cool, Eric. I can think of some cool applications for this.

Bonus points for the Battle Zone clone. I remember when I first discovered that game at Chuck E Cheese.

 

Hi

That's so cool, wow great work!

 

That's fantastic, I can't wait to have a play with it!

 

This looks pretty sweet!

A few days ago I was busy with a hobby iphone project where I needed to draw some lines and found out that wasn't so easy with Unity. Ended up with mis using the linerenderer but it doesn't do well with curves.
This utility would fit perfect in my project, can't wait to use it

 

Oh man that is awesome!

BattleZone was my favorite game at the arcades when I was younger and it's one of those games that one day I hope to remake myself one day just for fun.

I can't wait to see your clone! Keep up the fantastic work

 

Magnificent stuff Eric.

I could have used this so many times in the past and I know I will use it so many times in the future. Can't wait to take it for a test drive.

Best Regards,
Matt.

 

Aw man any chance I'll be able to get a fiddle with this before the end of the month? I would love to use it for this month's experimental gameplay entry.

 

Glad to see there's some interest in this. As for release dates, if it's before the end of the month, I'm afraid it will be just barely....

--Eric

 

Ah well I wanted to make the game anyway so y'know.

 

Another little demo.

This one for drawing 2D lines. You can rotate them right and left with the arrow keys, which is just one transform.Rotate call. One kind of nifty feature is the ability to fill in the ugly gaps you get in the joins when drawing thick lines (see below). It's one draw call for the line whether continuous or not, and you can click for quite a while before hitting the limit, which I actually set quite low, relatively speaking....

--Eric

 

The demo works great!

Probably way too late but it could still be helpful.
I just remembered something; when I was using XNA in its early beta days there was this Microsoft guy who created also a line drawing utility for XNA in C#. Although it depends heavily on shaders, it could still be of use, you can find it here.

 

I want this!

 

very very awesome. Looking forward to tinkering with it much.

 

This is awesome. I'd consider using it if it were possible to make it not draw lines not seen (so you couldn't see things through walls).

 

Currently do could do that using a linecast--if the object is behind a collider, turn it off. With Unity 3, I think it might be automatic, if you used occlusion culling. This is because there's a Visibility.Dynamic mode for 3D vector objects.

Dynamic means the vector object is drawn using the transform of its "parent" object, and if the "parent"'s mesh isn't visible, then the vector object isn't drawn. I found a trick for using OnBecameVisible and OnBecameInvisible for this, which works as expected but adds no extra draw calls. So you get 1 draw call for the vector object but no draw calls for the "parent", if desired. You can still use a standard mesh for the "parent" like in the demo, which does add a draw call of course. In any case, with occlusion culling active, OnBecameInvisible should fire when going behind a wall.

Alternatively, I was experimenting earlier with a way of drawing vector objects so they are actually in the 3D scene and not a 2D overlay, but that will have to wait for an update since I don't want to keep adding features forever and never release anything.

--Eric

 

following

 

Demo 3: Scribblecube! A simpler one, but kinda psychedelic if you max out the number of points and zoom in a ways. The actual limit is about 16000 points per line, but that basically looks like a solid blob, which isn't very interesting....

--Eric

 

Looks amazing, but if you look to the outside of the glorb, from near the edge, many of the lines are broken. This ends up making for an interesting sort of laser show, as they reform. :?:

 

Yep, that's the result of the 3D lines intersecting with the camera's near clip plane. It's a bit odd to see like that since the lines are drawn in 2D.

--Eric

 

This will be really useful for developers wanting a grid drawn in their game. Any word on pricing?

 

Yep, that was the main thing that got me started on this actually.

I'd say $9.95.

--Eric

 

One last demo...some selection highlighting and line drawing.

Yes, I'm almost done.

--Eric

 

Cool.

Any idea why going fullscreen makes me lose the ability to select multiple woodballz?

 

Hmm...no issues with selecting multiple wooballz in fullscreen here. What browser are you using?

--Eric

 

Safari 4.0.5, OS 10.6.3.

 

Same browser here, OS 10.4 though. Also tried Firefox and that's fine too.

--Eric

 

Works:
Firefox
Camino
Opera

Doesn't:
Safari
Chrome

 

That's pretty weird...I'll submit a bug report when I get 10.6.

--Eric

 

Wow, this is really spectacular.

 

I hear Unity 3.0 is including accelerated vector graphics via an external hardware unit called the "Vectrex." It includes features that don't exist in your software version, Eric. Such as a photoshop template supplied for printing high-tech plastic color gradient overlays!

 

Dammit. OK, Vectrosity is officially delayed by two weeks while I implement color plastic overlay printing, using scripting. Don't tell me that's impossible, because it's not. I'll resort to undocumented APIs if I have to. AssetDatabase.CreateStuffFromThinAir(), here I come!

--Eric

 

This is what development is all about :3

 

Sorry about the delay; I was pretty sure this would have been done days ago. Aside from holidays, I had a rethink about some stuff. If it's any consolation, I mentioned before about 200,000 line segments per second on my aging computer...now it's 620,000 3D transformed segments, regular 2D lines are 740,000. And now I think it's fast enough for good this time.

More importantly (since lines only have to update when they actually change anyway), I streamlined some API stuff that in hindsight wasn't as nice as it should have been. I'm definitely for sure done with the coding for now, so expect this in the next couple days. In the meantime, you can play Tank Zone (you get the project for this when you buy Vectrosity).

--Eric

 

At last! That was certainly way more involved than I thought it would be back in May. Personally, I'm going to use this in every single project I work on from now on, whether I actually need to draw any lines or not. 8)

Get Vectrosity here.

The web page doesn't really have much there at the moment...have to take a short break first.... But at least you can get your hands on Vectrosity right now.

I hope people find it useful and nice to use. It's been tested pretty well by now, but once others start in on it, I'm sure 5 zillion issues will instantly become apparent...sigh. Still, I ended up writing a stupid amount of documentation (there's a user's manual and a reference guide, which I tried to set up in a similar way as the Unity docs), and there are a bunch of examples in the VectrosityDemos package, so hopefully that will explain most things. If you post feedback here I will try to fix/enhance stuff as necessary.

--Eric

 

Loading this forum every five minutes finally pays off

 

Cool stuff, does it play nice with C# if the rest of my project is done in C#?

 

The Vectrosity scripts themselves are all in C# actually. I needed to explicitly specify ref/out variables in some places, as well as use generic Lists, which you currently can't do in JS. Also JS does add a little extra size to iPhone builds...only a trivial amount if you have iPhone Advanced, but still I figured it would be best in this case to keep the core functionality as C#, even aside from the technical aspects.

The demo scripts and Tank Zone are all in JS though. I'd still be working on Tank Zone if I had to write it in C#.... As far as Vectrosity itself goes, there's no issue using it with any language. Just keep the Vectrosity scripts in Standard Assets.

Many thanks to the buyers so far! And sorry again about the wait.

--Eric

 

I just bought Vectrosity ! Thanks a lot for this wonderful piece of work

 

You're welcome. The web page is updated. Has some code examples and stuff. I still have to update the utilities page to include Vectrosity; I decided each one should get its own page like that instead of lumping them all into one. I appreciate everyone who's made this my fastest-selling utility so far! I think it's my best, too.

--Eric

 

"Don’t have Unity Pro, so GL.LINES isn’t an option?"

What's implied by this? That GL.LINES is better or just an alternative?

Just asking because it could confuse your potential customers making them think they are buying something that's already in Unity. If GL.LINES offer worse functionality than your project then maybe rephrasing that sentence could aid sales even further?

It looks amazing and it's amazingly cheap so I'm trying to come up with a use for it.

 

Just an alternative, and in fact a worse alternative actually, so that's good point.

Well, if you buy it now then you get it amazingly cheap; I've been told I should raise the price. Then you'd have it for when you need it sometime.

--Eric

 

I made a simple script using Vectrosity, that displays circles. Nothing fancy really, just for fun.

Code (csharp):

1. // Circle function by Bournellis Ippokratis, for Vectrosity. Just for fun, no optimisations.
2.  
3. var lineMaterial : Material;
4. var nrOfCircles : int = 10;
5. function Circle ( xcenter : int, ycenter : int, radius: int ) {
6.     // Create a javascript array to hold the points of the circle
7.     var pointsArray = new Array();
8.     // Calculate each point of the circle.
9.     for (var theta : float = 0; theta < ( 2 * Mathf.PI ); theta += 0.01 )
10.          { x = xcenter + ( radius * Mathf.Sin ( theta ) );
11.            y = ycenter + ( radius * Mathf.Cos ( theta ) );
12.             pointsArray.Push ( Vector2 ( x, y ) );
13.     }  
14.     // copy the data from the javascript array to a Vector2 array
15.     var circlePoints : Vector2[] = pointsArray.ToBuiltin ( Vector2 );
16.     return circlePoints;
17. }  
18.  
19. function Start () {
20.     // Set up the vector object camera (using the camera tagged "Main Camera" by default)
21.     Vector.SetCamera();
22.     // Make a couple of circles
23.     for ( var i : int = 0; i < nrOfCircles; ++i){  
24.         var linePoints = Circle ( Random.Range ( 100, 200 ), Random.Range( 100, 200 ),
25.             Random.Range ( 10, 100) );
26.         var myCircle = new VectorLine ( "myCircle", linePoints, Color.white,
27.             lineMaterial, 3, 0, 1, LineType.Continuous, Joins.Fill);
28.         // Draw the circle
29.         Vector.DrawLine(myCircle);
30.     }
31. }

 

Cool! I'm planning on having a helper function for drawing bezier curves for the next version, similar to how rectangles work currently with MakeRectInLine.

--Eric

 

Hey. I just extracted the folder and dropped the standard assets folder straight into my iPhone project and it is kicking up a fuss about line 95 in VectorManager.cs I checked it out and can't see a problem.

Any ideas?

 

@Eric : will buy this great extension right now, as I did with everything you released.

BTW, the issue mentioned by Jessy occurs here too, with the same differences between browsers. I guess it comes from the way the web player handles modifier keys in fullscreen mode. I have the very same problem on my current project, which makes use of mouseclick + alt key to rotate objects : works well in non-fullscreen, won't work at all in fullscreen. This is in Safari and doesn't happen in FireFox.

 

Did you set the .NET level to 2.1 instead of 1.1? Also, there's a page in the docs with some iPhone notes (second to last page).

Great! That's kind of strange with the browser thing, since all of them I tried here (Safari, Firefox, Opera) have no problem shift-clicking in full-screen. I think it must be OS-related as well as browser-related.

--Eric

 

Ah cheers. Yeah I glanced over the notes but the .NET version change didn't occur to me... even though it is written there... several times.

I'm in the wrong business.

 

I could try putting flashing arrows in there too, if that would help.

--Eric

 

Eric,

Great work. I started with your VectorLines Wiki post and got it to work in a test project. But I couldn't get it to work with an orthographic camera. Nothing was drawn. Why do you think that would be? Is it possible to make this work with an orthographic camera,or is that a limitation?

Thanks,

Brian