[WIP] LineWorks Vector Graphics

Introduction
Hello my name is Mike Talbott. At my company, Point Line Plane, I primarily have use Unity for interactive architectural visualizations, however, I have come to love Unity so much that I have used it for all of my software development. One of my more atypical application built with Unity is a public transit app called Busit!. In developing Busit! i had a major issue to overcome. i.e. How to render 10’s of thousands of lines dynamically and simultaneously. I tried many different approaches: The built-in LineRenderer is a joke (sorry guys), Vectrosity is great but also could not handle the load in a dynamic scenario (Eric, you’re still a Unity god to me), and direct calls to the low-level graphics library (GL.Lines and GL.Quads) was promising but fell short as well due constant redrawing. My solution was to write my own line renderer that pushes some of the trigonometric calculations to the GPU in shaders. When I did this, the performance gains were tremendous. Since then I have added many feature to the package and I hope to release it to the asset store some day soon. I am calling this package, LineWorks.


LineWorks
Lineworks is a powerful vector graphics package designed to be easy to use and fit seamlessly within your existing Unity3D workflow. Lineworks was created specifically for Unity to enable high-performance vector graphics.

Features:

• In-editor tools for creation of linework and their appearance.
• Simple Scripting API for the the creation of linework at runtime.
• Fully integrated with the new Unity UI for creating fully resolution independent UI’s.
• Mesh Modeling options for creating fully editable and interactable 3D linework meshes in the editor.
• Shader based anti-aliasing for smooth line edges without using MSAA or FXAA.
• Shader based dynamic widths and colors.
• Shader based render modes for drawing dynamic 3D lines with no CPU overhead.
• Works with any material (Lineworks material is required only for the shader base features).
• A complete replacement for the poor performing built-in LineRenderer and TrailRenderer Component.
• Support for SVG importing (shapes, styles, and transforms are fully supported).

I’ve been polishing Lineworks for the asset store for a long time now and today I would like to show you a preview of how it’s going. Please take a look at the video below. I’d love to hear your questions, feedback and requests. Thanks for taking the time to check it out.

Video Preview:

Mike Talbott
Point Line Plane LLC

 

Looks good. Does it have an option to distribute unity objects along a line ? It would be great to be able to import svg lines and be able to use them to arrange the layout of other unity objects. For example lay several fence piece objects over the imported spline and then delete the spline so that it is just used as a way to place objects in the editor ? Also do the lines work correctly on a mobile device or does it require a gpu with a higher shader model ?

 

Ask and you shall receive. I think that's a good idea. I already need to implement a method for adding SVG markers (arrowheads etc.) to the begin, middle, and end of lines. I'll write it to accept any gameObject/Prefab and add an option to space object evenly with a total number or place objects only at points along the line.

LineWorks should work on mobile devices as I originally wrote LineWorks specifically for iOS and Android. However, I must admit it's been a long time since I've tested it on any mobile devices. The only issue I've come across is when I wrote a LineWorks shader that has diffuse, bump, specular, parallax, and shadowcasters I was hitting the arithmetic limit of shader model 2.0. A simple bump up to shader model 3.0 fixed it and if you don't need all that extra stuff, the shaders should run fine on 2.0. I should also add that LineWorks will work with any regular material, you just won't get built-in anti-aliasing, dynamic widths, and 3D Line rendering.

 

Hey mtalbott,

This looks amazing! Can't wait to play with it.

If I had to make a request without knowing the complete feature set already. I'd love to see a 2D landscape shape.

This would be a bezier line along the top with fill beneath. I'm guessing your polyline shape is pretty close to this, but the landscape would not require the outline (and colliders that go with it) to exist on the sides and bottom.

The ability to snap these together in some manner would also be nice.

RageSpline has this and it's very useful. Here is an image of what I mean.

 

@jeffweber Thanks for the comment! Landscape shapes was an easy add. I added a Landscape toggle for polylines and paths. With that and variable widths, you should be able to create the equivalent of your RageSpline screenshot:

 

Can this tool also generate 2D and 3D colliders for the lines and SVG filled shapes ? Also the video preview mentioned that this tool can dynamically reduce or increase the complexity of a curve. If so you could use this so that you could generate a less complexed version to act as the collider to enhance performance.

 

Perfect. Thanks.

When do you think you'll submit this to the asset store? Days, weeks, months??

 

looks good, performance is important... how about 2d physics colliders?

 

@jeffweber, wishfully, I'd love to submit it by the end of next week. Given how long it's taken me to get to this point, I think it's more realistic to think a couple weeks. I've also never submitted anything to the asset store before so I don't know how long the approval process is.

@imaginaryhuman, @IanStanbridge just requested colliders so I'm working on adding them right now. Right now, I think it will support your choice of 2D edge, 2D polygon, and 3D mesh colliders. Also, as IanStanbridge suggested, I'll use the built-in simplification algorithm to allow for simplified versions of colliders.

I'm loving getting this feedback. I spin in circles sometimes when I'm left to my own thoughts. Thanks.

 

I'm interested in svg icons for Unity GUI on mobile devices. How suitable is lineworks in that regard?

 

Very nice asset ! Well done

One thing could be cool to have, is wireframe generation.

You take a mesh into input, and output automaticaly a wireframe version of it with 3d lines.

 

@zyzyx, It should work fine on mobile... Depending on your use. The one catch is if you are moving stuff around on you canvas alot. Modifying RectTransforms within a UI canvas causes the canvas to rebuild itself by iterating through every UIVertex and updating the vertices of a mother-mesh for the whole UI. This isn't a LineWorks thing, this is a Unity UI thing. The difference is that a simple sprite has 4 vertices and a LineWorks Components could have hundreds. I've never noticed any slow down but I've also not tried to overload the UI with 100's of LineWorks Components.

@Ziboo wireframe generation might not be too hard to implement. Although, probably just triangle meshes I can't imagine getting It working with quad meshes in the next week. I'll take a look at it.

 

Thanks! I want to use svgs for a few (not more than ~15) simple icons and logos like links to social media and such.
Will there be a demo?

 

Another thing I will be interested in is the possibility for a closed path to give an extrude value

 

This is the single most exciting looking asset store product I have ever seen. If this can be made to work as a totally resolution independent UI graphics solution for mobile it will change my whole life.

 

Hi Mike,

We are in the process of investigating the best tool for our line-drawing requirements in our product right now. Is there any chance of us getting a beta version to try out?

/Mark

 

Hi everyone,

I've been working or a slight functional change. After debating the options, I'm spliting the LineWorks component into 3 different components. A Renderer, a Geometry, and a Style component. I did this to better support hierarchical inheritance of styles, to create a cleaner interface, to allow for better draw call optimization, and to better handle RectTransform changes when you want the Linework to Scale to Fit or Stretch in the UI Rect. I'll provide a simple wrapper class to make it easy to work with in scripts. I know all of that might not make any sense. I'll explain better in a short video or maybe a demo.

As for sharing a beta, I'd be happy to share LineWorks with a limited number of people before release. just send me a private message. I might need a day or two to get it to a beta level as the changes I made, broke a lot of things.

Thanks for all the support,
Mike

 

I'd be keen to see how this works with my Oculus Rift... staying tuned

 

Quick update. Everything is starting to clean up nicely. couple quick responses:

@zyzyx, I will make a demo once everything is closer to finished. If anyone has a suggestion of what I should demonstrate, I'd love some ideas for examples.

@Ziboo, I think extrusions wouldn't be impossible but probably not in the initial release scope. I'll definately look into it as soon as I release LineWorks.

@franktinsley, Thanks! That means a lot.

@timothyallan, I can't think of any reasons why it wouldn't work on Rift. There are no secret "trick cameras" like with Vectrosity so if a line is in world-space then it will show up on the rift in world space with no problems.

Also, here's just a quick video of a dead-simple interface that uses some of the svgs @Feaver1968 pointed me too:

 

Is it still possible to get a beta version? If so, I'd like to check it out.

 

Hello again,

I apologize for the delay. I have a separate full-time job so my available time to develop is sporadic. I hope to change that once LineWorks is released. The video I made previously maybe presented LineWorks as being closer to completion than it really was. Sorry about that. I've been struggling with some UX design issues to insure that LineWorks is both "easy-to-use" and "full-featured". Unfortunately, sometimes those two goals appear opposed to one another. If everything behaves and the interface starts feeling good, it shouldn't be too long before it's done. All the under the hood stuff is complete. Hope that's not too disappointing. Sorry for the delay.

I'll try to post more here to keep a dialog going. Maybe I'll even ask for some help when I'm stuck.

I'd still love to share a beta with a small number of people but I just feel like I should get the big structural changes to settle down before I share it.

I'll elaborate a little if you're interested... I've gone on a long journey of having everything happen in one Component to splitting every shape and style into different Components to now I'm somewhere in the middle where shapes and styles are grouped together in a collection Component. I've landed on this strategy for two reasons: 1. There are situations where you might have complex compound shapes and if every shape was it's own component it would lead to hundreds of components on a single GameObject. 2. LineWorks allows for the saving of Style and Shape Presets. eg. For applying the same style to multiple objects and maintaining the link so changing the style preset changes all effected LineWork. This is not possible if shapes and styles are individual components.

I'll be working on LineWorks all this week so hopefully I'll have more to share soon.

 

Hey Mike Talbott!
Was searching for an asset with vector support for Illustrator files just yesterday. This looks quite amazing. Good luck with it!
And perhaps I can try out beta before release

Michael

 

Thanks for the update. Still really looking forward to seeing this released! I'm very familiar with the whole: working a full time job plus doing personal dev on the side, so I'll wait patiently.

 

Thanks for the update man. Yeah this seems like a pretty tricky thing to design just right. Don't feel bad about it taking time though. How many years did it take Unity just to do a new UI framework again? lol

 

Totally understand your situation and thanks for keeping us in the loop despite your workload.
I am really looking forward to testing this out! I would be using this for both my full-time job and my personal projects.
Keep it up!

 

This looks amazing and very useful !

 

Hi all,
Quick update. Beta Testers have been selected. Beta's are currently going out. I'm going to put together a "State of Affairs" video to give a detailed look at how I think this thing is going to work. In the meantime, here's a short video that briefly shows some of the feature I've been working on.

 

So freaking jealous of everyone in the beta

 

Hey Mike (mtalbott),

Any chance of getting in on the beta here? This looks like just the solution I need.

 

Is it still possible to get into the beta?

Would've been using this for an ingame editor, so performance is critical in terms of drawing many handles at once

Kind Regards

 

Hi @mtalbott, as TehReason asked, is it possible to get access to the beta? I have an open world hovercar prototype I'd love to use LineWorks in. If not, when's your release date?

 

This looks fantastic! Very much hoping I can use it on my next project. In case you're looking for feature suggestions: It would be extremely useful for me if it were possible to generate smoothed closed paths that are concave and convex hulls of arbitrary collections of (2d) points.

 

Did it get to Asset Store at last? It's pretty amazing!

 

This looks really awesome! I've spent days searching for a way of creating UI elements that can scale up/down whilst remaining sharp. I can just imagine all of the possibilities with something like this. Is there any news on a release date?

 

Great work,.Cool stuff.

 

This looks like it might be abandoned, which is a huge bummer because it seems SO useful, even just with the features previewed in the beta

@mtalbott, any news?

 

It's not abandoned, Mike Talbott is actively working on the asset.

 

Thank you, @movra. Movra is correct, I am still actively and aggressively working on this. I was on vacation for a week and worked a full-time consulting gig for two weeks. As I said before, once released I intend to clear my schedule to support LineWorks. I should reply more but I always hesitate to post because I constantly think I'm only a few days away from submitting and I want to share good news.

Currently, I'm just working on tightening everything up and making sure LineWorks is a stable and performant. I'm am just as anxious (If not more so) to release LineWorks as everyone else. I'm to the point where I might have to stripe a few feature from the initial release and then add them back in future releases.

currently I'm working on Shader optimization. I'm trying to pack my vertex data into a single float but I'm having some precision issues (to be expected). Since Unity 5 supports more than 2 UV maps, I could defer this issue for now if I drop Unity 4.X support. Don't anyone care if I drop support for Unity 4.X for now?

Thanks again for your patience,
Mike

 

I vote for drop 4.X for now. Very biased opinion though.

 

^

 

How will lineworks compare to this package https://www.assetstore.unity3d.com/en/#!/content/38258 ? It seems that lineworks takes an approach that allows it to keep curves smooth despite scaling in real time. Is this correct?

 

@franktinsley, good question.

There is definitely some overlap between SVG importer and LineWorks. To explain the difference let me start by also pointing you to this asset https://www.assetstore.unity3d.com/en/#!/content/38218 (Sugar2D).

Sugar2D is a 2D toolset for creating and editing 2D vector Shapes and SVG Importer is an SVG asset importer that converts SVGs to mesh assets. LineWorks is the combination of these two plus more. LineWorks offers highly editable Vector graphics like Sugar2D; SVG importing like SVG Importer; plus Shader based features like Anti Aliasing, Dynamic Widths, 3D Lines, and rendering optimizations; high-accuracy simplification algorithms; 2D colliders; full Unity UI support; and supports 3D and 2.5D vector graphics.

At the moment I will admit that if all you want to do is to use SVG assets without modification in your games, SVG Importer's workflow is pretty good and probably easier to use than LineWorks. That said, I'll be working to improve LineWorks workflow to be competitive with SVG Importer in the near future.

Hope that helps,
Mike

 

Thanks for the speedy reply! The thing I'm most interested in knowing is if LineWorks is able to render smooth curves despite scaling. SVG Importer creates a mesh at edit time and can't change it at runtime dynamically in order to hide the fact that the curves are actually a series of straight lines. Does LineWorks take an approach that keeps curves smooth without losing performance?

 

Whops forgot to address that part.

The short answer is: No, LineWorks doesn't not guarantee a completely smooth curve at all resolutions.

LineWorks, Sugar2D, SVG Importer, and Vectrosity all do some form of tessellation to create a mesh for rendering. While LineWorks does some Shader magic to make lines look smoother, it does not hide the tessellation. Lineworks does allow for the adjustment of the level-of-detail or segmentation in editor and at runtime so it is possible to change the smoothness of a line at runtime based on its size on camera but this would require a recompute that is not performance free. If your linework is not too complex recomputing level-of-detail at run-time might not be too unreasonable.

Since LineWorks uses a custom shader, In a future version (maybe 2.0), LineWorks might switch its shader rendering technique to a techniques that is completely resolution independent and displays perfectly smooth curves at all sizes.

 

Interesting okay cool, good to know. Thanks!

 

Hi All,

I know it must feel like no progress is being made but I promise I am working very hard to try to get this plugin complete. I'm trying to make sure the interface and workflow feels right and isn't too complex while not sacrificing powerful capabilities. Unfortunately, right now, I feel like have failed at that task. I wanted to provide the maximum amount of flexibility for creating vector graphics while also maximizing performance. Regrettably, my approach has created a complex web of relationships that I now think might be bad for the user experience. So I'd like to get everyones advice on two features that I am considering removing:

1. Style inheritance. SVG's have a "pass-down" inheritance of properties. (ie. Children objects receive the inheritable properties of there parents in the hierarchy). Currently LineWorks is setup to work like this. This is great for mimicking how SVG's work and creates the opportunity for changing the appearance of multiple objects from one parent style. However, It is hard to communicate how this inheritance works and it might create confusion because the style controlling a GameObjects appearance might not be located on that GameObject and might even be spread across several parent GameObjects. Additionally, LineWorks allows for things that are not possible with SVG's like having multiple strokes attached to a single geometry. This complicates how the inheritance works. Does anyone care about having a SVG accurate style inheritance?
2. Mesh Batching. When I starting working on LineWorks Unity5 wasn't out yet so Unity4 Free users did not have access to Static Batching. Because of this, I went to great lengths to to ensure that you could create complex graphics and have them all internally batching into a single MeshRenderer. That's great for draw-calls but it can create a confusing interface where an extra Component is needed to be the "Renderer" that pieces all the parts together. Now that everyone has access to Static and Dynamic Batching, the thought was that I could simplify the interface and remove a required Component if I just let Unity's batching do the work. I haven't tested yet if there is a performance consequences to this approach. If I went this direction, I would add a feature to "bake" complex hierarchies into a single Mesh but at the cost of losing easy edit-ability. What do you think?

Thanks again for being patient and for providing your feedback. The more feedback I get, the quick I solve issues.
-Mike

 

My vote is to keep it simple for the initial release. Skip the style inheritance if it's making things complicated. Same goes for Mesh Batching keep it simple and let Unity do it.

I think once you get this into the hands of users, it'll be much easier to get feedback and figure out what feature are desired.

 

Thanks, @jeffweber. I value your opinion. I too want to get this in the hands of everyone as soon as possible.

 

Sorry I don't have any feedback for your above questions, but I have another. Will it be possible to have runtime loading of svg assets? For example, being able to load different svg assets either from a file or AssetBundle when the game is running, for modding support. Thanks.

 

@Korindian, Yes. With LineWorks you should be able to import at runtime. The importer accepts a path to a svg file or the plain text of the svg file. You can store or download svg files any way you like.