"Brushed" reflective metal texture.

[npage85]

I have a reflective cube and an object that is aluminum that reflects it using this material:

THREE.MeshLambertMaterial( { color: 0xffffff, ambient: 0xaaaaaa, envMap: reflectionCube, shading: THREE.FlatShading } )

However, I would like to add to this object a bump map so that the reflection isn't so smooth. What I want to do is use a small square JPG of white noise to make the aluminum have a "grain" to it so that has more of a reflective brushed metal look.

I've been scouring the examples and articles all day, and the best I could find was:
http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap.html

However, this example uses a lot more than just a bump map, and all efforts to use that code and simple replace the files used for the bump mapping with my white noise JPG cause the texture to be completely invisible.

I can't, for the life of me, find a simple example of a brushed reflective metal texture anywhere... not even something close.

Any help would be greatly appreciated.

[alteredq]

You may get some interesting metal look with normal maps but it's not going to look much like brushed metal:

http://alteredqualia.com/three/examples/webgl_shader_gold.html

For brushed metal look you would need anisotropic shader. Something like @rdad did here:

http://whiteflashwhitehit.com/2011/02/26/the-wobble-dance-anisotropic-glsl-shader/

Also, for normal map shader you'll need to convert first your grayscale heighmap into blueish normal map, either:

• in some external tool (there are plugins for PhotoShop / Gimp, see height map to mormal map #427),
• with ImageUtils.generateNormalMap (https://github.com/mrdoob/three.js/blob/master/src/extras/ImageUtils.js#L48) or - with shader (https://github.com/mrdoob/three.js/blob/master/examples/js/ShaderExtras.js#L1336).

[npage85]

So... I used those links to generate a true normal map image, and have modified the simple floating cube example to use a ShaderMaterial for each face of the cube with the normal map that I generated.

However, the cube doesn't show up.

Here is a link to the code, with all Javascript in-page (don't pay attention to the "canvas" part of the URL, I did indeed switch it to WebGLRenderer):
http://v2.pagesactive.com/examples/canvas_geometry_cube.html

Here is a link to the normal map image I am using:
http://v2.pagesactive.com/examples/white-noise-normal.png

As far as I can tell, everything is set up according to how it is in the examples, yet I can't get the cube to show up. The same thing happens when I try to apply the material to the actual models I'm using, so I decided to go to a stupid-simple example and apply the ShaderMaterial there.

I know it is something incredibly stupid, but I've been banging my head against my desk for a few days now trying to figure this out. I have a legit normal map now, so that can't be it.

If you know what the problem is with that code, I'd greatly appreciate the insight.

[alteredq]

It seems ok for me, I can see the cube and it appears to have some sort of normal map.

Maybe there is some problem with your GPU?

[npage85]

Haha... I went on to the three.js IRC channel and someone helped me out. ;)

It came down to using the command cube.geometry.computeTangents(); before I added the cube to the scene.

I did notice, however, that the normal map doesn't actually modify the geometry at all. Rather than the cube getting bumps on it, it just "appears" to have bumps on it, unlike http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap.html

That normal map make actually adds bits that actually extrude from the model, whereas my cube is still perfectly smooth with the illusion of bumps.

Is there any way to get the same effect with my cube example?