Vectrosity - Fast and Easy Line Drawing

If you use SetParent to parent lines to another object, that doesn't move or rotate at all, then it will work fine.

--Eric

 

Hi, I'm using vectrosity with a world space canvas, it seems to be working right most of the time but for some reason when the canvas get close to the top of the scene the lines just stop rendering, I can't seem to figure it out how to stop this behavior from happening, any ideas?

Another issue is that after changing the canvas to world space the editor mode for the lines seems to have stopped working.

Thanks!

 

Hello, I'm using Vectrosity to Draw 3d line in 3d space.
But apparently the width is based on pixel size and not 3d space,

I've seen some past comments from people asking similar things and there wasn't any way to do it,
so, as for now, is it possible to draw 3d line using width in 3d space?

Thanks!

 

I'm not really sure what you mean; can you explain in more detail?

That isn't supported.

No, sorry.

--Eric

 

This is the effect that I'm trying to achieve, I have a world space canvas to have that canvas be organized together with other SpriteRenderers to create this outline effect, when the object get close to the upper border or the right border of the screen the lines just stop rendering.

I tested having other sprites not related to vectrosity inside this same canvas and they work just fine if there is any way to prevent vectrosity from stop rendering the lines that would be great.

Thanks!

 

It looks to me that the lines are in fact still being rendered, in the scene view. So I'd assume something about your game view camera is culling the line object, but I don't have enough info to know what it could be. Are you using Draw, or Draw3D?

--Eric

 

Hi Eric, I'm not sure how to go about doing what I want to do in regards to sorting lines.

Let me give you an example; I have a grid in 3D space and I draw lines over it. In certain positions some lines I have drawn are rendered behind the grid lines. I want to change the sorting order so that the grid is always drawn behind the other lines.

I've found canvas.sortingOrder in the documents but I am not sure if this is what I am after? How do I use this? Do I need multiple canvas'? One for my grid one for my other lines?

Thanks.

 

Hi,

Is it possible to create a line-based animation using this asset that resembles a tree growing, complete with branches?

So given a starting point, grow out - starting with a thin line, then widening at the base to a thin tip at the end? It would be along a series of pre-defined paths... I'm looking for a way to create this effect as part of an intro sequence. I suppose the closest example I can think of is the Prune game...

Thanks,
Kieron

 

It depends on whether you're using a canvas or not; it's not clear since you mention 3D space, which doesn't use a canvas (in Vectrosity 5). With a canvas, you use VectorLine.drawDepth. Otherwise, you can use Renderer.sortingLayerName and/or Renderer.sortingOrder on the VectorLine GameObjects.

Yes; probably the simplest way would be to draw the entire line, and set the segments to a transparent color initially. Then you can change the colors of the appropriate segments to non-transparent over time to simulate a tree growing. If you want the width to change as well, you can call SetWidths repeatedly with the appropriate widths in an array.

--Eric

 

Cool, thank-you. I'll give it a go.

 

Worked perfectly, thanks Eric. Do you know if there is any large overhead from switching layers?

 

Not that I know of, but use the profiler to measure any performance questions.

--Eric

 

Hey Eric,

I've been using Vectorsity for a while and I suppose it never was noticeable when I only had a couple lines, but now that I have many many more my project is leaking memory all over.

I'm using Unity 5.2.4 by the way.

I was wondering if there was something wrong with my scripts when I am drawing lines?
It draws a line using a Game Object's children as points and updates the line accordingly.

This one seems to leak memory whenever I move the Game Object.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using Vectrosity;
5.  
6. public class Line : MonoBehaviour
7. {
8.     [Range(0.0f, 10.0f)]
9.     public float thickness;
10.  
11.     public bool connectEnd = false;
12.  
13.     public List<Transform> points;
14.     public List<Vector3> initPoses;
15.     public List<GameObject> objList;
16.  
17.     List<GameObject> killList;
18.  
19.     public VectorLine line;
20.     public GameObject lineOBJ;
21.     Vector3[] data;
22.  
23.     public bool childImport = true;
24.  
25.     public bool die = false;
26.  
27.     public bool link = false;
28.  
29.     void Awake()
30.     {
31.         killList = new List<GameObject>();
32.    
33.         if(childImport)
34.         {
35.             points.Clear();
36.    
37.             foreach(Transform child in transform)
38.             {
39.                 bool linked = false;
40.    
41.                 if(points.Count > 0 && link == true)
42.                 {
43.                     for(int i = 0; i < points.Count; i++)
44.                     {
45.                         if(child.position == points[i].position)
46.                         {
47.                             points.Add(points[i]);
48.                             killList.Add(child.gameObject);
49.                             linked = true;
50.                             break;
51.                         }
52.                     }
53.                 }
54.            
55.                 if(linked == false)
56.                 {
57.                     points.Add(child);
58.                     objList.Add(child.gameObject);
59.                     initPoses.Add(child.localPosition);
60.                 }
61.             }
62.         }
63.    
64.         if(connectEnd)
65.         {
66.             points.Add(points[0]);
67.         }
68.    
69.         for(int i = 0; i < killList.Count; i++)
70.         {
71.             GameObject kill = killList[i];
72.             Destroy(kill);
73.         }
74.    
75.         killList.Clear();
76.    
77.         data = new Vector3[points.Count];
78.    
79.         for(int i = 0; i < points.Count; i++)
80.         {
81.             data[i] = points[i].position;
82.         }
83.    
84.         line = VectorLine.SetLine3D (Color.white, data);
85.         line.material = Resources.Load<Material>("LineMaterial");
86.         line.lineWidth = thickness;
87.  
88.     }
89.  
90.     void LateUpdate ()
91.     {
92.         if(line != null)
93.         {
94.    
95.             for(int i = 0; i < points.Count;i++)
96.             {
97.                 line.points3[i] = points[i].position;
98.             }
99.             line.Draw3D();
100.         }
101.     }
102.  
103.     public IEnumerator Death(float deathClock)
104.     {
105.         die = true;
106.         yield return new WaitForSeconds(deathClock);
107.         VectorLine.Destroy(ref line);
108.         Destroy(gameObject);
109.         Destroy(gameObject.transform.parent.gameObject);
110.     }
111. }

This next script uses Vectrosity to draw text.
Whenever the text is moved or changed it destroyed the lines and recreates the text.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using Vectrosity;
5.  
6. public class LineText : MonoBehaviour
7. {
8.     public List<Vector3> points;
9.     VectorLine line;
10.  
11.     [TextArea(3,10)]
12.     public string text = "Hello";
13.  
14.     public float size = 0.5f;
15.  
16.     public bool left = false;
17.     public bool center = false;
18.     public bool lower = false;
19.  
20.     public float percentSize = 0.05f;
21.  
22.     public Vector3 offset;
23.  
24.     string saveText = "";
25.  
26.     Vector3 savePos;
27.  
28.     Vector3 saveOffset;
29.  
30.     float saveSize;
31.  
32.     public bool autoUpdate = false;
33.  
34.     bool firstRun = true;
35.  
36.     public float width = 0;
37.  
38.     void Awake()
39.     {
40.         if(text == null || text == "" || text == " ")
41.         {
42.             text = ".";
43.         }
44.     }
45.  
46.     void Start()
47.     {
48.         savePos = transform.position;
49.         saveOffset = offset;
50.         saveSize = size;
51.         points = new List<Vector3>();
52.     }
53.  
54.     void Update()
55.     {
56.         if(Application.isEditor)
57.         {
58.             if(Input.GetKeyDown("="))
59.             {
60.                 firstRun = true;
61.             }
62.         }
63.    
64.         if(autoUpdate)
65.         {
66.             firstRun = true;
67.         }
68.  
69.         if(text != saveText || transform.position != savePos || offset != saveOffset || percentSize != saveSize || firstRun)
70.         {
71.             firstRun = false;
72.             saveText = text;
73.             size = ((float)Screen.width/(float)Screen.height) * percentSize;
74.        
75.             savePos = transform.position;
76.             saveOffset = offset;
77.             saveSize = percentSize;
78.        
79.             //print("UPDATE - " + text);
80.    
81.             VectorLine.Destroy (ref line);
82.             line = new VectorLine("line", points, 1.0f);
83.             line.color = Color.white;
84.    
85.             line.MakeText (text, transform.position, size);
86.        
87.             if(left || lower || center)
88.             {
89.                 float length = 0;
90.                 if(left || center)
91.                 {
92.                     float endX = line.points3[0].x;
93.                
94.                     for(int i = 0; i < points.Count; i++)
95.                     {
96.                         if(line.points3[i].x > endX)
97.                         {
98.                             endX = line.points3[i].x;
99.                         }
100.                     }
101.                
102.                     length = Mathf.Abs(endX - transform.position.x);
103.                 }
104.            
105.                 if(center)
106.                 {
107.                     length = length/2.0f;
108.                 }
109.            
110.                 float height = 0;
111.                 if(lower)
112.                 {
113.                     float endY = 0;
114.                
115.                     for(int i = 0; i < points.Count; i++)
116.                     {
117.                         if(line.points3[i].y < endY)
118.                         {
119.                             endY = line.points3[i].y;
120.                         }
121.                     }
122.                
123.                     height = Mathf.Abs(transform.position.y - endY);
124.                 }
125.            
126.                 if(center)
127.                 {
128.                     height = height/2.0f;
129.                 }
130.            
131.                 VectorLine.Destroy (ref line);
132.                 line = new VectorLine("line", points, 1.0f);
133.                 line.color = Color.white;
134.            
135.                 line.MakeText (text, transform.position - new Vector3(length, -height,0) + offset, size);
136.            
137.                 width = length;
138.             }
139.         }
140.         line.Draw3D();
141.     }
142. }

I have no idea what's going on, but I suspect it has to do with the way I am either updating or destroying lines.
I've used the inspector and I've found that the memory increases whenever any line or text line is moved.
It might have something to do with meshes not being cleaned up?

 

Don't destroy lines and recreate them; just update the points.

--Eric

 

Hrm...

But what if the ammount of points change?
Like when I change what the line text says.

The first script leaks when I move lines and it doesn't seem like I am destroying lines and recreating them.

 

Changing the amount of points isn't an issue. You're destroying objects in the first script too; Vectrosity doesn't make any allocations at all during normal usage, except as needed when adding points to a line (which isn't a leak, it's normal behavior when adding elements to Lists).

--Eric

 

Because I was unable to access the game object instance from the VectorLine object (which is good design, actually), I had to modify a few classes, add to next Vectrosity release if you like

VectorLine.cs

Code (CSharp):

1. [SerializeField]
2. string m_renderLayer;
3. public string renderLayer
4. {
5.     get {return m_renderLayer; }
6.     set
7.     {
8.         if (m_vectorObject != null)
9.         {
10.             m_vectorObject.SetRenderLayer(value);
11.         }
12.         m_renderLayer = value;
13.     }
14. }

IVectorObject.cs

Code (CSharp):

1. void SetRenderLayer(string renderLayer);

VectorObject3D.cs

Code (CSharp):

1. public void SetRenderLayer(string renderLayer)
2. {
3.     GetComponent<MeshRenderer>().sortingLayerName = renderLayer;
4. }
5.  

I'm still missing an implementation for VectorObject2D, but our team didn't need it right now.

I'd prefer caching the MeshRenderer component, but that's a completely different story

 

You can access the GameObject; just do VectorLine.rectTransform.gameObject. If you want to cache the MeshRenderer, do VectorLine.rectTransform.GetComponent(MeshRenderer).

--Eric

 

Hello,

I'm trying to use Vectrosity to draw 3D outlines on objects that are part of a spawning pool and I'm having a hell of a time getting these two systems working with each other as parenting doesn't really work for the vector lines. My most successful implementation to date just instantiates a new vector line every time the object is spawned out of the pool, but constantly making and tearing these objects down is hurting performance. How would you recommend attaching 3D lines to objects which are deactivated and reactivated over and over?

 

Use VectorLine.drawTransform. I wouldn't recommend instantiating/destroying objects constantly.

--Eric

 

Hello!

Do you have any suggestions on what would be the best approach to draw 3D line that follows the surface of the area in a following scenario?

We are trying to indicate (with mouse pointer raycast) player's movement path based on path resulted from NavMesh.CalculatePath() and that path only has list of corner points (Vector3). If player is about to move, for example, up a slope the resulted Vectrosity line goes inside the terrain object at some point since it's just a line between two points. I'm guessing there is not any built-in way for this line to be aligned with the surface automatically?

What I'm trying to do at the moment is to interpolate more points between path corners and raycast Vector3.up to see if we hit the "ground" and then re-create the list for Vectrosity's points3 for the line before calling .Draw3D(). Any other suggestions or example on how to do this properly?

Thanks in advance!
-Kalle

 

No, sorry; Vectrosity will draw the line but it's up to you to supply the points. Any way you can think of that works is the "proper" way...raycasting sounds like as good a way as any.

--Eric

 

Howdy! I'm currently using Vectrosity to draw our projectiles, and I'm taking advantage of the colliders lines can have. I was just wondering if there's any issue doing this? Performance seems to be fine, but long term if I'm updating line/dot positions and then redrawing, is there any potential issue with the colliders? My assumption is they're not moving, and as such don't need a rigidbody, they're being remade, right? But if they're being destroyed and remade each time, I'm perhaps doing myself a disservice?

As a side note, is there any way to draw dots as circles?

Thanks!

 

If the line changes, the colliders have to be updated, yes. If performance is fine, that's what counts. Could you explain what you mean by drawing dots as circles?

--Eric

 

Well right now if I set the size of a dot to 5, it's a 5x5 square. Is it possible to make this a circle, with a circle collider that's 5px in diameter?

 

Hello Eric!

I was using this code with v4 to create an spline but it doesn't work in v5.
What should I modify?

Code (CSharp):

1. VectorLine line = new VectorLine("Spline", new Vector3[segments+1], lineMaterial, width, LineType.Continuous, Joins.Weld);
2. line.MakeSpline (splinePoints.ToArray(), segments);

Thank you!

 

Use a List instead of an array, i.e. new List<Vector3>(segments+1).

--Eric

 

Thank you very much Eric!
You rule!

 

Hi Eric!

Im trying to use Line.SetWidth + Draw afterwards
But for some reason only the first line point is scaling... not the whole line.
Is there something I'm missing?

Id like to scale the Line on runtime.
Also... is the scaling animatable (like a Lerp scale) using SetWidth + Draw on a loop?

 

SetWidth is for setting individual segments; for the entire line, use the VectorLine.lineWidth property.

--Eric

 

So what I'm attempting to do, is get a sort of brain going where I have neurons, represented by the blue spheres. And the white Lines are branches where the synapses fire / connect. Eventually I'd like to have some change in brightness travel down the synapses to watch them fire. Sort of an inside the brain effect.



But when I got the code working, I get these empty connections, and some of the nodes don't even have connections.

Any Idea of what I'm doing wrong ? The idea is to set max connections to 3, and then have each node, sort of have a tripod of connectors running to it's nearest neighbors, and so forth. But somehow the destinations aren't valid, or somehow there's a transfer of object spaces, something's off because the sort also doesn't seem to work properly.

Here's my code:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using Vectrosity;
5.  
6. public class BrainSystem : MonoBehaviour {
7.  
8.     public GameObject synapsePrefab;
9.     public int maxConnections = 3;
10.     public int numberOfSynapses;
11.     public float radius;
12.     public bool aboveFloor = false;
13.     public float lineWidth = 2.0f;
14.  
15.     public List<Vector3> synapses = new List<Vector3>();
16.    
17.     // Use this for initialization
18.     void Start () {
19.         for (int i = 0; i < numberOfSynapses; i++)
20.         {
21.             // For sperical random values, we might want to have values only above the ground plane. [TODO] Add "Origin" Object or make relative to object transform.
22.             if (aboveFloor)
23.             {
24.                 Vector3 temp = Random.insideUnitSphere * radius;
25.                 temp.y = Mathf.Abs(temp.y); // Makes sure no negative y values enter List
26.                 synapses.Add(temp);
27.             }
28.             else
29.             {
30.                 synapses.Add( Random.insideUnitSphere * radius );
31.             }
32.         }
33.  
34.         // Create Synapse "knots" from prefabs.
35.         foreach( Vector3 synapse in synapses)
36.         {
37.            Instantiate(synapsePrefab,synapse,Quaternion.identity);
38.         }
39.  
40.         // Prepare Vectrocity
41.         VectorManager.useDraw3D = true;
42.         VectorLine.SetCamera3D(Camera.main);
43.         List<Vector3> synapseList = new List<Vector3>(synapses);
44.         for (int v = 0; v < synapseList.Count; v++)
45.         {
46.             // Sort List so that closest 3 Synapses can be used for line drawing. Use current synapse as a reference, and sort list by closeness.
47.             List<Vector3> sortedSynapses = SortVectorsByDistance(synapseList, synapseList[v]);
48.             for (int i = 0; i < maxConnections; i++)
49.             {
50.                 List<Vector3> positions = new List<Vector3>();
51.                 positions.Add(synapseList[v]);
52.                 positions.Add(sortedSynapses[i]);
53.                 VectorLine line = new VectorLine("3DLine", positions, lineWidth);
54.                 line.Draw3DAuto();
55.             }
56.             // Remove Synapse allready processed in the hope of reducing the list length, and optimizing number of loops
57.             synapseList.Remove(synapseList[v]);
58.         }
59.  
60.      }
61.  
62.  
63.     List<Vector3> SortVectorsByDistance(List<Vector3> targets, Vector3 current)
64.     {
65.         //Bubble Sort, not certain this works properly
66.         List<Vector3> sortedList = new List<Vector3>(targets);
67.         // bubble-sort transforms
68.         for (int e = 0; e < sortedList.Count - 1; e++)
69.         {
70.             float sqrMag1 = (sortedList[e + 0] - current).sqrMagnitude;
71.             float sqrMag2 = (sortedList[e + 1] - current).sqrMagnitude;
72.  
73.             if (sqrMag2 < sqrMag1)
74.             {
75.                 Vector3 tempStore = sortedList[e];
76.                 sortedList[e] = sortedList[e + 1];
77.                 sortedList[e + 1] = tempStore;
78.                 e = 0;
79.             }
80.         }
81.  
82.         return sortedList;
83.     }
84.  
85.     // Update is called once per frame
86.     void Update () {
87.  
88.     }
89. }
90.  

 

The scene view doesn't necessarily represent what you'd actually see, since the lines are aligned to the camera. I expect that's just backface-culled; what does the camera view look like?

--Eric

 

Thanks for the awesome work on Vectrosity, works like a charm!
I'm having a small issue and hoping you could shed some light as to what's going on.
I'm rendering a number of Vectrosity lines inside a UI Canvas (so VectorObject2D ) which works fine, and got the lines to behave correctly when panning/scaling the parent container.
A parent object has a Mask component, which works fine on all UI elements contained in the hierarchy, and works fine on the VectorObject2D lines too, however if I pan (move) the parent container out a certain amount, ALL the Vectrosity lines will be masked at once, even ones that are clearly still inside the mask itself.
I made a very short video showing the issue:

You can see the curves on the left disappearing.
Any ideas?

 

Yes, I understood that (normals) from the documentation on 3D Lines, and the necessity for an update when the camera is moved. The concern I have is that even from the camera some of the spheres are empty (no connecting lines) and I'm concerned that it doesn't run 3 Lines from each junction. Something is wrong in the logic I suspect, but I stepped through it and it seems to work, it's just not easy to figure out with 50 spheres, maybe I should create a "known" sample of (fewer) spheres with known distances, and then make that system run with a random list.

Most of my confusion comes from the bubble sort, as I tried to use list.sort() but I couldn't figure out how to properly do that in C#, all the examples I found were Java.

-DC

And it could be that the red lines aren't the closest 3, lines, but it should have 3 lines on every point, some are missing theirs, and others are just blank.
(This is from the camera's perspective)

 

I'm not sure how well it would work to move the parent container; instead try hooking up the VectorLine to a transform using VectorLine.drawTransform. See the included Mask demo which has lines moving within a mask without issues by moving a linked transform.

There's nothing in Vectrosity that would cause it to randomly not draw lines that are in the camera view, so I'm going to have to go with the wrong logic idea. Try printing out the positions and see what the data actually is.

Look on MSDN. Or when doing searching, just do "C# list sort". Definitely don't implement your own sort when the framework already includes sorting (unless you really needed a specific type of sort for some reason). I would also strongly recommend making a single VectorLine instead of a bunch of separate lines.

--Eric

 

Seems i got a lot of garbage when updating lines.
Im using smooth color and smooth width. How can i avoid this?

 

I'm not sure what you mean; your image doesn't show up. Also if you have a self-contained code example that demonstrates the issue, that helps a lot.

--Eric

 

Im updating points like this:

Code (CSharp):

1.  
2. public List<Vector2> points;
3.  
4. void Update()
5. {
6.  
7. MainLine.SetColors(mainColors);
8.  
9. for (int i = 0; i < points.Count; i++)
10.             MainLine.points2[i] = points[i];
11.  
12.   MainLine.Draw();
13. }
14.  

 

It's not a good idea to assign data repeatedly like that. Instead simply use the points list when creating the line, since it's a reference (not a copy). e.g. mainLine = new VectorLine("MainLine", points, .... Then the only thing you need to do is call Draw if you change anything in the points list.

--Eric

 

This is giving me garbage and spikes

Code (CSharp):

1.  public void Update()
2.         {
3.             for (int i = 0; i < points.Length; i++)
4.                 points[i].y = offset.y + Random.Range(-2.1f, 2.1f);
5.  
6.          
7.             line.Draw();
8.         }

45 lines 100 points per line. Update every frame.

This happens even without updating points, just draw. Vectrosity got so low performance, or its smth broken on my side? Can you please run script attached?

 

Nothing like that here. What version of Unity/Vectrosity are you using?



--Eric

 

Wow... Seems vectrosity not updated with unity manager...
I was using vectrosity 4.2...

Now its updated and a lot of code broken... With canvas bindings, layering etc. Is there is some migrading documents from 4 to 5 version?

Especially this:
VectorLine.canvases
shadowLine.canvasID

Im using vectrosity for many things. Im drawing shadows, lightings, lava and more.

If i need to draw lines on different sorting layers with some sprites on top of them and some behind lines. in 4.2 vectrosity i was manipulating canvases. And how i do it in 5? I need to create canvas manualy and then assign them to each line by SetCanvas ?

 

You should read the Vectrosity5 Upgrade Guide.

--Eric

 

Code (CSharp):

1. VectorLine.SetCanvas: canvas must be screen space overlay or screen space camera

So now i cant use WorldSpace canvases for 2d lines? Why?

 

The only reason why a world space canvas was used in Vectrosity 4 was because it was too complex to do both canvas vertex generation + standard mesh generation, and it wasn't ideal to use a canvas for 3D lines by any means. Since in Unity 5 they changed the canvas vertex handing to the same way standard meshes are done, there's no need for a canvas for 3D lines anymore, and 3D lines could go back to being actual 3D objects again. You can sort line objects in the usual ways, by setting the renderer to use sortingLayerName and/or sortingOrder.

--Eric

 

So what is the right approach for me. Stay with 2d lines and canvases or switch to 3d lines? I need good performance so 2d lines is better, but i need camera movement, sorting layers etc.

Check this video. Lighting bolts made with vectrosity 2d lines in 4.2. How do you think what is the right approach for migrating to 5.2?

 

I'd say 3D lines would be a better approach.

--Eric

 

Sorry for forum spam, but i cant find this in docs.

How can i change sorting layer of mesh render 3d line? Is there a link to mesh render in VectolLine?

Only via GetComponent...

Code (CSharp):

1. .rectTransform.gameObject.GetComponent<MeshRenderer>().sortingLayerName

 

GetComponent is correct. Although you can just do rectTransform.GetComponent.

--Eric

 

-snip I'm a dummy-