Lately when using Three.js I have needed some very specific material qualities that the built in Three.js materials did not allow for so I have started experimenting with the Three.ShaderMaterial . This material allows you to write you own GLSL shaders for Three.js. My hope is that I can get a good understanding of GLSL and implement some of my own shaders and materials in Three.js even with my limited math skills and no prior experience with GLSL.
On this page I will link to some of my own Three.ShaderMaterial experiments and try to update it as I learn more.
You may also want to take a look at my implementation of a three.js car paint shader (a recreartion of the Radeon 9700 demo).
NOTE: these examples are using R70 of THREE.js and material implementation seems to have changed a bit since the R70 release, so some of these may not work on the current release of THREE.jsCustom Mesh Shader Materials
On most of my experiments there are buttons under "Source" to view both the vertex shader source and the fragment shader source.
- Basic color
basic color shader
This is the most basic of shaders, simple applying a color via the fragment shader.
- Vertex position color
Vertex position color shader
Takes the fragment color from the vertex position. Simple experiment trying to understand how to send varyings from the vertex shader to the fragment shader
- Uv position color
Uv position color shader
Takes the fragment color from the uv position. Again trying to understand how to send varyings from the vertex shader to the fragment shader ...