Search Unity

Vectrosity - Fast and Easy Line Drawing

Discussion in 'Assets and Asset Store' started by Eric5h5, Sep 26, 2014.

  1. macdude2

    macdude2

    Joined:
    Sep 22, 2010
    Posts:
    685
    Just a quick question – can you draw the lines behind opaque and transparent 3d objects? I assume you can, just wanted to confirm (didn't see any link to the docs which might have been able to answer this).
     
  2. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Yes, if you use Draw3D.

    --Eric
     
  3. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    I'm using 4_3 (email alert on the 20th july). I tried to replicate what you did but the welds that are being specified in the DrawLinesMouse script seem not to be showing up for me. I haven't made any edits to the script yet (so endPointsUpdate value is 1). Here are screenshots of how the monobehaviours are set up and the result when drawing.

    I'm using Unity 5.0.0f4.


     
  4. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Your screenshot seems to be from the DrawLines scene, which uses an entirely different script. I'm talking about the DrawLinesTouch scene (using the DrawLinesMouse script). Here I changed the width to 20 but the rest is default:

    Screen Shot 2015-08-01 at 11.20.20 AM.png

    --Eric
     
  5. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    Sorry, yes I was using the wrong demo scene (but edited to use the same script you're talking about). Now I tried using DrawLinesTouch scene. Initially I get the same result as you posted, but as soon as I turn on the 'Line 3D' boolean field the welds dissappear and I'm getting the same gaps as before.
     
    Last edited: Aug 1, 2015
  6. fahd

    fahd

    Joined:
    Aug 7, 2014
    Posts:
    33
    i'm trying to use the drawcurve example to to let the user draw a shape then fill the shape with color or texture
    I tried to build mesh from the points but it hard to count the triangles and arrange them dynamically is there any way other than meshes or this is the only way
    i'm trying to use the drawcurve example to to let the user draw a shape then fill the shape with color or texture
    I tried to build mesh from the points but it hard to count the triangles and arrange them dynamically is there any way other than meshes or this is the only way
     
  7. tbg10101_

    tbg10101_

    Joined:
    Mar 13, 2011
    Posts:
    139
    Two things:
    • Can you add an active check to the Draw and Draw3D functions? That way none of the math needs to be done if the line isn't even active. For example, insert 'if (!active) return;' on the 5th line of both functions.
    • Is there a Unity 5.2 beta version that I can use/test? Mostly for the new UI system meshes in 5.2.
     
  8. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    You're right, there was a bug with 3D lines, so 4.3.1 is out now with a fix.

    I don't really see how else you could do it.

    1. OK, that makes sense. 2. Not yet.

    --Eric
     
    tbg10101_ likes this.
  9. dred

    dred

    Joined:
    Apr 8, 2013
    Posts:
    30
    For all 100 lines in update? Do you think it's good design?
     
  10. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    Fantastic, thanks!

    I'm noticing that sometimes I'm getting strange angles in the visual boundaries between different line segments when I'm colouring them.

    I modified DrawLinesMouse.js to use a random colour for each line segment, then when i draw with the 3d boolean turned on I get occasionally get the following thing happening. There are two colour boundaries here that don't run perpendicular to the line direction.


    I put the modified script I'm using on pastebin here: http://pastebin.com/znrmyuRe.
     
  11. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Not in Update, only when the user clicks. It's fine (though I would question why you're using 100 lines at once).

    Seems the welding function was having floating point issues with nearly parallel lines. I've made a fix, and I'll do an update if you promise you won't find some other bug. ;)

    --Eric
     
  12. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    Will do my best not to!
     
  13. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Well...OK. ::squints at bitbutter suspiciously::

    Vectrosity 4.3.2

    Fixes:
    • Joins.Weld has better vertex placement with nearly parallel lines.

    --Eric
     
  14. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    Thanks again! The stripes look great now.

    So I'm having a new problem. Very sorry! (sooner or later one of these problems is going to be user error, maybe this one is somehow).


    Since the update I'm getting 'spikes' or 'breaks' in my 3d lines. I have a line that's functioning as a trail for a player. Line points are added as the player moves around. I moved the player avatar around and turned on debugging in the inspector. I noticed that the Screen Points array contains chunks of 0 vectors where I hadn't expected any. These chunks of zeros correspond to the areas in the trail where the unwanted 'spikes' or 'breaks' appear.

    Unfortunately I haven't been able to recreate this problem with the demo scenes yet.

    Do you have an idea what may be going wrong here?

    In case it's useful to know: I used to have the same problem happening visually in previous versions of Vectrosity too, but it seemed to go away after I added a check to prevent laying down new line points too close to one another, ie. when the player had moved only a tiny distance. But this time that fix doesn't seem to be helping.
     
  15. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Are those points off-screen?

    --Eric
     
  16. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    In that screenshot yes. Here's another that might show it better. Scene view on the left, orthographic game view on the right. The leftmost 'spike' seems to narrow to a point somewhere so its difficult to find its ending.

     
  17. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Does it have anything to do with Joins.Weld being on?

    --Eric
     
  18. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    Yes. This particular thing happens only when Joins.Weld is selected. With Joins.None i don't get any spikes/gaps. With Joins.Fill i get a different glitch (an intermittent spike that flickers, starting from the newly created end of the trail, pointing into the middle of the screen.)
     
  19. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Do you have something that reproduces this?

    --Eric
     
  20. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    I will try to create a simple scene that replicates the problem as soon as i get chance and send it to you (if you like). Thanks!
     
  21. bitbutter

    bitbutter

    Joined:
    Jul 19, 2012
    Posts:
    60
    I've attached a package that (for me) shows the glitches. To replicate:
    • Import the TrailGlitchesExVectrositydll package into a new unity project.
    • Import Vectrosity (I used 4.3.2).
    • Open the TrailGlitches scene and run it.
    • Use arrow keys to move the cube around.
    • The cube will leave a randomly coloured trail and soon flickering 'glitches' should appear like the ones in the image below (animated gif here).

     

    Attached Files:

    Last edited: Aug 8, 2015
  22. Saevax

    Saevax

    Joined:
    Nov 3, 2012
    Posts:
    58
    Hello, fantastic asset but I'm having a few problems when viewing 3D lines up close:



    I used VectorLine.SetCamera3D() and maximize on play however when viewing lines relatively closely and rotating the camera around lines start to deform and become not visible by the camera as seen in the first 2 images which shows a slight rotation difference causes lines to disappear. In the 3rd image you can see the deforming that I believe is what is causing lines to not be visible. The 4th image (should appear to be a box corner) shows that a steep viewing angle isn't necessarily required to see the deformation.
     
  23. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Yes, the math can break down when viewing 3D lines up close, and in some cases where one point is in front of the camera, and the other point some distance behind. Typically, breaking line segments up into multiple smaller segments fixes the problem. Also I'm looking into different techniques.

    --Eric
     
  24. Saevax

    Saevax

    Joined:
    Nov 3, 2012
    Posts:
    58
    Thank you for the quick reply! I'll look into breaking things up into multiple segments.
     
  25. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Hello Eric.There are some problems when i try to draw a line with Joins.Weld.
    vectrosity_issue.png
    Here is my set.
    Code (CSharp):
    1. arrowLine = new VectorLine("ArrowLine", points, lineMaterial, 40.0f, LineType.Continuous, Joins.Weld);
    2.         VectorLine.SetEndCap("Arrow", EndCap.Both, lineMaterial, frontTex, backTex);
    3.         arrowLine.endCap = "Arrow";
     
  26. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Make sure all points in the line are sufficiently far apart, and that there aren't any duplicate points in the line. The thicker the line is, the farther apart the points should be, in order to work well.

    --Eric
     
  27. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Hi,I used the points producted by finger move in screen,if i set the distance between points too long, the line will strange,and in fact, I had tried to set distance >= 20 when linewidth = 40.0f,but joins still not correct.
    vectrosity_issue_2.png
     
  28. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    I can't reproduce that:

    Screen Shot 2015-08-11 at 2.02.18 AM.png

    What version are you using?

    --Eric
     
  29. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    4.3
     
  30. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    I definitely can't reproduce that. What's the code you're using?

    --Eric
     
  31. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Code (CSharp):
    1.  
    2. using UnityEngine;
    3. using System.Collections;
    4. using System.Collections.Generic;
    5.  
    6. using Vectrosity;
    7.  
    8. public class ArrowTest : MonoBehaviour
    9. {
    10.     public Material lineMaterial;
    11.     public Texture2D frontTex;
    12.     public Texture2D backTex;
    13.  
    14.     List<Vector2> points = new List<Vector2>();
    15.     VectorLine arrowLine;
    16.  
    17.     private float m_drawLineSpeed = 15.0f;
    18.  
    19.     private float m_pointApart = 20.0f;
    20.  
    21.     void OnEnable()
    22.     {
    23.         FingerGestures.OnFingerDown += FingerGestures_OnFingerDown;
    24.         FingerGestures.OnFingerMove += FingerGestures_OnFingerMove;
    25.     }
    26.  
    27.     void OnDisable()
    28.     {
    29.         FingerGestures.OnFingerDown -= FingerGestures_OnFingerDown;
    30.         FingerGestures.OnFingerMove -= FingerGestures_OnFingerMove;
    31.     }
    32.  
    33.     // Use this for initialization
    34.     void Start()
    35.     {
    36.         arrowLine = new VectorLine("ArrowLine", points, lineMaterial, 40.0f, LineType.Continuous, Joins.Weld);
    37.         VectorLine.SetEndCap("Arrow", EndCap.Both, lineMaterial, frontTex, backTex);
    38.         arrowLine.endCap = "Arrow";
    39.  
    40.         arrowLine.maxWeldDistance = 80.0f;
    41.         arrowLine.continuousTexture = true;
    42.     }
    43.  
    44.     // Update is called once per frame
    45.     void Update()
    46.     {
    47.  
    48.     }
    49.  
    50.     void FingerGestures_OnFingerDown(int fingerIndex, Vector2 fingerPos)
    51.     {
    52.         arrowLine.points2.Clear();
    53.         arrowLine.Draw();
    54.     }
    55.  
    56.     void FingerGestures_OnFingerMove(int fingerIndex, Vector2 fingerPos)
    57.     {
    58.         Vector2 newPos = fingerPos;
    59.         //CalculateMoveLine(fingerPos, out newPos);
    60.  
    61.         if (arrowLine.points2.Count > 0)
    62.         {
    63.             if (arrowLine.points2[arrowLine.points2.Count - 1] == newPos)
    64.             {
    65.                 Debug.Log("prePoint == curPoint");
    66.                 return;
    67.             }
    68.  
    69.             if (!IsApartEnough(arrowLine.points2[arrowLine.points2.Count - 1], newPos))
    70.             {
    71.                 //Debug.Log("point apart not enough!");
    72.                 return;
    73.             }
    74.         }
    75.  
    76.         arrowLine.points2.Add(newPos);
    77.         arrowLine.Draw();
    78.     }
    79.  
    80.     private void CalculateMoveLine(Vector2 fingerPos, out Vector2 newPos)
    81.     {
    82.         if (arrowLine.points2.Count == 0)
    83.         {
    84.             newPos = fingerPos;
    85.             return;
    86.         }
    87.  
    88.         Vector2 frontPos;
    89.  
    90.         frontPos = arrowLine.points2[arrowLine.points2.Count - 1];
    91.  
    92.         newPos = Vector2.Lerp(frontPos, fingerPos, Time.deltaTime * m_drawLineSpeed);
    93.     }
    94.  
    95.     private bool IsApartEnough(Vector2 prePos, Vector2 curPos)
    96.     {
    97.         float distance = Vector2.Distance(prePos, curPos);
    98.  
    99.         if (distance >= m_pointApart)
    100.         {
    101.             Debug.Log("distance:" + distance);
    102.             return true;
    103.         }
    104.  
    105.         return false;
    106.     }
    107. }
    108.  
     
  32. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    I don't see anything obviously wrong, but I can't run that code since it has external dependencies. Try using the DrawLinesMouse script from the Vectrosity demos.

    --Eric
     
  33. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Please run this code.
    Code (CSharp):
    1. using UnityEngine;
    2. using System.Collections;
    3. using System.Collections.Generic;
    4.  
    5. using Vectrosity;
    6.  
    7. public class ArrowTest_2 : MonoBehaviour
    8. {
    9.     public Material lineMaterial;
    10.     public Texture2D frontTex;
    11.     public Texture2D backTex;
    12.  
    13.     List<Vector2> points = new List<Vector2>();
    14.     VectorLine arrowLine;
    15.  
    16.     private float m_drawLineSpeed = 15.0f;
    17.  
    18.     private float m_pointApart = 20.0f;
    19.  
    20.     private bool canDraw = false;
    21.     private Vector2 previousPosition;
    22.     private int sqrMinPixelMove;
    23.     private int minPixelMove = 5;
    24.  
    25.     // Use this for initialization
    26.     void Start()
    27.     {
    28.         sqrMinPixelMove = minPixelMove * minPixelMove;
    29.  
    30.         arrowLine = new VectorLine("ArrowLine", points, lineMaterial, 40.0f, LineType.Continuous, Joins.Weld);
    31.         VectorLine.SetEndCap("Arrow", EndCap.Both, lineMaterial, frontTex, backTex);
    32.         arrowLine.endCap = "Arrow";
    33.  
    34.         arrowLine.maxWeldDistance = 80.0f;
    35.         arrowLine.continuousTexture = true;
    36.     }
    37.  
    38.     // Update is called once per frame
    39.     void Update()
    40.     {
    41.         Vector2 newPoint = Input.mousePosition;
    42.  
    43.         if (Input.GetMouseButtonDown(0))
    44.         {
    45.             arrowLine.points2.Clear();
    46.  
    47.             arrowLine.Draw();
    48.  
    49.             previousPosition = newPoint;
    50.  
    51.             arrowLine.points2.Add(newPoint);
    52.  
    53.             canDraw = true;
    54.         }
    55.         else if (Input.GetMouseButton(0) && (newPoint - previousPosition).sqrMagnitude > sqrMinPixelMove && canDraw)
    56.         {
    57.             previousPosition = newPoint;
    58.  
    59.             arrowLine.points2.Add(newPoint);
    60.  
    61.             arrowLine.Draw();
    62.         }
    63.     }
    64. }
    65.  
     
  34. tatelax

    tatelax

    Joined:
    Feb 4, 2010
    Posts:
    1,146
    Hey Eric,

    What would be the easiest way to replicate the "Image Fill" that uGUI has? I want to animate a line with end caps filling up, similar to using an image fill.

    Thanks.
     
  35. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    The points are too close together considering the line width; I changed the pixel distance to 15 instead of 5 and it works well.

    Set the line color to transparent, draw the line, then use SetColor to animate the segments filling with a non-transparent color. The more segments in the line, the smoother the effect would be. Basically what the PowerBar demo does.

    --Eric
     
    tatelax likes this.
  36. tatelax

    tatelax

    Joined:
    Feb 4, 2010
    Posts:
    1,146
    Hey Eric,

    This is what I had gathered from the PowerBar demo, but what I'm stuck on is how to increase the number of segments. Right now I have a list of Vector2's with 1 start point and 1 endpoint.

    Thanks.
     
  37. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Add more points between the start and end points; Lerp is a simple way to do that.

    --Eric
     
  38. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Hi Eric.
    Change distance to 15 is no use for me.Maybe is the problem of texture.
     
  39. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Hi Eric.
    I'm sorry to disturb you, but it's very important for me to solve this problem.Here is my texture and material setting, if have any error,please tell me.

    vectrosity_issue_4.png vectrosity_issue_3.png
     
  40. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    It probably has something to do with the large amount of transparency you have in that texture; try making the texture about half the size vertically, so there's only one pixel of transparency at the top and bottom.

    --Eric
     
  41. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    I's useful,thank you very much!
     
  42. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Hi Eric.
    How can I set the end cap size?The end cap is too small.
    vectrosity_issue_5.png
     
  43. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    That's a good point; currently there isn't a way to do that.

    --Eric
     
  44. TimeForgotten

    TimeForgotten

    Joined:
    Aug 11, 2015
    Posts:
    12
    Can you add a method to set it or tell me how to set it in code?
     
  45. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    11,786
    I was just about to ask the same thing. I've got end caps which are arrows, and at the moment the only way to make that work seems to be to apply a texture to the line which is the same width as the arrow's texture with only the line drawn in the middle.
     
  46. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    I put that on the to-do list.

    --Eric
     
    angrypenguin likes this.
  47. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    11,786
    In some cases with textured lines I get bending of the applied texture. Here's a couple of screenies where I've deliberately made the effect as exaggerated as possible. It's usually far more subtle than this:





    I assume that this is some form of artefacting from the UV mapping (ie: not something Vectrosity has control over), as in wireframe mode the generated geometry looks perfectly ok. A few things to note here:
    • The line width is much wider than the visibly drawn lines, as a result of the arrow end capping mentioned above.
    • The line only has 2 points, a start and an end.
    • This only occurs from some angles.
    • This is using Vector3s and VectorLine.Draw3D().

    Adding more segments results in a wiggly line as per the next image:


    Any suggestions on how to minimise or eliminate this effect?
     
  48. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    11,786
    Ok, this appears to be the root of the issue. Using Draw() instead of Draw3D(), along with appropriate configuration, seems to have completely eliminated the artefacts, now I just need to get that working with the multi-camera rig.
     
  49. ickydime

    ickydime

    Joined:
    Nov 20, 2012
    Posts:
    51
    I want to make a rainbow... maybe a double... ;) Not a line that changes colors as it is drawn but a sequence of parallel lines that can follow your finger and stay in order with no gaps/overlaps. Painting some rainbows and proud of it. Anyways, looks like a great asset, just not sure if it fits this use case.

    Side note... I have a single line working using Line Renderer. Mainly debating if this will save me any time on getting the multiple lines working in sync.

    Thoughts?
     
  50. Eric5h5

    Eric5h5

    Volunteer Moderator Moderator

    Joined:
    Jul 19, 2006
    Posts:
    32,085
    Like this? (With a less janky rainbow, presumably. ;) It's just this demo but with a rainbow texture.)

    Screen Shot 2015-08-13 at 11.50.30 PM.png

    --Eric