Three.js car paint shader - recreating the Radeon 9700 demo

June 25, 2015

Recently while experimenting with three.js shader materials I stumbled across RenderMonkey. It is old software that is no longer supported and the description on the website says: "RenderMonkey is a rich shader development environment for both programmers and artists that facilitates the collaborative creation of real-time shader effects."

As I was going through the different shader examples that RenderMonkey comes with, I noticed a car paint shader which I remember was a demo when ATI released the Radeon 9700 back in 2002 (I actually had one of these video cards and the demo can be seen here). As I have an interest in creating cars in Three.js, I thought it would be a good exercise to try to recreate the demo with a shader in Three.js.

Notes:

I did not use the original model, I used a model available here as it was free and included a normal map which the original RenderMonkey shader used.
I computed normals form the normal map the same way as the PhongMaterial in three.js rather than the way it was done in the original shader.
The normal is quite rough, turn the normalScale down to see the effect with a more smooth surface.
I used a different environment map with a brightly lit floor so the reflections will look different. You can turn on the cube map with the controls on the right.
I am in no way a GLSL expert, I am barely even a novice and have pathetic math skills so there are probably better ways to do it or there may be errors. It was really just a learning experience for me that I thought I would share.
I really hate writing long blog posts so wont be explaining anything here, just look at the code.