Hand-Drawn Shader Pack [RELEASED]

Description
The Hand-Drawn Shader Pack is a collection of non-photorealistic shaders that create a variety of stylised "hand-drawn" effects, including pencil sketch, ink, pen, chalk, and crayon.

Drawing on a range of influences, including A-Ha, Murasaki Baby, and Okami, the shaders are designed to be flexible and customisable. Separate “outline” and “fill” styles can be combined in different ways to create a range of effects resembling various art styles.

Asset Store Link | Blog Entry with More Info

Features

• All features work in Unity Free and Unity Pro
• Full, comprehensively commented source code
• Highly customisable - separate "outline" and "fill" effects can be combined to create a wide range of variations
• Demo scene and 8 example materials included

Demos
Video Tutorial
Webplayer Demo
Android .APK Demo

Gallery
The following images show the result when applying some of the supplied shaders to the Unity ShadowGun sample project:

Pencil


Crayon


Ink


Ballpoint Pen

 

Heya,

I went to purchase your shader pack from the asset store this morning and Unity threw up a warning that they may not work in Unity 5. Can you confirm that they have been tested and work properly in Unity 5 please? If not, do you plan on updating the shaders for Unity 5 compatibility?

 

Hi there,

Yes, the hand-drawn shaders will work with Unity 5. However, the example scene and materials included with the pack seem to get broken on import, so if you just import the current asset straight into a Unity 5 project, you'll get a face full of pink to start with, and you have to manually re-assign all the shaders and textures to the correct materials.

I'm working on fixing that at the moment, but I'm somewhat reluctant to update the version on the asset store with a package that works for Unity 5, but then breaks compatibility with any earlier versions! So, if you can just bear with me a week or so I should get a new Unity5-compatible sample scene ready. If you can't wait, you can download the package as it stands now and I'll just talk you through how to set up the materials.

(I only got Unity 5 myself yesterday, so I've not had much chance for extensive testing yet!)

Here's one of the "pencil outline" materials assigned to the Unity 5 skycar vehicle:

 

Hello. I just deployed a simple test to iOS and Android on Unity 5. iOS is working correctly but I have issues with the /Hand-Drawn/Filed/MultiTextured(Multiply) on some Android devices like the Nvidia Tegra K1 (Galaxy S3 works fine).

iPhone 6:


Nvidia Tegra K1:


Any Ideas?

 

Hi there. Sorry to hear you've been having problems.
I'm not familiar with the Tegra K1 - is that the chip in a Nexus? I've tested on a Nexus 10 with no problems, as with a variety of other Android devices (Xperia, S2/S3, HTC One etc.). Unfortunately, one of the problems in testng for Android is it's near impossible to guarantee 100% compatibility, but I can't initially see why that device should have any issues...

I have just earlier today uploaded a new version to the asset store which had a couple of tweaks made to it - maybe that might solve your problem, but I'll be honest and say that it's only by chance if it does. If you don't want to wait for the update to get approved, please email me via the support email and I'll email you back the latest version of that shader for you to try.

 

I was trying to achieve something very like the example screenshot at top.

But after an hour of messing with this, I'm giving up.

It seems these shaders largely ignore the mesh and require highly detailed diffuse textures for them to work. On closer inspection, I realised that your screenshot shows on the right hand side a magic diffuse texture providing the detail.

Taking a scene and adding the shaders I get the barest subtlest of outlines, but 99% of the mesh is ignored, both on the outline and internally, unless the angle between camera and mesh-normal is huge (approaching 90 degrees).

Looking back at your screenshots I see now that the same applies: the mesh isn't being rendered at all, only the texture-maps.

I suggest you make this clearer in the description. As-is, the shaders are useless for the use case similar to your first screenshot: e.g. procedurally generated terrain will never render with this.

 

Hi,

I'm having the same problem as the previous poster - looking at the provided screenshot, I assumed I could get terrain to render as it appears in that scene (which is not included with the examples). But the shaders don't seem to work well on terrain at all.

Here's a screenshot of a mesh using a material, on a terrain that also uses the same material. As you can see, the terrain looks wildly different, and it's apparently impossible to get it rendering with textures AND the outlines from the shader...



Any help you can give would be welcome, if it's actually possible to achieve this result with the provided shaders.

 

@a436t4ataf @Johnnemann

Hi guys, sorry to hear you've been having troubles - let's see if we can get those sorted out for you.

Firstly, there are absolutely no "magic" diffuse textures required or used in any of the screenshots or example scenes - they use exactly the same textures as you would use to render a scene "normally". For a mesh, that typically means a single albedo (i.e. diffuse) texture.

In answer to "Is it possible to achieve this result with the provided shaders?", well - yes, because all the screenshots were produced using the example shaders!

You're correct in saying that the screenshot at the top of this page makes use of assets not included in the pack - apologies if that wasn't clear. By definition, shaders need *something* to be applied to, and for that screenshot I think I used an asset called "Medieval Environment". But all I did was change the shader assigned to the material for the castle model and terrain from that supplied with the model to use the Hand-Drawn/Overdrawn Outline + Smoothed Greyscale Fill instead.




That screenshot also shows a built-in terrain, that follows exactly the same process too - simply assign a material with a hand-drawn shader to the Base Terrain "material" slot in the last tab of the terrain settings.

Re: procedural terrain - there's no reason why this wouldn't work, but you'll have to generate not only the terrain heightmap but also the terrain texture (but that would be true if you were using the normal terrain shader too). If you can explain a bit more about how you are generating your terrain I can probably help you with a more detailed example.

Hope that helps - let me know if you need further help.

 

OK, to test this I created a new project and imported the hand-drawn shader pack and the standard FPS controller.

I created a default terrain, raised its height a bit with the brushes, then assigned it a single texture (the "rough paper" texture from the shader pack).

Then I created a new material with the Outline+Smooth Greyscale Fill, and set the base texture as the same as the terrain texture from before.

I end up with a terrain that's the same color as whatever the camera fill color is, with the outlines visible. No texture is applied at all to the terrain. (this is in-game, in editor the terrain just goes entirely invisible).

I created a plain cube and dropped it on the surface. It's possible to see it through the terrain. If I apply the same material to the cube, I get the same thing - it's just the camera clear color with outlines.

So... what am I doing wrong here? This is Unity 5.0.0f4 Professional.

 

Ah - I see where you're going wrong: the "rough paper" is not to be assigned to the terrain - it's to be assigned to the background. The terrain itself should have normal terrain textures painted onto it.

I wrote a step-by-step guide but it's a bit long to include here so I put it up on my blog - let me know if this explains better: https://alastaira.wordpress.com/2015/04/04/creating-hand-drawn-terrain-in-unity/

 

Hi,

Thanks for the well-written, thorough explanation. I guess I'm aiming for something that may not be possible - to combine the hand-drawn shaders with elements that are rendered in other ways. And with a player-controlled camera, a static paper background that appears to move with the camera is pretty disorienting.

I'll play with rendering the terrain using a different camera and see if I can get the effect I'm hoping for, but I'm not sure that'll happen.

It seems like these shaders are maybe meant for A) using _only_ the hand-drawn style, and B) using a fixed-perspective camera. What I was hoping for was a hand-drawn looking terrain with a photorealistic skybox! I'll try other solutions.

Thanks for your help.

 

Thanks for the blog post, it's great.

There are two issues that together make it useless for me:

1. "At this point, your screenshot probably looks like this – getting there but not quite right yet " -- this is ONLY TRUE if you have a VERY low camera-angle. Any other camera-angle, and you get a blank space.

2. In that screenshot, half the effect comes from your shader detecting normals (the black bits) the other half comes from simply reading the original diffuse texture. My misunderstanding from your asset store page: your shader provided both parts; I have used shaders before that did this, and it didn't occur to me that your shader would require a diffuse texture to work.

I had assumed your shader did something like:

1. Detect all normals
2. Color according to change in normals
3. Color accoridng to change in distance (e.g. a bumpy surface has sudden changes in distance while the bumps are approx same normal)
4. Combine 2 and 3 semi intelligently to get output color
5. special handling for outlines (normals which switch through 90 degree angle from camera)

Instead, it seems it only does 1 and 2 for extreme edges, and doesn't do 3 4 or 5 at all. (if you try to increase the outline width at all, it very suddenly destroys the outline with jaggies and chaos, apparently because it's not doing any special handling).

That's OK for some people, but I'd recommend making it much clearer on the asset store what it does and doesn't do.

 

Hi
I really like the effects your asset creates. However I'm experiencing that the models I apply the shaders to, appear semi-transparent and I can see that it's the same case with the models in the sample scene.
How do I avoid this? As I can see in your screenshots from the ShadowGun Sample, the models there do not seem to be semi-transparent.

As an example, perhaps you could explain how you would make one of the models in the sample scene non-transparent?

You can see my example here (where I simply placed two cubides behind it)

 

Hi there - the partial transparency is there by design, since the asset is designed to recreate a hand-drawn effect; imagine as if you'd coloured over the top of a picture with a pencil or pen - you'd still be able to see some details of the picture underneath, right?

However I can explain how to customise this behaviour - to be clear, which effect were you mainly interested in? The one on the stork shown in your screenshot above? (the process will vary slightly for the different shaders in the pack, so I don't want to guide you through the wrong one!). And you want the interior to be fully opaque?

 

Thank you very much for the quick response

I know understand why you would do it like that. But then perhaps the ShadowGun example makes it a little bit confusing, since there is no apparent transparancy there and it would make less sense to have it in that example.

Nonetheless, I would very much like your help with making a fully opaque version.

I would prefer to be able to use any of them with the fill being fully opaque. But the one with Crayon, meaning (Fill+Outline/Textured Outline + Quantized Textured Interior) and the BallPointPen, meaning (Fiil+Outline/Simple Outline + Multitextured Multiply Fill) would be the most important.

Also, if you can show a way to take an outline shader and simply just have the interior in one color, that would be a great bonus as well.

 

Great asset for NPR shading. I've just purchased the asset, but can't seem to get shadows to appear on the ground (a plane object). Here's a screen shot. I have cast shadows on for the spot light, and all objects to receive and cast shadows. I am missing something simple?

 

how to make this effect in unity can any one help me to make this effect in unity while painting app

 

Are those drawn using the line renderer component? If so, it should be pretty straightforward to assign a "crayon" material that applies the dappled texture in screenspace.

 

hello tanoshimi
can you help me to provide crayons ,material

 

Hi,
Is this shader pack compatible with Unity 2019 LTS?