Chris 2pha Brown. Drupal developer Brisbane Australia

Chris Brown

Drupal, Javascript, Three.js, 3D

website blog
image for Three.js car paint shader - recreating the Radeon 9700 demo

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

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.

Stage 1 - Multi tone car paint without environment or flakes

Original New

Stage 2 - Environment only

Original New

Stage 3 - Multi tone car paint with environment

Original New

Stage 4 - Car paint flake effect

Original New

Full - Multi tone car paint with environment and flake effect

Original New

Add a comment

<b>, <i> and <code> tags are allowed.