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.
- 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.