Hi,
Given a simple flat scene, like the one below, but with more shapes, is there a way I could generate something like the second picture? i.e. add a sort of "free hand" edge effect to the shapes? Doesn't have to be exactly like that, just some kind of "drawn by a human" edge effect.

The only idea I could think of was something like detecting the horizontal and vertical components and rendering each multiple times, "wiggling" the horizontal up/down and the vertical left/right,. However I'm a newbie so I don't place much trust in my ideas.

Any ideas much appreciated. Thanks,

Stuart.

ZbuffeR

01-10-2011, 02:00 AM

The search terms you look for are : NPR - non-photorealistic rendering
http://en.wikipedia.org/wiki/Non-photorealistic_rendering

There is a lot of different ways to do that, with different pros and cons.
For a start, I would use a "edge detection" shader, and offset the source coordinates according to a blurred-noise texture.

Stuart McDonald

01-10-2011, 05:27 AM

Thanks for the pointer. I've been having a browse, but I think there's a fundamental concept I'm missing. You say "offset the source coordinates", but what coordinates?

Similary I found a reference on Bonzai Software site that says "To simulate the shaking hand of an artist, the edges and colors are distorted with a perlin noise texture", but again I don't see how do that.

Given a texture of the edges of the scene how can I change that to be "shaky". Most of the references I've found seem to keep the original edges e.g. cel shading outline stuff.

Thanks.

ZbuffeR

01-10-2011, 07:18 AM

Idea is, for each destination fragment, to read the color values from the noise texture at the current texcoord, and read the rendered scene texture at current texcoord + noise value.

If you want the hand drawn line to wiggle even when everything is static, add an offset to noise texture coordinate, and change it every frame.

Stuart McDonald

01-20-2011, 02:09 AM

First off, thanks again Zbuffer for your invaluable help!

To make this topic more useful for anyone coming across it I thought I'd share what I came up with.
First, I render the scene to a 4x smaller texture (since I can scale it back up to get a "fuzzy" effect") using a convolution matrix shader
// Max width*height of convolution kernel
const int MaxKernelSize = 9;

// Offsets to pixels to read for the kernel
uniform vec2 TexOffsets[MaxKernelSize];

I then created a seamless simplex noise texture and use it with the following shader to "wiggle" the edge texture created above.
// Edges texture
uniform sampler2D Tex0;
// Simplex noise ALPHA texture
uniform sampler2D Tex1;