Question

我正在将一个WebGL项目移植到Three.js。事实上，我对Shader和Custom 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

快速浏览一下，它看起来像是某种Phong灯光着色器。由于您正在转向Three.js，因此可能值得尝试其内置功能。即创建灯光（可能是THREE.PointLight或THREE.DirectionalLight），将其添加到场景中并使用THREE.MeshPhongMaterial作为对象。

Answer 2

这是你的顶点着色器：

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

片段着色器可以保持相同

这是你的着色材料定义：

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

2 个答案: