Vectrosity - Fast and Easy Line Drawing

Indeed, you are correct. The VecorObject3D LateUpdate was being executed before my script thus using the previously calculated verts.

I put VectorObject3D farther down the script execution order and now it works like a charm.

Thanks so much for this amazing asset!

 

http://www.giphy.com/gifs/l41YjD27TXl6pkEa4 , this is the weird curve i'm talking about. The ball has max bounciness and zero friction. It is totally done by the physics engine so i'm not sure what changes I can make in my code to stop this.

 

You could try sampling the ball's position more frequently.

--Eric

 

By increasing the fixed update rate?

 

I doubt it, but it depends on your code. In the Path demo script, points are sampled every .05 seconds.

--Eric

 

Wow that did it! I'm sampling every .01 seconds, would that affect performance for mobile?
Thank you !

EDIT : So I noticed this bug while playing on my mobile, the dotted line should start from the centre of the ball, to the mouse position. But somehow, sometimes the start of the line is offset from the centre of the ball, and i've no idea what's causing this. I was fiddling with the line and found out it is anchored to the bottom left of the screen, and if I change my screen size during play mode, the line gets offset completely (even though I set the starting point of the line in code to be the same as the balls transform), I don't know if this is one of the reasons or not for the bug that i'm having.

 

I can't find any circumstances where lines get offset, regardless of screen size changes. If you're manually moving the transform of lines or the canvas, I'd advise against that, since it typically interferes with Vectrosity operation. Otherwise I'd need more info about what you're doing exactly.

--Eric

 

I'm really sorry for asking too many questions, one last question. I'm not that comfortable with lists and hence i'm having difficulty in making my trail disappear from the start as it follows the ball. The RemoveAt isn't helpful really(nor was RemoveRange), and apparently it is a performance hog as a lot of values get copied and shifted. I have a trail, I just can't make it disappear from the start. Really hope you can help me with this.

 

RemoveAt definitely works; remember to redraw the line after removing or adding points. I wouldn't be concerned abort performance for something that minor. You can use the profiler to determine where performance issues are.

--Eric

 

Alright, So this is my code to make the trail.
This code will make the trail go infinitely long as long as the ball exists.

Code:

Code (CSharp):

1.     IEnumerator MakeTrail ()
2.     {
3.         bool running = true;
4.         int beginningIndex = 0;
5.         pathIndex = 0;
6.         while(running)
7.         {
8.             yield return new WaitForSeconds (.01f);
9.             pathLine.points2.Add(transform.position);
10.             pathLine.Draw();
11.             pathIndex++;
12.         }
13.     }

And this is the code to remove the beginning of the trail.

Code:

Code (CSharp):

1. IEnumerator MakeTrail ()
2.     {
3.         bool running = true;
4.         int beginningIndex = 0;
5.         pathIndex = 0;
6.         while(running)
7.         {
8.             yield return new WaitForSeconds (.01f);
9.             pathLine.points2.Add(transform.position);
10.             //pathLine.points2[pathIndex] = transform.position;
11.             pathLine.Draw();
12.             pathIndex++;
13.             if(pathIndex >= maxPoints)
14.             {
15.                 pathLine.points2.RemoveAt(beginningIndex);
16.                 pathLine.Draw();
17.                 print("path index = " + pathIndex + " Beginning index = " + beginningIndex);
18.                 pathIndex = pathLine.points2.Count - 1;
19.                 pathLine.points2[pathIndex] = transform.position;
20.             }
21.         }
22.     }

I really feel i'm missing something small, would really LOVE your help with this, i've honestly tried way too much with this now. Thanks.

 

I'm not quite sure what you're attempting with the pathIndex and assigning transform.position. You can just use Add to add the latest position and RemoveAt(0) to remove the oldest position. There's no need for anything else. You can use pathLine.points2.Count to check the number of points rather than making more variables. Also put Draw at the end of the function, so it's only called once.

--Eric

 

Hi,
Although your documentation is very complete about "How to create/initialise things", there is little informations about "How to update things". ( "Update some things" in usually asked on this forum.)

Is there he has better solution to update the segments of a circle?

Code (csharp):

1.  
2. #pragma strict
3. import Vectrosity;
4. import System.Collections.Generic;
5.  
6. var lineTexture : Texture;
7. var radius  = 120.0;
8. var segments  = 60;
9. var segmentsBak  = 60;
10. var pointRotation = 0.0;
11. var line : VectorLine;
12. function Start ()
13. {
14.    var linePoints = new List.<Vector2>( segments + 1);
15.    line = new VectorLine("Line", linePoints, lineTexture, 3.0, LineType.Continuous);
16.    line.MakeCircle (Vector2(Screen.width / 2, Screen.height / 2), radius, segments, pointRotation);
17.    line.Draw();
18. }
19. function LateUpdate()
20. {
21.    if (segmentsBak != segments)
22.    {
23.      if (segments < 3) segments = 3;
24.      segmentsBak = segments;
25.      var linePoints = new List.<Vector2>( segments + 1);
26.      //var line = new VectorLine("Line", linePoints, lineTexture, 3.0, LineType.Continuous);
27.      line.MakeCircle (Vector2(Screen.width / 2, Screen.height / 2), radius, segments, pointRotation);
28.      line.Draw();
29.    }
30. }
31.  

 

If you made use of .drawEnd, you could avoid creating new Lists. Instead have a List with the max number of points that you'd use.

--Eric

 

yeah sorry about the messy code, I tried a lot of stuff so it's a mess. Anyways as per what you're saying, this should work right?

Code (CSharp):

1.     IEnumerator MakeTrail ()
2.     {
3.         bool running = true;
4.         while(running)
5.         {
6.             yield return new WaitForSeconds (.01f);
7.             pathLine.points2.Add(transform.position);
8.             if(pathLine.points2.Count >= maxPoints)
9.             {
10.                 pathLine.points2.RemoveAt(0);
11.             }
12.             pathLine.Draw();
13.         }
14.     }

But it doesn't. What happens is, when the list reaches >= maxPoints (50 in my case), the trail just stops there, no deletion from behind, no more continuation of the trail either, which shouldn't happen right?

 

I put that code in the SamplePoints function in the DrawPath demo script (slightly modified to work with that script), and it works as expected.

--Eric

 

Oh.my.god. During my initialization, I had " pathLine.endPointsUpdate=1;", which is why it wasn't working. THANK YOU SO MUCH!

 

To change the width of my trail gradually, can I set the width at 0th index = 0 and my last index = whatever and use .smoothWidth = true ? (It didn't work when I tried it, still just confirming)
Or should I individually specify the width of each point in a list and use .setWidths?

 

You need to set the width of each segment.

--Eric

 

Hi Eric



Im trying to draw 2d lines, and id like to draw it ONTO the scene...
Currently i have a scene, and i tried to SetCanvasCamera to the Game camera..
However the line would still render on the canvas, in world space.
Is it possible to draw the line onto the Game area?
Thanks!!

 

Hi Eric, I'm encountering a bug I feel. This is my code to make the grey dotted line. I even printed out the balls position and the points2[0] position, both of them are same throughout. But in game, the line gets an offset after repeatedly playing it. I could solve this issue by creating a new line every time I instantiate the ball but I would love if it could just work by updating the start and end point every time. This bug happened on my phone as well when I deployed it so it's not just a 'unity' thing.

http://www.giphy.com/gifs/l46CAyznmFm1uiFhe

Code (CSharp):

1. void Awake ()
2. {
3.                 //Setting VectorLine
4.         VectorLine.SetCanvasCamera (Camera.main);
5.         VectorLine.canvas.sortingOrder = 0;
6.         textureScale = 2f;
7.         selectionLine = new VectorLine("Selection", new List<Vector2>(2), lineTexture, 0.2f, LineType.Continuous);
8.         selectionLine.textureScale = textureScale;
9. }
10.  
11. void OnDrag ()
12. {
13.        //Displaying the line while dragging mouse.
14.             selectionLine.active = true;
15.             selectionLine.points2[0] = startPos;
16.             selectionLine.points2[1] = tempPos;
17.             selectionLine.color = Color.grey;
18.             selectionLine.Draw ();
19.             print("Start pos = " + startPos + " Point = " + selectionLine.points2[0]);
20. }
21.  

I've even tried setting endPointsUpdate, and clearing the list and adding the start and end pos after each attempt, I still get the same bug.

 

I solved this by changing my canvas to Screen space camera and then set the camera. The line you make creates it's own canvas(which you have to change to "screen space camera") if you don't make it a child of your current canvas.

 

Vectrosity is 40% off for 24 hours on my site and the asset store!

Use Draw3D.

There's nothing in Vectrosity that can cause any offset behavior on its own. Something external is causing it; it sounds like you're unintentionally moving the canvas in some way. I can't really tell what your gif is intended to illustrate; you can send me a project which exhibits the behavior (don't post it on the forums).

--Eric

 

Hi, Im trying to draw a discrete line and update the end point as I am drawing the line. How would I update the endpoint on the discrete line?

 

Can you explain in more detail? There are two demo scripts for line drawing, which do line drawing in quite different ways, so I'm not really sure what you mean by "update the end point".

--Eric

 

Thanks for that hint, Since you mentioned moving the canvas, I tried to remove screen shake and test it. There is no offset. I think if I interrupt the screen shake midway it offsets the camera position or something. In my gif I was intending to show how in the beginning the line is drawn from the centre of the ball and after a few random hits, the line offsets. Anyways thank you again.

 

Hi Eric, I have some "color" issue using Vectrosity with 3D lines and Deferred Rendering.

3d view:


Same camera, but top-down orthographic view:


this is the code in the Start function:

_lines = new VectorLine[Constants.MaxHumanBallPrediction];
_points = new List<Vector3>[Constants.MaxHumanBallPrediction];
for(int i=0; i<_lines.Length; i++)
{
_points = new List<Vector3>();
_lines = new VectorLine("Line" + i, _points, Texture, Size, LineType.Continuous, Joins.Weld);
}

and this is the function which I call to create/update the line (idx is the index of the line, I may have up to 3 different lines to render):

_points[idx].Clear();

for (int i=0; i< count; i++)
_points[idx].Add(new Vector3((float)positions.X, y, (float)positions.Z));
_lines[idx].color = color;
_lines[idx].Draw3DAuto();
_lines[idx].active = true;



using forward rendering work without any color issue, but I need to use deferred rendering...



------------------

Also, how may I change the normals? if you use billboarding, I need to have Horizontal billboard.. (not depending from the camera)

 

Ok, I saw that you use a billboard approach in order to create the mesh.
I solved using a disabled camera with orthographic perspective as VectorLine 3D camera, and now it works as I need

But, in the future... may you add the possibility to specify normals for each point, and build the mesh using these normals (where each triangle has a normal as an average of the vertices normals) instead of the camera perspective? (let the dev to choice if use camera perspective or normals...)

 

Hey Eric, I'm looking at the method VectorLine.SetupCanvasState here, and when going on canvas with 2D vector lines, it uses SetParent on the canvas with worldPositionStays true. I found further back in the thread that you stated this was intentional, but are you sure? Our two dimensional vectors had some weird offset issues when switching from 3D to 2D mode, and I found that Unity themselves state not to use worldPositionStays when parenting canvas UI elements.

Setting worldPositionStays to false fixed our offset issues, but I'm unsure if it might cause any other issues, so I wanted to open a dialog with you about it.

 

It's intentional because Vectrosity used to use WorldPositionStays as true with no possibility to change it (aside from editing the source code), and when I added the WorldPositionStays parameter to SetCanvas, I kept true as the default so that code that used SetCanvas would continue to work the same as before. If using WorldPositionStays as false is working better for you, then there's no reason to change that as far as I know.

--Eric

 

Eric, sorry if I repeat my last question/request, but maybe you missed it

In the future... may you add the possibility to specify normals for each point, and build the mesh using these normals (where each triangle has a normal as an average of the vertices normals) instead of the camera perspective? (let the dev to choice if use camera perspective or normals...)

 

I'm not planning on it, sorry.

--Eric

 

Hi,
I'm not a big fan of "Canvas things". I stay on Vectro 3.X and i added some functions (like MakeArc from Vectro 4.x/5.x)
Everything are fine, but, what is the best workflow for making a DLL from the sources?

Thanks.

Edit :
All Posts Process (AA, Bloom, etc ..) were disabled. It works by adding this

Code (csharp):

1.  
2. cam.renderingPath = RenderingPath.Forward;
3.  

in "VectorLine.cs" (Unity 5.4b21)

 

Vectrosity 5 doesn't use a canvas for 3D lines. Making DLLs is not specific to Vectrosity and is off-topic here; you should start a new topic if doing a search doesn't give you the info you need.

--Eric

 

Here's the stuff from last week that's missing because of the forum revert (so there were actually a few posts aside from complaints about the new forums):

You can use VectorLine.rectTransform.SetParent().

Hi, it's required to add control points when creating bezier curves...two anchor points and two control points, to be exact. Where you position them depends on the shape of the curve that you want to create. I'm not really sure what you're after exactly, but probably the best thing would be to research bezier curves in general, since that's what Vectrosity uses for MakeCurve. (For the record, MakeSpline uses centripetal Catmull-Rom splines, and it seems like splines would be more typical for Flight Control-style paths.)

Vectrosity requires a camera to function; you can set the camera's culling mask to none, so it wouldn't use any performance.

Vectrosity uses 4 vertices per line segment, which is the absolute minimum that's possible to do. Under no circumstances are more vertices generated than are necessary to draw the line segments. You can use more than one VectorLine if you want to selectively disable some parts of your map.

The GetPoint functions have an out index parameter that indicates the line segment at that point, which you can use for calculating drawStart.

--Eric

 

Hi Eric, I'm also interested in using Vectrosity for rending some GeoJSON data on mobile. It appears a user above was interested in the same thing, have you seen any success/or heard of it with decent performance on mobile using your library for this use case?

 

Performance would depend on how much data you were displaying at once. The main issue would be converting GeoJSON data to Vector2 lists, which isn't something that's built in and I don't know of any scripts that do it.

--Eric

 

Hi @Eric, I'm using vectrosity to create a circle:

Code (CSharp):

1. void SetupHighlightCircle()
2. {
3. m_circlePoints=newList<Vector3>(m_segments+1);
4. m_highlightCircle=newVectorLine("highlightCircle",m_circlePoints,m_lineTexture,5.0f,LineType.Continuous);
5.  
6. m_highlightCircle.MakeCircle(transform.position,Vector3.up,m_startRadius,m_segments);
7. m_highlightCircle.drawTransform=m_parent;
8. }

All is displayed correctly. I want the circle to follow the transform, 'm_parent'. I'm drawing the line here:

Code (CSharp):

1. void LateUpdate()
2. {
3.       m_highlightCircle.Draw3D();
4. }

The circle does track the m_parent transform, but it's always at an offset from m_parent. Any ideas what could be causing this? Looking at the DrawLines example, drawTransform doesnt need to be called every frame (only when it's set up). So I'm at a loss as to what's wrong....Thanks for any assistance!

 

Thanks, I figured I would have to do at least that much. I suppose my only two questions left is, are these lines rendered on Unity's new UI canvas? Or somewhere else? And can you render polygons with this library?

 

You're creating the circle with an offset (transform.position), so remove that and use Vector3.zero.

2D lines are rendered on the canvas, 3D lines are rendered either on a canvas or in the scene as desired. You can't render polygons, only lines.

--Eric

 

Of course - th

Of course - thanks, that fixed it.

One final question, I'm trying to create the trajectory of a grenade with MakeArc. The idea being I click (the origin of the throw), then drag the mouse and release to set the end of throw (and while the button is down update the arc to visualise the trajectory). However, when I drag, the arc expands out from the origin in both directions (so the radius is added to either side of the origin).

Is there a way I can code this so the start point of the arc is effectively locked to the origin, and moving the mouse will draw from the that origin to the mouse position (obviously using ScreenPointToRay)?

Thanks again for any advice.

 

It would probably be better to use MakeSpline for that.

--Eric

 

Hi Rob, I have exactly the same issue using Vectrosity on our Nexus 7 tablet. The old versions worked fine. But with Unity 5.3 / Vectrosity 5.3 I only get black lines without a cap. I just updated from Unity 4.6 and Vectrosity 3.x.

Did you find a solution for this? Or filed a Unity bug (so I can give it a vote)? Any help is appreciated.

BTW I only see this behaviour on our Nexus. I'm thinking about excluding this device in the Play Store for now. Did you find any other devices with this bug?

 

Hi

We are creating simple VectorLine (vector2)

Code (CSharp):

1. spline = new VectorLine("DrawnLine", new List<Vector2>(), null, 4.4f, LineType.Continuous, Joins.Fill);
2. spline.points2.Add (new Vector2 (transform.position.x, transform.position.y));
3. spline.endPointsUpdate = 1;
4. spline.material = new Material (Shader.Find("Unlit/Transparent"));
5. spline.texture = lineTexture;
6. spline.collider = true;
7. spline.trigger = true;
8. spline.Draw();

and then in each update we add new point to it

Code (CSharp):

1. spline.points2.Add(line2End);
2. spline.Draw();

However the edge collider seems not to be copying path of the line, but it has some offset, this happens with default canvas. See picture. Any ideas what this can be ? Did we miss something important in documentation ?

Render mode is set to Screen space - overlay for the canvas.

Thanks

 

Are you using multiple cameras? You need to use SetCamera3D with the camera being used to display the line in order for the collider to match up.

--Eric

 

No there is only one camera and from what i have seen in code you always set "Main Camera" to be default one, which is correctly named on our side

 

I did some further research on the issue that Rob previously reported that Vectrosity creates black lines without texture, color or endcaps on Nexus 7. I think this is not a shader issue but is indeed a bug in Vectrosity that only shows on this device / GPU / display driver.

If I draw a line with an endcap I only get a black line without endcaps. However if I don't set the endcap but use ".texture" to set a texture and ".color" to set a color the line displays correctly!. So the default shader gives no problem in this case.

Also on a previous version of Vectrosity (I believe we were still on 3.x) on Unity 4.6 there is no problem. I get perfect lines there. So it can work on this particular device.

Problem only occurs on our Nexus 7. I tested on 6 other Android devices without problems.

I made a very simple project with a clean import of Vectrosity 5.3 and below code. Result is a black line without endcaps on top and a blue line with the right texture below (see screenshot).

Can you please look into this and try to fix? Because I don't dare to publish our game with this bug in it because I don't know which other devices get from this bug, but with over 10 million current installs it's almost certain some users will suffer.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using Vectrosity;
5.  
6. public class Vectrotest : MonoBehaviour {
7.  
8.     private List<Vector3> linePointsCaps = new List<Vector3> ();
9.     private List<Vector3>linePointsNoCaps = new List<Vector3> ();
10.     private Texture2D lineTextureSpray, lineCapSpray;
11.     private VectorLine lineCaps, lineNoCaps;
12.  
13.     public Camera mainCam;
14.  
15.     void Start () {
16.  
17.         mainCam.orthographicSize = Screen.height / 2;
18.         mainCam.transform.localPosition = new Vector3 (Screen.width / 2, Screen.height / 2, -10f);
19.  
20.         lineTextureSpray = Resources.Load ("LineTextures/spray") as Texture2D;
21.         lineCapSpray = Resources.Load ("LinecapTextures/spray") as Texture2D;
22.         VectorLine.SetEndCap ("RoundedEnd_spray", EndCap.Mirror, lineTextureSpray, lineCapSpray);
23.  
24.         lineCaps = new VectorLine ("linecaps", linePointsCaps, Screen.height / 50, LineType.Continuous, Joins.Weld);
25.         lineNoCaps = new VectorLine ("lineno", linePointsNoCaps, Screen.height / 50, LineType.Continuous, Joins.Weld);
26.  
27.         lineCaps.endCap = "RoundedEnd_spray";
28.  
29.         lineNoCaps.texture = lineTextureSpray;
30.  
31.         lineCaps.color = Color.blue;
32.         lineNoCaps.color = Color.blue;
33.  
34.         lineCaps.textureScale = 1f;
35.         lineNoCaps.textureScale = 1f;
36.  
37.         linePointsCaps.Add(new Vector3(Screen.width * 0.1f, Screen.height * 0.7f, 0f));
38.         linePointsCaps.Add(new Vector3(Screen.width * 0.9f, Screen.height * 0.7f, 0f));
39.         linePointsNoCaps.Add(new Vector3(Screen.width * 0.1f, Screen.height * 0.3f, 0f));
40.         linePointsNoCaps.Add(new Vector3(Screen.width * 0.9f, Screen.height * 0.3f, 0f));
41.    
42.         lineCaps.Draw3D();
43.         lineNoCaps.Draw3D();
44.     }
45.    
46.  
47. }

 

In that case I'd need more information about what you're doing. If you look at the RandomHills demo, for example, the collider isn't offset. The only way I can get an offset is by using multiple cameras where SetCamera3D has been used with a camera that's different from the rendering camera, or by moving the canvas.

The meshes generated by Vectrosity are valid meshes that display as expected in the editor, in standalones, the old webplayer, most Android devices, etc. I don't have any platform-dependent code or custom shaders or anything, it's literally just UV-mapped quads with textures. It also works fine in all cases by using the standard shader, so I'm guessing the issue has something to do with shaders using transparency. I know it's frustrating, but this is the definition of a Unity bug. I don't want to pass off responsibility and I'd fix it if I could, but I'm afraid what it comes down to is that Unity needs to fix the engine so that it renders correctly on all devices.

--Eric

 

I'm doing something wrong with end caps and I can't figure it out .

I have two textures: "lineTex" and "endCapTex". I have a vector line already in my scene working fine in the editor and in the game window. But I can't add end caps with the editor, so I am doing the following in my code:

Code (CSharp):

1. myLine.vectorLine.vectorLine.SetEndCap("lineglowend", EndCap.Mirror, 0f, 0f, 1f, 1f, lineTex, endCapTex);
2. myLine.vectorLine.endCap = "lineglowend";

Note: I have tried every single combination of the SetEndCap() method from the documentation, cut pasted only changing for my texture names).... always the same result. Here's what happens:
My line texture updates with the lineTex *only*, used for both the line texture AND both end cap textures. So the end caps are there, but with the wrong texture. Also, the line texture is scaled totally wrong (that's maybe less important, haven't looked into why that is yet).

Any idea what I'm missing?

 

SetEndCap is a static method (the usage is literally VectorLine.SetEndCap(...)), however, currently lines don't support end caps when created in the editor. This is because setting up end caps creates a new texture at runtime that isn't saved anywhere. In order to change this I'd need to use a different method that saves the textures, which would add complexity to the project, so I have to think of the best way to implement it.

--Eric

 

How is it possible than that if I don't use endcaps it renders correctly. Only after I set the endCap off the line it will go corrupt and display as a solid line. Also if I use a standard Unity box mesh it renders correctly with the same Material/Texture

It indicates to me that the combination of this Unity Version / Material / Shader / Texture on a simple standard mesh is not the problem. There is something that happens in the mesh when adding endcaps that corrupts it.

If it is indeed a bug on the Unity side I want to raise it as an issue with them. But I'm afraid I need a little more info to pinpoint the exact problem. So can you help with that?

Thanks, Willem