在我的着色器中phong shading (over texture)实现错误

Question

我正在尝试学习webGL，试图在链接http://voxelent.com/html/beginners-guide/chapter_3/ch3_Sphere_Phong.html上实现以下示例代码中的phong着色

我在着色器编译上得到两个错误，因此没有显示月亮，这应该显示为我遵循GitHUB的第11课，他们从矩形中制作球体，我得到的错误是:

ERROR: 0:49: '*' :  wrong operand types  no operation '*' exists that takes a left-hand operand of type 'mediump 3-component vector of float' and a right operand of type 'mediump 4-component vector of float' (or there is no acceptable conversion)

完整的代码是:

<script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        uniform sampler2D uSampler;
        uniform float uShininess;        //shininess
        uniform vec3 uLightDirection;  //light direction
        uniform vec4 uLightAmbient;      //light ambient property
        uniform vec4 uLightDiffuse;      //light diffuse property
        uniform vec4 uLightSpecular;     //light specular property
        uniform vec4 uMaterialAmbient;  //object ambient property
        uniform vec4 uMaterialDiffuse;   //object diffuse property
        uniform vec4 uMaterialSpecular;  //object specular property
        varying vec3 vNormal;
        varying vec3 vEyeVec;
        void main(void) 
        {
          vec3 L = normalize(uLightDirection);
        vec3 N = normalize(vNormal);
        //Lambert's cosine law
        float lambertTerm = dot(N,-L);
        //Ambient Term
        vec4 Ia = uLightAmbient * uMaterialAmbient;
        //Diffuse Term
        vec4 Id = vec4(0.0,0.0,0.0,1.0);
        //Specular Term
        vec4 Is = vec4(0.0,0.0,0.0,1.0);
        if(lambertTerm > 0.0) //only if lambertTerm is positive
        {
              Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; //add diffuse term
              vec3 E = normalize(vEyeVec);
              vec3 R = reflect(L, N);
              float specular = pow( max(dot(R, E), 0.0), uShininess);
              Is = uLightSpecular * uMaterialSpecular * specular; //add specular term
        }
        //Final color
           vec4 finalColor =Ia + Id + Is;
           finalColor.a = 1.0;
           vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
           gl_FragColor = vec4(textureColor.rgb * finalColor, textureColor.a);
        }
    </script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec3 aVertexNormal;
        attribute vec2 aTextureCoord;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;
        uniform vec3 uAmbientColor;
        uniform vec3 uLightingDirection;
        uniform vec3 uDirectionalColor;
        uniform bool uUseLighting;
        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        varying vec3 vNormal;
        varying vec3 vEyeVec;
        void main(void) 
        {
        //Transformed vertex position
        vec4 vertex= uMVMatrix * vec4(aVertexPosition, 1.0);
        //Transformed normal position
        vNormal   = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
        //Vector Eye
        vEyeVec = -vec3(vertex.xyz);
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;       
        }
    </script>   

EDIT2:

  <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        uniform sampler2D uSampler;
        uniform float uShininess;        //shininess
        uniform vec3 uLightDirection;  //light direction
        uniform vec4 uLightAmbient;      //light ambient property
        uniform vec4 uLightDiffuse;      //light diffuse property
        uniform vec4 uLightSpecular;     //light specular property
        uniform vec4 uMaterialAmbient;  //object ambient property
        uniform vec4 uMaterialDiffuse;   //object diffuse property
        uniform vec4 uMaterialSpecular;  //object specular property
        varying vec3 vNormal;
        varying vec3 vEyeVec;
        void main(void)
        {
        vec3 L = normalize(uLightDirection);
        vec3 N = normalize(vNormal);
        //Lambert's cosine law
        float lambertTerm = dot(N,-L);
        //Ambient Term
        vec4 Ia = uLightAmbient * uMaterialAmbient;
        //Diffuse Term
        vec4 Id = vec4(0.0,0.0,0.0,1.0);
        //Specular Term
        vec4 Is = vec4(0.0,0.0,0.0,1.0);
        if(lambertTerm > 0.0) //only if lambertTerm is positive
        {
        Id = uLightDiffuse * uMaterialDiffuse * lambertTerm; //add diffuse term
        vec3 E = normalize(vEyeVec);
        vec3 R = reflect(L, N);
        float specular = pow( max(dot(R, E), 0.0), uShininess);
        Is = uLightSpecular * uMaterialSpecular * specular; //add specular term
        }
        //Final color
        vec4 finalColor =Ia + Id + Is;
        finalColor.a = 1.0;
        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = vec4(textureColor.rgb, textureColor.a)+finalColor;
        }
    </script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec3 aVertexNormal;
        attribute vec2 aTextureCoord;
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
        uniform mat3 uNMatrix;
        uniform vec3 uAmbientColor;
        uniform vec3 uLightingDirection;
        uniform vec3 uDirectionalColor;
        uniform bool uUseLighting;
        varying vec2 vTextureCoord;
        varying vec3 vLightWeighting;
        varying vec3 vNormal;
        varying vec3 vEyeVec;
        void main(void)
        {
        //Transformed vertex position
        vec4 vertex= uMVMatrix * vec4(aVertexPosition, 1.0);
        //Transformed normal position
        vNormal   = vec3(uNMatrix * vec3(aVertexNormal));
        //Vector Eye
        vEyeVec = -vec3(vertex.xyz);
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;
        }
    </script>   

如何显示月亮与phong阴影效果。

Answer 1

错误消息是明确的:您试图将vec3乘以vec4，这显然根本没有意义。它还告诉你错误在着色器的第49行:

gl_FragColor = vec4(textureColor.rgb * finalColor, textureColor.a);
//                                     ^ finalColor is a vec4!

你可能想在这里使用finalColor.rgb