Applying a noise texture to distort edges

Question

I asked this question over on StackOverflow but then found this site, and it's probably better suited to here.

I'm trying to implement Sketchy Drawings. I'm at the part of the process which calls for the use of the noise texture to derive uncertainty values that will provide an offset into the edge map.

Here is a picture of my edge map for a torus:

And here is the noise texture I've gotten using the Perlin function as suggested:

I have these saved as textures in edgeTexture and noiseTexture respectively.

Now I'm stuck on the section where you have to offset the texture coordinates of the edge map by uncertainty values derived from the noise texture. This image is from the book:

offs = turbulence(s, t); 
offt = turbulence(1 - s, 1 - t);

I'm ignoring the 2x2 matrix for the time being. Here is my current fragment shader attempt and the result it produces:

#version 330

out vec4 vFragColor;

uniform sampler2D edgeTexture;
uniform sampler2D noiseTexture;

smooth in vec2 vTexCoords;

float turbulence(float s, float t) 
{
    float sum = 0;
    float scale = 1;
    float s1 = 1;
    vec2 coords = vec2(s,t);

    for (int i=0; i < 10; i++)
    {
        vec4 noise = texture(noiseTexture, 0.25 * s1 * coords);
        sum += scale * noise.x;
        scale = scale / 2;
        s1 = s1 * 2;
    }

    return sum;
}

void main( void )
{
    float off_s = turbulence(vTexCoords.s, vTexCoords.t);
    float off_t = turbulence(1 - vTexCoords.s, 1 - vTexCoords.t);

    vFragColor = texture(edgeTexture, vTexCoords + vec2(off_s, off_t));
}

Clearly my addition to the vTexCoords is way off, but I can't see why. I have tried several other turbulence function definitions but none were close to the desired output so I'm thinking my overall approach is flawed somewhere. Any help here is greatly appreciated, and please comment if I haven't been clear. The desired output for a torus would just look like a roughly drawn circle I would imagine.

Answer 1

It looks like you're applying way too much noise. You want to multiply the noise value by a small factor so it has a very small amplitude, corresponding to just a few pixels of distortion. Right now you're distorting it so much that every pixel is being sent to a completely different location in the texture, just making a hash of the whole thing.

Also, I've only skimmed that article, but I'm pretty sure you're not supposed to render the Perlin noise on the surface of the torus the way you show in your second shot. Much more likely, you're supposed to apply the Perlin noise in screen space, using it as the noise texture directly.

You also likely don't need 10 octaves of noise as you're currently calculating in your turbulence function. In fact, just start with a single octave (a single Perlin noise sample) and add more octaves only if needed. You'll want a parameter to control the texture coordinate scale (frequency) used for the noise sample, as well.