Cross hatch Shader

Cross hatch is an artistic technique used to create different shades by  drawing paralel lines. By playing with the separation, the angle and the density of lines, you can draw any tone just with one color.

When I travel I usually have a notebook and a 0.2 mm black pen so I can quickly draw any scene I like. This is a drawing I made in Greece last year:

So first of all, to recreate this effect we need a paralel lines texture. We want to look it hand drawn, so the more irregular the better. I found this one, it just needs some tweaking to make it seamless, but it will do the work:

I also processed this texture to obtain a signed distance field texture (SDF) in order to use it as a halftone pattern (check these great Ronja’s tutorials).

Then I create two textures, one with diagonal lines, and mirrored copy of this. So I use the first to create the light shadow tone (ball in the left) and mix both of the together to create the transition between full dark and light shadows (ball in the center).

Finally I added a texture to the shadows to create the paper grain texture (ball in the right)

And what better to test this shader, than in a creepy dungeon scene with our cute undead fighter. If you stop the animation you can almost feel the smell of an old Dungeons & Dragons book!

chemari

2 comments to “Cross hatch Shader”

You can leave a reply or Trackback this post.
  1. Jordan - May 20, 2020 Reply

    Hi Jose, for the SDF what settings did you use to get it your result?

    I’m trying to get a crosshatch shader going but I can’t seem to get any result from the SDF generator other than a plain white square.

    • chemari - June 3, 2020 Reply

      Hi Jordan, sorry for the late answer.
      Keep in mind that if you use the SDF generator by Catlikecoding you need to provide an image with an alpha channel. The texture you can find in this article is just a RGB image, so it will look white after being processed. If you want to use it, you will need to process it in photoshop and make the white background transparent.

      https://catlikecoding.com/sdf-toolkit/docs/texture-generator/
      From the manual: “Source Texture is any texture with an alpha channel. If it’s an alpha-only texture then the source preview will appear solid black…”

Leave a Reply

Your email address will not be published.