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 · Accepted Answer · 2012-10-31 11:36:01Z

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:

Tapio · Accepted Answer · 2012-10-31 08:33:50Z

0

At a quick glance, it looks like that's some kind of Phong lighting shader. Since you are moving to Three.js, it might be worth trying its built-in functionalities for this. I.e. create a light (probably THREE.PointLight or THREE.DirectionalLight), add it to the scene and use THREE.MeshPhongMaterial for your objects.

answered Oct 31, 2012 at 8:33

Tapio

3,4561 gold badge23 silver badges20 bronze badges

3 Comments

huydq5000 Over a year ago

I already use a Phong with PointLight but the result is different, that's why I want to use ShaderMaterial in this case.

Tapio Over a year ago

@user1787866 - Did it look broken or are you looking for pixel perfection with the previous solution? Did you set the specular coeff (25.0) and light position correctly and tried different light types? IMHO it might be worth experimenting a bit with those and other params before using a custom solution, as built-in shaders keep the code tidy and also have a good change to e.g. work around weird driver specific bugs since they are tested more. You could also post screenshots of before and after three.js and the new code you tried (or better yet, a demo) for error spotting.

huydq5000 Over a year ago

Thank you Tapio. I just don't understand the shader and how it works. That's why I have to post it here to get the helps. I have tried the many kind of light but without the specular coeff. I'll try it again tomorrow when I back to work ;)

Collectives™ on Stack Overflow

Three.js-Porting this custom shader

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related