Toon Shader [ Released ] IOS compatible, fast and beautiful

Hi,

Thanks for your interest in Toon Shader !
Toon shader produces fast and beautiful toon shading.
It is compatible with Android, IOS, web, PC and Mac platforms*.
I hope that you will find it useful in your projects !

The package includes a user manual, also available for online browsing at scribd.
Here is a sample page :



Some web players that demonstrate this shader :

Link1
Link2
Link3
Link4

*Android and IOS devices should support OpenGLES 2.0

 

Kinda empty atm, will fill it soon

 

Excellent work. I notice a texture for the shape of the toon shading on the scribd help files. Perhaps if you were to talk about this more, people may see even more of what your toon shader can do. I have high hopes for this one.

 

I also think showing an un-tooned head beside a tooned head would be great to show what it can do.

Looking forward to it. Great to hear you got the iOS love working.
Great job.

 

I agree on showing an untooned head beside a tooned one. Great job.

 

Greetings,

I am now trying out your toon shader. It does indeed look good. My only concern is that you seem to be taking into consideration the camera viewpoint when applying the shading texture. The problem with that is that the lighting becomes inconsistent as the camera moves around. Specular highlights are camera depedent, but diffuse lighting shouldn't be! If you could get rid of the camera centric shading that would be great, Thanks a lot!

 

Hi,

Thanks for your kind words

hippocoder : This little "Shade" texture permits many shading models to be encoded in a texture, I will expand more on this at the next version, near May 15.

24pfilms, OmniverseProductions : The head model is a modified version of this one. Its polycount is high ( 6200 verts, 34200 tris) and I used it because I cannot model yet.

psylife : What you describe is the intended behavior. I do not use lights ( you can place lights = 0 for extra speed at settings btw ), the left side of the model gets brighter and the right part gets darker. As objects move around the camera, their "shading" changes accordingly. I do not understand how would you like it to work, could you please expand a little your explanation ? I could consider implementing your suggestion in a future release, once I fully understand it.


Here is another example : A screenshot from my Ipod Touch 4 running an animated skinned model offered by BirdaoGwra, with 4x antialiasing, at 60fps. The model is available at the link ( thanks ), has 2400 verts and 3300 tris :



And here is how a 88 tris head with a texture looks like :
( Thanks to Evan Greenwood for releasing for free a model of Blade Master 2, it is available at the asset store )



Thanks for the support,
-Ippokratis

 

A good video to advertise your shader would be to do Sailor Moon in mat/claymation style for old iOS devices and swap the shaders out during runtime to your toon shaders similar to what this link is talking about I believe:

http://unity3d.qatohost.com/questions/232284/changing-shaders-for-all-children-some-with-multi.html

 

I've attached a quick sketch to try and clarify. Would you mind taking a look at it and see if it makes sense?

 

Hi,
Thanks for the feedback.
The sketch on the right does not correspond with the results from Toon Shader for the proposed angles. I wish to point out that the "lighting" provided is not from top to bottom, is from right to left.
Different angles can be achieved, I will provide support for this in an upcoming version though.
You will notice that right to left lighting is very common in manga comics. The lighting direction is better demonstrated in the following pictures, that follow your proposed camera angles :





If you have any questions or suggestions, I 'll be happy to hear them,
-Ippokratis

 

Thanks for your prompt responses Ippokratis,

My team and I are working on a title that calls for a degree of flexibility regarding the shading of our dynamic obects. We are interested in a outlined three tone shading such as yours but with the added advantage of having more control over the directionality of the "lighting" itself.

Bear in mind that even though mangas and comics alike have a degree of stylization, they are still subect to a degree of lighting consistency which is not the case here. The appearance of lighting provided by the shading texture map should not be altered by the movement of the camera. A practical example of that would be a human walking in a room equipped with a single lamp as a lightsource source would not expect to see the implied location of the light scource changing as he/she moves across the room and his/her angle of view gets altered. Lighting and camera should at least appear to be completely independant.

I am aware that the default map you provided is from left to right. I have made my own because the environment I am working on has an established light source located above the obects I want to fake the lighting on.

Try orbiting the camera left to right and you will have further exemplification of the issue I have pictured in my previous post.

I hope this made some sense.

 

@Ippokratis, I think I've understood the requirements of psylife, so I will try to explain the situation with other words:

• Your current implementation doesn't have into account the position of the lights in the scene, the part of the character closer to the right border of the screen will always look brighter and the part of the character closer to the left border of the screen will always look darker.

• psylife likes your toon-shading algorithm (me too) but he wants the shader to take into account the scene illumination. For example, if you have a static light in a wall and you rotate the character and the camera, sometimes the part of the character closer to the right border of the screen will be brighter and sometimes it will be brighter the part of the in the middle or the part of the character closer to the left border of the screen. It doesn't matter the position of the character relative to the camera or his position relative to the borders of the screen, but only his position relative to the lights in the scene.

Both options are incompatible because, when you decide which parts of the character should be illuminated, you only take into account the position of the character relative to the camera, ignoring the lights in the scene. On the other hand, psylife wants the shader to ignore the position of the character relative to the camera and take into account only the lights in the scene.

I think you should create both shaders (and sell them in the same package) because depending on the art-style of the game, there will be situations where your current implementation is better and there will be situations where the psylife's feature request would provide a better result. Another possibility would be implementing a single shader with a slider so you can change smoothly between both implementations, but I don't know if such shader would be too slow for mobile devices.

 

Just bought your shader to use in my next game, and I have to say it is awesome! I actually achieved many more effects with it than just toon shading, using different gradients I managed a really cool metal type texture that gives the illusion of being slightly reflective, and some other awesome effects.

 

Hi,

I really want to thank everybody who bought the shader for the support ! I am very interested to hear your feedback and see how you use the shader on your models

psyfile :
Thanks for the feedback.

There are many styles out there, I believe that what you describe is used in some approaches and what is achieved with this shader in others. The "artistic freedom" includes a huge variety of "toon" styles. E.g. I really love the style of Moebius ( recently R.I.P ), I cannot reproduce it with this shader either.

I have completely understood what you are trying to create from the moment you used the term "directionality", but thanks for describing with even more detail. I understand that this is a requirement for the style you try to achieve.

What I would like to clarify is that I totally respect your artistic taste and what you try to achieve. It is clear that it is not going to be achieved using toon shader. I can consider this feature for a future update, if there is enough demand. You should also know that it is quite improbable to achieve a desired artistic vision result with an 15$ investment. Instead, since you have a concrete image of what you wish to achieve, your team should approach a person with the skill to fulfill what you vision, or create it yourself. Usually the rates for such persons are in the 100$ per hour range. If your team is interested in a freelance collaboration, please contact me via PM with a concrete proposal and we can further discuss the details.

If you feel that I have described the shader's abilities in a way that mislead you, my sincere apologies. I can totally respect this. Unity Asset Store has a refund system which you can use. If you find any problems receiving the refund, please contact me describing the problem ( I do not think that you might have any problems to get a refund, but, say, just in case ) and I will happily refund you personally.

I am very interested to know any other questions - suggestions you might have, please feel free to contact me here, or via PM, as you prefer.

davidgutierrezpalma : Hi, the Pro Racing AI seems very interesting. Do you have any plans to expand it for motorcycles as well ?

Thanks for the explanations and suggestions, I will take them seriously into consideration.

Astrauk: Hi there, I remember the implementation of mesh and texture combination you did, I found it very clever : )

Hehe, pictures or it never happened My plan was to create a "as flexible as it gets" shader, a "swiss army knife" shader that lets you create as many effects as possible and can be batched. Fast - beautiful. There are more features to be added but still is too early ( first day actually ) and I do not want people invest on what this shader might become. I guess I have a strange way to market my products. I would really love to see some pictures from your models using this shader

Thanks for the feedback and the support,
-Ippokratis

 

I'll get a short video of the metal-ish effect I had going on and post it here, and also some pics of my character using the shader.

Here's the video
http://youtu.be/xA3cvQ8f-R4

 

Looks great. Bought it earlier today. Do you plan to add flash support soon though?

 

Hi,
Astrauk : Thanks for posting the video

ParaLogic : Thanks for your kind words I have no plans for flash support at the moment, the platform requirements are too restrictive at the moment. I wait until it matures more.

Kind regards,
-Ippokratis

 

I love the cartoonish look of your shader and I haven't bought it yet only because it wouldn't be appropriated for the project I'm working on at this moment. However, I will probably purchase it for my next project, so I hope you will keep improving your product in the meanwhile

As you seem to take into account customer feedback, I will say that I would also like to see the shader being affected by scene lights. I like your idea of creating a very flexible shader, but that flexibility could hurt performance on low-end mobile devices, so I think you could get a better performance if you provide several different shaders instead of trying to build the "most-flexible-cartoon-shader-in-the-world".

At this moment I'm supporting "Edy's Vehicle Physics", "UnityCar" and the "Unity Car Tutorial", but I can add support for a new Vehicle Physics in less than 10 minutes... as long as such Vehicle Physics has a method for reading the user input and another different method for everything else (for example: applying the forces to the vehicle).

My system is so flexible that it can be used to control a crazy experiment with a flying car, so I bet it will be able to control a motorcycle without any problem. However, you must take into account that my product only includes the AI, not the Vehicle Physics, so you will need to find (or develop yourself) the Motorcycle Vehicle Physics... by the way, which Vehicle Physics would you use? I'm only aware of the "Two-Wheeled Addon for RapidUnity Vehicle Editor", but I wrote a Private Message to the author to ask him if his product meets my requirement and he didn't reply. If you are aware about any other product which supports Motorcycle Vehicle Physics, let me know because I'm very interested.

 

Hi,

davidgutierrezpalma :

My "ideas" value nothing unless they get materialized in products. I believe it is little early to discuss about the evolution of this shader in the first day it got published Right now it has some features : If people think they justify its cost - great, if not - it is ok. When new features are added, it will be judged again. It will take some time, maybe a month to see something new ( my day job is very demanding ). I do appreciate people's suggestions, Batching Tools and Toon Shader are profitable because I took people's suggestions into account.

I know only about "Two-Wheeled Addon for RapidUnity Vehicle Editor" as well. Haven't tried it. I love motorcycles ! Thing is, to develop a decent vehicle physics setup and couple it with a clever AI from scratch is a big investment in time and money, thus products like yours or "Two-Wheeled Addon for RapidUnity Vehicle Editor" can be very useful.

Kind regards,
-Ippokratis

 

That's unfortunate, was hoping to use it for one of my current projects. Thanks for you answer and good luck with this shader

 

I agree, developing both (Vehicle Physics and AI) is a very time consuming task and that is the reason why I'm using 3rd party Vehicle Physics instead of developing my own product... maybe I should try to offer a complete solution so I can control completely the behaviour of the vehicle, but at this moment I don't have enough time to start working on a Vehicle Physics for my AI.

I will try to get in touch again with the author of the "Two-Wheeled Addon for RapidUnity Vehicle Editor" and see if we can make our products to work together, I'll wrote you a PM when I have some news about this topic.

 

Thanks for your kind words, unfortunately I am afraid you haven't quite understood the issue. This has nothing to do with "artistic vision" but with the fact that the way the highlights are being updated is just inconsistent. Here is a videocapture I have posted on youtube, perhaps it will be clearer. Let's just not worry about a refund just yet, I would just like to give you a chance to understand the issue.

In the video:

Upper cube is using Unity toon shader lit.
Lower cube is using your toon shader.

Click here to see video example

You will notice that the point of origin of the lightsource appears to be changing as the camera revolves around the object. In fact it changed four times within the time of this little demonstration. This is making it impossible to match the environment's implied lightsource location with the one implied by your shader through the shading texture.

 

We can't see the video, it's set as "private".

 

Thank you David, sorry about that, it's public now.

 

Ok, now we can watch the video and now I understand what you meant with "inconsistent lightning". I completely agree with you, there is something wrong with the shader illumination when there are lights on the scene. Could you upload a similar video without any light in the scene? I would like to see the shader behaviour in that situation...

 

Hi,
davidgutierrezpalma

That would be nice

psylife : Thanks for posting the video. Hard edges and toon shaders are not a good match. You can read more about how to solve the hard edges issue at the section of the manual called Best Practices. The essence is that the more smooth the edges are, the more suited the mesh is for use with the toon shader. Smoothness is a combination of triangle's normals and angles between neighbor triangles. IMO a cube is the definition of hard edges - not a really suited mesh for this shader. See here for a little more explanation ( albeit it covers outlines mostly ). I will try to explain more on this issue tomorrow ( got to get some sleep now ), but the idea to keep is : Try to apply this shader on organic - shaped meshes with smooth normals.

Kind regards,
-Ippokratis

 

His shader is unlit, which means that the light in the scene I have uploaded has no effect on his shader. The way I am getting the cube on the lower screen to appear to be lit by the same light as the upper one, is by plugging in a gradient in the shading texture attribute of his shader.

 

Ippokratis, smoothing normals will have absolutely no effect over the issue I have illustrated in my previous video. That is because smoothing normals average the normals direction by "blending" the rate at which they change angle. This will at best make the inconsistency "smoother" rather than fixing it. Here is a video illustrating the same concept with two spheres. Notice how the shading on the lower sphere is hardwired to the camera view, so much so, that the camera seem to be not moving at all even though it is. It is also unlikely that projects undertaken by different team throughout the world be deprived of hardsurface models. Note that Unity toon shading handles hard edges without any problem. Enfin, If you are still confused, please do take a second look at my previous posts, and it will hopefully help you come to the same conclusion.

Upper sphere is rendered with Unity toon shading (lit)
Lower sphere is rendered with ippocritis toon shader (unlit)


Click here for video example 2

 

Hey psylife, I think the sphere in the second video shows the current intended behaviour: the part of the model closer to the right border of the Screen will always be brighter and the part of the model closer to the left border of the Screen will always be darker, it doesn't matter the relative positions of the lights or the camera (if the shader is unlit, it can't know the position of the lights in the scene, right?). I know it isn't the behaviour you were looking for, but Ippokratis probably thinks that the current behaviour is fine because that kind of art style can be perfect for some kind of games.

However, I agree with you in the following two points:

• Ippokratis should improve the shader behaviour with hard surfaces, specially because this shader is supposed to be "iOS compatible" and hard surfaces are very common on mobile devices due to poly-count constraints...

• It would be nice if Ippokratis modified his shader (or created a new shader) which takes into account the positions of the lights in the scene, it would make his product more appealing for both of us

 

I just encountered a weird bug, I applied the shader to a bunch of models in my scene, and everything was looking good, but when i tested it on my iPhone4 the shading wasn't there, they all still had the black outline but no shading, my character shows it fine though. Is there any reason why this might happen? Thanks.

 

Hello David, I agree with you. Note that the shading texture works very well at faking lights a long as the camera doesn't move relative to the object. If the objects move and rotate around the scene, the implied light source remains consistent. The only problem is that because the shading texture is being applied relative to the camera, the illusion of light becomes inconsistent as the camera rotates around objects.

Ippokritis, here is a suggestion. Would it be possible for you to find a way of mapping the shading texture in a way that would keep the shading pined to the object and not the camera? By taking into account the surface normals relative to their world space orientation perhaps? Each UV coordinate of the shading texture could correspond to a world space axis perhaps? So for instance, if a user was to generate a gradient from left to right, the white portion of the gradient would correspond to "-x" in worldspace. All the normals pointing in "-x" at a given time would be consistently highlighted, completely diregarding the camera angle. The objects would then be shaded worldspace rather than screenspace.

I will post a video demonstrating how the shading texture works well at faking lights consistently as long as the camera doesn't move

 

It's technically possible to pass in an external coordinate ie a game object position as a parameter for the shader to use, and I think it would be a good idea, but you would not be able to specify more than one light source. Also I don't know how hard/easy this is for ippo to implement.

 

One light source sounds great! Bounce light can be faked by artistically handling the shadow area.

 

As promessed, here is a video demonstrating the ippokratis toon shader. The camera stands still and the objects are rotated. Notice how the implied light source location stays consistent, illuminating the correct side of the objects.

click here to see the demonstration

 

Hi,

psylife : Thanks for posting the videos and explaining the problems you encountered. It is not just me being polite, this feedback helps me a lot to create a revision of the "Best practices" section and solve issues for current and future user ( by the way, I am thrilled by the number of sales in the first day Thanks for the support everyone ! ).

I like the fact that you experiment with the shader and I encourage you to do so. I currently state " no lights" in the product description at the asset store. You took the liberty to replace the shade texture I provide with the shader with a gradient. You can place whatever texture you wish there but do not expect they will produce consistent lighting results. The currently supported modifiable parameters are the detail texture, the base color, the outline thickness, color and transparency. Not the shade texture. I will make this more clear in the user manual to avoid confusion.

I noticed the way tones change abruptly when you rotated the cube and I thought this was the issue ( abrupt change of color tone ), thanks for clarifying it further.

It is not strange to get such unpleasant results, since you are mixing in the same scene two objects, one that responds to light and another that does not. I believe that there should be a consistency in the way light is emulated in a scene, otherwise the result are not nice. You could mix unlit background with toon shaded characters or toon shaded background with toon shaded characters. But the combination you use seems provides unpleasing results.

I do not believe that you can get nice results by mixing anything with anything. If you try to google about toon shading, you will find that the above recommendation is a very common one, it is not something I came up with. The idea of using a toon shader on a crate model is not so inspired.

You know, Ippokritis means hypocrite in Greek ! It is Ippokratis actually ( I am not offended, I just prefer to call me Ippokratis ).

Thanks for this suggestion ( and all other suggestions you did ).

I will try to make a similar video too, thanks for the initiative.
[EDIT] You posted the link before I finish my post ! Thanks for getting in the trouble to post all these videos



davidgutierrezpalma :

The shader is IOS compatible and I claim this after testing it. It is not "supposed to be". I understand that it is not the main point of your sentence but I like clearing things up.

Low - poly and hard "surfaces" ( I guess you mean hard normals, right ? ) are two different things.
This is a low poly head ( 88 triangles ) with smooth normals, using toon shader :


You can read more about that here.

Thanks for your suggestion.

Astrauk :

Would you like to send me a scene that reproduces this error so I can have a look at it ? Thanks.

hippocoder :
Hi there !

Thanks for your suggestion. There is a way to do everything, as much as you are happy with the tradeoffs.

I will try to post some more videos and web players by Monday,
Thanks for your feedback !
-Ippokratis

 

Sorry, English is not my main language and maybe I didn't express myself correctly. I wanted to say that the shader should work better with hard edges because hard edges aren't uncommon in the low-poly models used on mobile platforms.

 

Hi,
davidgutierrezpalma :
No worries, really. I really appreciate the feedback and I hope my response didn't sound harsh ( I use English as a second language too ).
-Ippokratis

 

Ippokratis, thank you for your patience. I know you are trying your best and we all appreciate your efforts. I am glad you understand the issue. As it stands now, your shader falls short of complying with my needs. Note that your shader handles hard edges very well. The term "hard surface" refers to objects and structures (usually man-made in nature) and requires their edges to be "hard" in order to be represented correclty. If one was to "smooth" the normals of a structure that requires its planes to stay clearly differentiated it would produce dissonant results.

In this example, you can see the effect of "smoothing normals" on an object. The green lines represent the vertices normals direction. Smoothing out the normals (right Cube) result in blending together the normals meeting at the same point and therefore altering the shading of the object contradicting the initial intended design.

Good luck with your shader and keep us posted on future improvements

 

Hi,

psylife : Thanks for the feedback. Keep an eye on the thread, new things will keep appearing.

-Update-
I am working on supporting Toon shader on Batching Tools. I also work on some demos for both packages. It is a very busy period for me but I try to finish them soon.
-Ippokratis

 

Hi, I have some questions about your toon shader. I'm currently using built-in toon shader outline in Unity. What I don't understand is that why Unity can't batch those objects which use toon shader outline. Each object has 2 draw calls so the overall draw calls are multiplied by the amount of objects. But when I change shared material to use only toon basic (without outline), Unity can batch those objects properly. Do you know what's the reason why toon basic outline shader can't be batched in Unity? Does this behavior also happen with your toon outline shader? And how many draw calls of you toon outline shader per object? I intend to buy your product but I just want to make sure that it's working as I expect.

 

Hi,

Unity dynamic batching works with some shaders only.

I work on a solution called Batching tools, have a look at my signature.

2

Thanks for your interest, I am currently working on making a demo that showcases both toon shader and Batching tools. I hope it will help you decide. Please ask any other questions might occur, I will be happy to answer.
-Ippokratis

 

Thank you for the answer. What I like about your shader is that it scales the outline properly when I zooms in/out. The built-in toon shader has its outline looks bigger compare to the object when I zoom out. And it looks really ugly. By the way, when you said that it's fast, how much of it compare to built-in shader? What cause it to be slower or faster? I'm totally noob in shader programming. So, I ask this just for curiosity.

 

Ippokratis can correct me if I'm wrong (maybe his "toon" code is more optimized than Unity's code) but I think the main reason is because the built-in cartoon shader takes into account the lights in the scene while Ippokratis shader is unlit. Maybe you have read the discussion we had above about if the shader was rendering the faked lights correctly or not... this was precisely the reason of the discussion: as the shader is unlit, it doesn't know the position of the lights in the scenes, so Ippokratis and psylife took a different reference point as a origin of the faked lights:

• Ippokratis considered that the origin of the faked light is placed on the right side of the camera, so the origin of the faked light will move when the camera changes its position or orientation. In other words: the part of the character closer to the right border of the screen will be always brighter than the part of the character closer to the left border of the screen, it doesn't matter the position of the character relative to the camera or the lights in the scene.

• psylife considered that it should be possible to define a GameObject (or a light) as the origin of the faked light, so the scene illumination remains consistent with the positions of the lights in the scene, it doesn't matter if the camera moves or not.

• I think both of them are right because there are some cases in which the psylife approach is required, but there are other cases where the Ippokratis approach would be better.

 

Thank you for this! I have been looking all over for a toon effect that is compatible with iOS

 

Hi:
jjoby:

Well, this is one thing that bugged me too, some people like it like that, others prefer the built-in toon shader approach. It is a matter of aesthetics ( I find the built - in outlines ugly too, besides that there are not many other differences between the two outlined shaders ).

Benchmarking comes soon, after I finish the demo. I try to figure out an example scene - shaders that would make sense for comparison and I am open to suggestions. The number of instructions the GPU has to execute is a metric, this shaders executes very few instructions on the GPU.

davidgutierrezpalma : Hi there Lights can increase shader complexity ( especially dynamic ones ) so certainly this counts too, plus no cube maps used.

BrumDogPro :

Thanks for your kind words, I hope you find this shader useful in your project.

Thanks,
-Ippokratis

 

Hi,


Thanks a lot for the support ! Toon Shader is #2 in the top paid assets in the Textures and Materials section

I did some progress in making a demo that showcases Toon Shader and Batching Tools.

Meet the Candy Gem Blaster



I try to finish a small playable demo. Also did a gem shader, IOS compatible, that will be included too ( it is used on the diamond behind the girl, supports altering color - transparency ).

The plan is to include the demo - plus a tutorial on how it was made - in an upcoming upgrade ( around end of May ) of Toon shader ( and Batching Tools ). I hope that the demo and the tutorial will help people understand better how to use these two products.

Thanks,
-Ippokratis

 

Hi,

Thanks a lot for bringing Toon Shader in the first position of the Top Paid assets in the Textures and Materials section !



I am working now on some new shades - 2 tone left to right , 2 tone top to bottom, 3 tone top to bottom. I try to make them available this week. Pics are coming soon

Batching Tools lightmap problems are fixed ( updated version is pending release ) and next version will support Toon Shader.

Also, a new shader is coming - a Gem shader

Thanks a lot for your support,
-Ippokratis

 

Great !
I would like to see more and in a game because I actually couldn't see enough to know if I will buy it or not !?!
But I'm very interested...

6R

 

At this price it's a ridiculous steal.

 

Hi,

p6r : You are right, I have a demo on the works as shown in the post above. Problem is that a week has only 168 hours and I already work around 100 hours per week, hence it will take some time.

hippocoder : You are the fourth person who suggests that the price is low - a steal. I hope new customers realize that there is a bargain here - I plan to bump the price in the future but not just yet.

Some pics :

- new Top to bottom shade, 3 tones



The already supplied left to right shade, 3 tones, for comparison



Kind regards,
-Ippokratis