I am looking to develop a simple, yet effective shader for my terrain mesh. This shader should utilize different diffuse and normal textures based on the color of the world map image, and should be able to receive shadows and interact with lighting.
The default phong shader seems to have numerous includes. Where can I locate and modify their code, or simply view it? How can I extract the phong shader code and generate a new THREE.ShaderMaterial?
I experimented with altering shaders using onBeforeCompile like so:
var material = new THREE.MeshPhongMaterial( {
map: grassTexture
} );
material.onBeforeCompile = function ( shader ) {
shader.fragmentShader = shader.fragmentShader.replace(
'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',
[
'gl_FragColor = vec4( 0.1, 0.1, 0.5, 1.0 );'
].join( '\n' )
);
console.log(shader.fragmentShader);
};
However, I also need to incorporate multiple textures into the shader. How can I adjust phong's uniforms to accommodate this requirement?