Three.js-移植这个自定义着色器

Question

我正在将一个 WebGL 项目移植到 Three.js。事实上，我对Shader和Custom Shader不是很熟悉，所以我不能使用这个shader。请帮我在 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>

Answer 1

这是你的顶点着色器：

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

片段着色器可以保持不变

这是你的着色器材质定义：

Answer 2

乍一看，它看起来像是某种 Phong 光照着色器。由于您要迁移到 Three.js，因此可能值得尝试其内置功能。 IE。创建一个灯光（可能是THREE.PointLight 或THREE.DirectionalLight），将其添加到场景中并为您的对象使用THREE.MeshPhongMaterial。