Adding outlines to Spine Objects in Unity possible?

kbm

Hi everyone,

is it possible to add an outline to a Spine Object in Unity?

I googled for 1-2 hours and found nothing, maybe because this is too specific?
All I could find were some obscure "toon" shaders with outlines, but they didn't work with the Spine export, everything bugged out.

If I am not mistaken, the "Spine/Bones" Shader seems to outline each layer – this is pretty much what I need, but not an outline for each layer, only for the "overall" outline of the object.

Can anyone help me out here? (I am on Spine Pro btw, if that helps)

kbm

Pharan

Spine/Bones doesn't outline anything.

Are you on Unity Pro?
I wonder if you might need some Unity Pro features to achieve this (framebuffer stuff).
I don't really know. But you're right that it is shader stuff.

kbm

Pharan wrote
Spine/Bones doesn't outline anything.

Are you on Unity Pro?
I wonder if you might need some Unity Pro features to achieve this (framebuffer stuff).
I don't really know. But you're right that it is shader stuff.

Thanks for your reply. Yes, I own Unity Pro - the problem (for me) is that I can't really replace anything in the Spine Unity Runtime Shaders without breaking everything (because I have no idea what I'm doing).

jpoag

IIRC, toon shaders use surface normals to detect edges. A curved surface's normal's dot product (to the camera) will become zero. A little thresholding in a pixel shader and you have edges.

Because Spine is 2d, the surface normals are going to be uniform (unless you switch to bump mapping). Toon shaders won't work without explicitly supplying a normal map for each 'appendage.'

If you only need the outline, then what you could do is generate line geometry from Spine's computed mesh/geometry. You will need a Polygon boolean library, such as http://angusj.com/delphi/clipper.php (in C#) and figure out how to feed the polys to that and perform a union operation.

It should generate a list of polygons that you can use as a line list.

kbm wrote
because I have no idea what I'm doing

Generally speaking, this is a non-starter. You'll need to find something in the Unity Store that you can hack or hire a contractor to flesh it out for you. :-/

Pharan

This is definitely a different solution to a toon shader, since vertex geometry isn't geometry in 2D skeletal animation.
I imagine it needs to do edge detection around a pre-rendered alpha composite, then draw it under or over the regular render, depending on what you need. No idea if Unity free can do that.

Søren

I can't give you a solution to your problem, but I can tell you the steps that needs to be taken to create an outline for the entire object, not each individual one.

First you need to render the Spine object to the FBO (Frame Buffer Object). For us non-geek speaking people that basically means it will render the entire object to a single image and place it in the FBO. I'm not sure if this is too low level for you to handle in Unity, but maybe this will help http://docs.unity3d.com/ScriptReference ... ixels.html

Secondly, you will then need a shader to draw an outline around the FBO texture.

I hope this helps 🙂

kbm

Thanks for all your replies. I understood some of the things you were talking about.

Unfortunately, as I said, I don't have any experience writing my own shaders (yet) and I'm not an experiences programmer.
I would gladly pay some money for this effect, do you have any pointers on where I could find a shader that would work?

I already searched most of the Unity Boards and the Asset Store for this kind of effect but there was nothing, really. 🙁

jpoag

Pharan wrote
This is definitely a different solution to a toon shader, since vertex geometry isn't geometry in 2D skeletal animation.

Not sure what you're talking about, but I assume that you mean that the 2d geometry doesn't include surface normals.

Pharan wrote
around a pre-rendered alpha composite, then draw it under or over the regular render, depending on what you need

You're on to something there...

Shiu wrote
Secondly, you will then need a shader to draw an outline around the FBO texture.

That sounds super slow.... maybe if you drew to a mega texture all outlined assets and used it as source... the shader would need to do multisampling to detect edges...hmm...

Here's an approach that I remembered after reading Pharan's post: Render Twice, once with all lighting turned off (or materials set to Black) and again with normal lighting. This is a trick I do with text rendering to get contrast against backgrounds. Usually, I will render down and to the left (in black) and then again in the target color.

Instead of down/left, you can render centered with the asset scaled slightly larger and then again normally. You can play with turning the texture off when you set the material black, but I suspect that it might be faster to leave the texture on the material.

Unity is pretty smart when it comes to rendering, and it should aggregate render commands that use the same materials and textures. If all of your assets are atlased into the same texture, then rendering the outline followed by normal should all happen in the same draw call. You might have to play with things to get the rendering speed up.

thislop

https://www.assetstore.unity3d.com/en/#!/content/62384

I was able to get outlines working using this asset, but it broke when deployed to android. Works fine in editor on PC though!.

Pharan

Interesting asset. Thanks for sharing!

thislop

http://forum.unity3d.com/threads/free-open-source-2d-outline-image-effect.314362/

This also works with spine and is FREE unlike the other asset I posted. Still breaks on Android tho.