Three.js-Porting this custom shader

Question

I'm porting a WebGL project to Three.js. In fact, I'm not very familiar with Shader and Custom Shader, that why I could not use this shader. Please help me to use this in Three.js.

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 color;

    void main(void) {
        gl_FragColor = vec4(color.xyz,1);
    } 
</script>

<script id="shader-vs" type="x-shader/x-vertex">        
    attribute vec4 vertex;      
    attribute vec3 normal;              
    uniform mat4 matrix;
    uniform vec3 diffuse_color;
    uniform mat3 matrixIT;
    varying vec4 color;     

    vec3 SpecularColor = vec3(1.0,1.0,1.0);
    void main(void) {
        vec3 toLight = normalize(vec3(0.0,1.0,1.0));
        vec3 normal_cal = normalize(matrixIT*normal);       
        float NDotL = max(dot(normal_cal, toLight), 0.0);
        vec3 eyeDir = vec3(1.0,1.0,1.0);
        float NDotH = 0.0;
        vec3 SpecularLight = vec3(0.0,0.0,0.0);
        if(NDotL > 0.0)
        {
            vec3 halfVector = normalize( toLight + eyeDir);
            float NDotH = max(dot(normal_cal, halfVector), 0.0);
            float specular = pow(NDotH,25.0);
            SpecularLight = specular * SpecularColor;
        }
        color = vec4((NDotL * diffuse_color.xyz) + (SpecularLight.xyz ), 0.5);
        gl_Position = matrix * vertex;
    }
</script>

Gero3 Gero3 · Accepted Answer · 2012-10-31T11:36:01

This is your vertexShader:

    uniform vec3 diffuse_color;
    varying vec4 color;     

    vec3 SpecularColor = vec3(1.0,1.0,1.0);
    void main(void) {
        vec3 toLight = normalize(vec3(0.0,1.0,1.0));
        //vec3 normal_cal = normalize(matrixIT*normal);
        vec3 normal_cal = normalMatrix * normal;
        float NDotL = max(dot(normal_cal, toLight), 0.0);
        vec3 eyeDir = vec3(1.0,1.0,1.0);
        float NDotH = 0.0;
        vec3 SpecularLight = vec3(0.0,0.0,0.0);
        if(NDotL > 0.0)
        {
            vec3 halfVector = normalize( toLight + eyeDir);
            float NDotH = max(dot(normal_cal, halfVector), 0.0);
            float specular = pow(NDotH,25.0);
            SpecularLight = specular * SpecularColor;
        }
        color = vec4((NDotL * diffuse_color.xyz) + (SpecularLight.xyz ), 0.5);
        //gl_Position = matrix * vertex;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
    }

fragement shader can be kept the same

and this is your shadermaterial definition:

Three.js-Porting this custom shader

2 Answers