Hand-Drawn Shaders and creating Tonal Art Maps

I recently submitted my first asset to the Unity Asset Store – a set of shaders designed to produce a variety of real-time “hand-drawn” effects.

image

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. The following images show the result when applying some of the supplied example materials to the Unity ShadowGun sample project:

Pencil

image

Crayon

image

Ink

image

Ballpoint Pen

image

You can play a web demo that demonstrates the effects here, and another here.

The “ballpoint pen” and “pencil” shaders both make use of a technique that calculates the apparent brightness of each part of the game scene, and replaces it with a texture interpolated from a sequence of images with progressively increasing density. This can be used to simulate artistic techniques such as hatching that represent different levels of tone intensity in an image. The basic method on which these shaders are based is described in this Microsoft Research article.

hatch_0 hatch_1 hatch_2 hatch_3 hatch_4 hatch_5

A Tonal Art Map representing increasing levels of hatching intensity

My shader pack already comes supplied with a set of hatching textures (referred to as the “Tonal Art Map”), but I thought I’d document here how I created them, so you can follow the process to create your own alternative TAMs. You can actually download the original set of 6 textures used in the Microsoft Research paper from here (together with an implementation of the hatching method in Javascript). However, since these textures are licenced under GPL, I couldn’t include them with the Asset Store download so created my own from scratch instead.

Creating a Tonal Art Map

You can use pretty much any graphics program for this – I used Paint.NET, but you could use GIMP or Photoshop just as easily.

1. Create a blank image – for performance reasons you should always make sure its dimensions are a power of 2 – 256px x 256px should be fine for most purposes.

2. Add some random noise to the image. In Paint.NET this is Effects –> Noise –> Add Noise. My TAMs are all monochrome, so set Color Saturation to 0. We’ll create the least intense image first, so set coverage relatively low (5 should do it), and set intensity high:

image

This should create an image as follows:

image

3. Now apply a blur, by Effects –> Blurs –> Motion Blur. Choose an angle and distance that looks attractive to you.

image

This gives:

image

4. Notice how the effect of blurring has created the strokes we want, but lightened the stroke intensity too much in the process (in fact, you can barely see them in the image above). To correct that, we’ll use Adjustments –> Curves. Change the Luminosity curve to resemble something like this:

image

This will make the image look like this:

image

5. If you’re happy with this as a base image (if anything, the image above is actually too intense, but I’ll leave it for now), then save it as your first texture (e.g. FillTex_0.tif). Then add a new layer to the image (Layers –> Add New Layer).

NOTE: For some reason, the Paint.NET noise function doesn’t appear to work on layers with a transparent background, so the first thing to do is to use the fill tool to fill the new layer in White. This will obscure your background layer for now but don’t worry, we’ll sort that out later.

6. With the new layer selected, repeat steps 1-4 above, but rotate the angle of the motion blur by 90 degrees. This should make your top layer appear as follows:

image

7. Now bring up the properties for your top layer (Layer –> Layer Properties) and change the Blend Mode to Multiply:

image

This will cause the hatching of the second layer to be overlaid on the first, darkening it where strokes intersect in much the same manner as would occur if you were to use a pen on paper:

image

8. If you’re happy with that as your second texture, merge the layers down (Layers –> Merge Layers Down) and save as FillTex_1.tif.

9. Keep repeating the process of adding new layers, adding noise, blurring, changing luminosity, and multiply blending for each additional texture in your Tonal Art Map (my shader pack includes shaders for 4 textures and 6 textures). For cross-hatching, you should alternate the blur angle with each layer, but you might also want to include a bit of random variation. The important feature of this technique is that each progressively more intense texture builds upon all the preceding textures.

Of course, you don’t have to stick to simple straight lines – try different noise functions, wavy lines, or textures in your TAMs to create interesting effects, or to simulate other materials such as pencil, chalk, or charcoal. Here’s another Microsoft Research paper that demonstrates some alternative textures:

image

About these ads
This entry was posted in Game Dev and tagged , . Bookmark the permalink.

12 Responses to Hand-Drawn Shaders and creating Tonal Art Maps

  1. fantasia says:

    Very interested in this very cool shader package. Does this work on Mobile?

    • alastaira says:

      Hi! These shaders have not really been designed with mobile in mind – as described in this post, producing the effects requires blending between a large number of textures (the most complex shader has 7 texture slots – 6 for the hatching textures and 1 for the base texture), and I suspect the GPUs on many mobile devices will choke on that. I know my 18mth-old Android handset – a Sony Xperia S – can’t handle that particular shader, but it will handle all the rest.

      If there’s enough interest, I might consider writing “lite” versions of these shaders in the future that produce cut-down versions of the effects more suitable for mobile processing. I’ll keep you updated!

  2. Hi Alastair, I Just bought this pack form the asset store and it’s really awesome!!!

    I have a question tough: Is there any way for these shaders to retain the color info on the textures? I’m trying to achieve an effect like this: http://www.mobygames.com/images/shots/l/503749-valkyria-chronicles-playstation-3-screenshot-game-starts-in.jpg,

    I’m an artist but I’ve already learning how to code shaders, I’m just too noob and thought you could point me on the right direction!

    thank you in advance!

    • alastaira says:

      Hi! I’ve not played the game but, based on the screenshot, it should be a matter of blending the base texture based on the opacity or brightness of the calculated hand-drawn texture – let me have a play around and I’ll get back to you.

    • alastaira says:

      Edwin – is this any good? http://alastaira.files.wordpress.com/2013/12/pencilshade.jpg?w=582

      It uses a toon ramp for the lighting, but instead of directly changing the light intensity based on the ramp lookup, it uses it to control how much pencil shading texture is overlaid.

      • Hi!, wow! that’s exactly what I was trying to achieve! looks great! If it’s not much to ask could you put it on an update to your shader pack??, I won’t ask you if you could share the code so I think an update to the shader pack would be awesome :), anyway Thank you very much!!!

      • alastaira says:

        Check your email ;)

      • fantasia says:

        Wow, the effect looks great. You are a Shader Magician. I’m working mainly with Mobile and just drueling over this asset. Please add Mobile support. There are over 2 million Unity Developers and many are using Mobile. Your time in making a Mobile version will definitely broaden the customer base and for sure increase sales.

  3. I’m also interested in the Valkyria Chronicles effect, does your package include it as standard?

    • alastaira says:

      Hi Darien – I’m just in the process of updating the pack and this will be included in the next version, together with several optimisations that improve performance on mobile devices – should be available within the next week!

      • Darien says:

        Thanks, is there any way to get that textured shadow fill effect to work with more a lighted toon texture? Also possibly with the hatched outline as well?

      • Darien says:

        I guess that was a dumb question since it uses the shadow to place the effect, but I’m having trouble getting it lit to the right amount.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s