Posted by: pixelero | May 12, 2011

Pixel Bender: Metallic

Just like the name tells you, this shader is all about getting a metallic effect on an image, that’s just so back to 90’s effect.

Click on above image to go to the demo.

Generally this effect is at its best with graphics like text elements or on the World Map used as a default. Technically the filter first creates a normal map based on brightness values, the sample sizes are 3×3, 5×5 and 7×7 – smallest works best with very detailed images, largest for text elements. Secondly a phong-like shading is applied to that.

The shader takes two bitmap inputs:
instead of having a number of different parameters for the material appearance, I’m using a small bitmap stripe as a checkup table for the shading:
so that if current point is found in a complete shadow, the stripe is sampled from left edge, if on highlight, the right edge, and otherwise somewhere horizontally along the image.
Here are the bitmaps for some materials in demo:

View the sources here. Download sources.
The demo also allows to add a special effect on the background — making it look like grainy, wavy or bumpy — on images with alpha channel.
That’s not a PB-effect, it was created in actionscript by adding noise or perlinnoise on the back.
It just looks so nicely realistic like a metal sheet really was sandblasted or hammered.


  1. cool! you should play with this stuff in PB3D – illumination in hardware accelerated flash is a lot of fun =) (need fp11)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: