Custom phong shader

Question

I need to create a rather simple shader for my terrain mesh. Shader must use diffenet diffuse and normal textures depending on the color of the world map (image), must receive shadows and work with lights.

Default phong shader consists of many includes, where can I change or just look at their code? How can I copy phong shader code and create a new THREE.ShaderMaterial?

I already tried to modify shaders like this using onBeforeCompile:

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);
};

But I also need to load multiple textures to the shader, how can I change phong's uniforms?

Mugen87 Mugen87 · Accepted Answer · 2018-04-01T08:57:43

Please have a look at the following example:

https://threejs.org/examples/webgl_materials_modified.html

It shows how you can access the uniforms of a predefined material. If you want to add new uniforms, do it like this:

material.onBeforeCompile = function ( shader ) {

    shader.uniforms.time = { value: 0 };
    shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;

}

Custom phong shader

1 Answers