"Hand drawn" shader

This had been rattling around in my head for some time and I may have need of it soon… so I spent some time playing with the idea. It could use some tweaking but I think it looks pretty cool so far…

It looks better in some views than others but it’s a good start.

Examples:





9 Likes

…in the end, I will probably have to setup a set of parameters that I tweak based on time of day.

pretty cool!

Really cool effect.

I think it is an awesome blend of effects!

How are you doing your edge tracing? It’s nice and detailed like the one I had thrown together… I think mine was rather expensive considering.

The texture overlay is static, yes? I bet that has a really really cool effect when moving through the scene.

Oh god that is awesome, will it be on the shaderblow repos? :smiley:

@t0neg0d said: I think it is an awesome blend of effects!

How are you doing your edge tracing? It’s nice and detailed like the one I had thrown together… I think mine was rather expensive considering.

It’s a Sobel filter. A pretty basic 3x3 edge detector. I may try a Frei-Chen later but it will be a little more expensive and this one seems ok. I have other issues with the lines (in my eye) regardless of how they are detected.

@t0neg0d said: The texture overlay is static, yes? I bet that has a really really cool effect when moving through the scene.

There is a repeating background texture for the “paper” that Mythruna uses for many of its paper-like backgrounds. It could be anything, really. I may use the noise fractal to perturb it a bit.

There is also a cross-hatching texture that is sampled for the shaded areas. I may also run this by the fractal noise to make it a little less uniform. Mostly it’s not noticed unless there is lots of dark shading. I may also add a cross hatch texture with fewer layers to cut over to in the lighter areas. Often hand drawn art has some distinct borders between light cross hatching and dark cross hatching and the current light cross hatching is lighter than any human would realistically draw.

There is another texture used for the lines. Right now this is just a highly sampled version of the crosshatch texture but I want to give it a more “pencil on paper” texture. I just needed variation and the lines are thin enough that the crosshatching is not obvious. (I would like to do the lines as a separate pass that is then perturbed with a fractal to simulate imperfect hands… with a value to control how much to perturb. *For reasons. This will also give me the opportunity to do some AA on it.)

There is a whole screen fractal noise that is multiplied by the shading and the lines to give the drawing a less uniform darkness. This is also combined with the edge-based fade.

  • Eventually, I want drawing to be a trainable skill in Mythruna which means I need to be able to simulate poor quality up through good quality. Having lines a little wavy and not exactly lining up with the shading is just one of many techniques that could be hooked to a “quality” value. I may decide that perturbing the whole image is enough but in my mind’s eye, I really like the idea that the lines and shading wouldn’t line up… like something hastily colored.
@javagame said: Oh god that is awesome, will it be on the shaderblow repos? :D

It’s a shader and a post-proc filter class. I don’t know if shaderblow has stuff like that… but I do plan to contribute this once I’ve properly parameterized it. Though I may not include all of the textures that I use.

Awesome , i want this!

… ehr… i meant… if there is chance of contribution ! :lol:

1 Like

I updated the shader to have two tones of crosshatch. I think it helps make things look less like an old photograph and a bit more like a sketch. I tried to take some of the same vantage points. Let’s see how we do…

It doesn’t always do a great job but Mythruna is kind of a hard world to sketch…

Here we see two shots of the same view. The underlying fractal noise prevents them from being exactly the same…


Indoor scenes are 10x better. I didn’t even show any last time because they were “meh”… but this is nice, I think:

The water gets a little weird but I think the overall composition is still nice:

And most of the world just looks pretty great:

Back to the little farm…

Two of the same view with different lighting…


I think in real life I actually have pencil sketched sunsets like this at one time or another:

I kind of need to stop messing with it for a while, though. :slight_smile: Get some real work done or something.

For a simulation of a rough hand-drawn sketch, I think the results are showing more detail than I’d find credible.
Look at the last image - I don’t really know how long would it take a human to draw all the details of the ground, the tree leaves, and those huge amounts of cross-hatching, but I know I’m not seeing that kind of detail on historic landscape drawings.

Humans would try to cut corners.
Probably on the cross-hatching, though I have no idea what techniques are available to a human for that.
A human would also eliminate irrelevant detail. I.e. leave out cobblestone if farther away, merging the tree branches into an outline with some vague branch hints inside, that kind of stuff.
I guess that would be a lot of coding and unclear effort-to-effect ratio, so I’m definitely not recommending doing anything specific about that. (But maybe the game object storing such a drawing should be in a way that allows later improvements, e.g. store the scene, not the bitmap - not sure about memory ramifications but maybe worth a though.)

Anyway: That’s awesome shader-fu!
Even if it was simple to do - knowing what small work can make a large difference is part of the trick :slight_smile:

@toolforger said: For a simulation of a rough hand-drawn sketch, I think the results are showing more detail than I'd find credible. Look at the last image - I don't really know how long would it take a human to draw all the details of the ground, the tree leaves, and those huge amounts of cross-hatching, but I know I'm not seeing that kind of detail on historic landscape drawings.

Humans would try to cut corners.
Probably on the cross-hatching, though I have no idea what techniques are available to a human for that.
A human would also eliminate irrelevant detail. I.e. leave out cobblestone if farther away, merging the tree branches into an outline with some vague branch hints inside, that kind of stuff.
I guess that would be a lot of coding and unclear effort-to-effect ratio, so I’m definitely not recommending doing anything specific about that. (But maybe the game object storing such a drawing should be in a way that allows later improvements, e.g. store the scene, not the bitmap - not sure about memory ramifications but maybe worth a though.)

Anyway: That’s awesome shader-fu!
Even if it was simple to do - knowing what small work can make a large difference is part of the trick :slight_smile:

So… considering I have a minor art background and pencil and pen landscapes were some of my favorite things to draw (buildings and trees are easy, people are hard)… I’m going to have to disagree a bit. :slight_smile:

The reason I like the last picture so much is because it looks like it’s been worked over a hundred times and the pencil has all smudged where the arm/hand would have been a lot. You build pictures up like this in several layers, crosshatch over crosshatch, and sometimes you go back and erase sections to add in lighter areas. My only complaints with that last picture are the repetition in the crosshatch and that the plants are too uniform cookie-cutter… but that’s not something easily fixed.

Crosshatching is also only one shading technique but it’s the one I always liked the most and it was the easiest for me to control… it also transfers well to ink. Some people prefer rubbed smooth shading but I liked techniques that would transfer to pen and marker. Fortunately, I can simulate some other techniques by swapping out the shading texture. Charcoal pencils would be another fun one to add.

Some pencil drawings are even more detailed than I’ve done here. This is probably the top-end of the drawing skill in the game and this is what I will use for in-game images in menus and such.

In real pictures, details are left in or out at the whim of the artist. It all depends on the effect and impact they are trying to achieve. Frazetta used this to great effect in his paintings where the main action was often crisp and highly detailed while the rest was more of an impression. So cobble might be drawn far away if it tells the story the artist wants to tell.

Also you can see that in some of the pictures the far way objects are less detailed, some trees and buildings turn into silhouettes with simple cross-hatch shading.

Anyway, I could probably easily list off a dozen or so issues I have with this shader. Some might be fixable but many never will be as an artist’s eye just can’t be replaced. The interesting thing will be if I let the player get involved in where they choose to tease out detail… or even add their own lines. That’s when it will really get interesting. All for a way later date, though.

If I swing back and implement the “low quality” drawing version I’ll try to post something back here. I already have ideas percolating on that.

Thanks for the comments.

P.S.: If you google image search for “pencil landscapes” there are some amazingly talented folks out there… really nice stuff.

P.P.S.: Some more eye candy for anyone who has read this far… :wink:

@toolforger said: Anyway: That's awesome shader-fu! Even if it was simple to do - knowing what small work can make a large difference is part of the trick :-)

Heheh… just noticed this last part. “Simple to do” = “about 8 hours work not knowing from one step or the next if you are going in the proper direction”. Labor of love, more like. :slight_smile:

It’s a classic case of tweaking one thing screwing everything else up. I edited my crosshatch textures (there are two now) at least a dozen times alone.

@atomix said: Awesome , i want this!

… ehr… i meant… if there is chance of contribution ! :lol:

I will contribute it after I have time to clean it up and add parameters for the various tweakable settings. Not tonight but hopefully soon. Maybe next weekend if I have time.

I guess whether it’s good depends on what purpose that drawing skill has.

If it’s an artistic skill, this is fine (and more than that).
To translate skill levels, a higher skill would mean more approximation to the real image.

If it’s a skill for a spy, a scout, or an explorer, these people work under time constraints: the spy might be chased off by a guard any time, the scout and the explorer want to move on. These all want to eliminate irrelevant detail, use coarse cross-hatching, and whatever other shortcut there might be - you probably know far better than me what can speed up the drawing process :slight_smile:
To translate skill levels, a higher skill would mean slightly less irrelevant detail, less perspective errors, more informative shading (as opposed to “more realistic”, i.e. less cross-hatch lines but more precise relative intensities).
To translate skill levels, a higher skill would mean less perspective errors (just as for the artist, but perspective would probably get better at lower skill levels), more irrelevant detail elimination (artist does not do that), more shading level precision (just as with the artist I guess) with generally less cross-hatch lines.

Oh, and the artist will have people on the drawings, which the scout won’t unless they’re going to be there all the time (i.e. guards will be shown, customers on a market probably just sketched to indicate how many people are there).

@pspeed : This shader is gold.
Maybe some lines are drawn to thick, but overall, post processing at its best.
The forest in the last image looks epic.

Initially, I will use it for pictures in books that the player isn’t responsible for creating. They keep track of the objects they know how to create, the properties they own, etc. in a journal. This will be used to create those pictures so accuracy is actually ok in that case.

Lots will change for the skill-based version.

@zzuegg said: @pspeed : This shader is gold. Maybe some lines are drawn to thick, but overall, post processing at its best. The forest in the last image looks epic.

Thanks.