Three js bump mapping

Question

I have created a simple scene in three js (r85). It contains a camera, a light and a plane geometry mesh. I have also created a renderertarget where I render the bumpmap texture of the plane with a ShaderMaterial. In the fragment shader the bump mapping uses a continuous function (so the bump mapping should be "smooth"):

varying vec2 vUV;

void main() {
    float x = sin(sqrt(vUV.x * vUV.x + vUV.y * vUV.y));
    gl_FragColor.rgb = vec3(x, x, x);
}

The code renders the following image (strange lines):

Some kind of strange lines appears when I use bump mapping with MeshPhongMaterial.

See jsfiddle here.

Can someone tell me what are those strange lines and how to avoid these? If I use a simple image for bump map (not a rendertarget) then the lines do not appear.

Thanks!

Answer 1

This is happening because with a length of 0-sqrt(2) or 0-1.41, you're utilizing a tiny portion of the period of a sin wave 0-2*PI or 0-6.283 - so the color depth of the texture is being stressed - you're getting a step of 1 bit every 50 pixels or whatever - it's the reason that radial gradients look like a series of rings when you're fading from say 0x000000 to 0x1a1a1a.

Check out a branch i made from it. I did a couple things like changing the magfilter to linear (nearest will always look pixelated), but mostly I just changed the period of the bump map so that it goes up and down a few times rather than just going up a tiny bit over the course of the texture.

Another thing to keep in mind is that bump maps always look gross on their own and turned up to 11. It's doing a tough task which is trying to fake a 3d surface in 2d space, and because it's a texture, it has a finite resolution, which on close inspection will look gross.