我正在尝试学习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着色效果显示月亮。有人可以帮助我吗？
答案 0 :(得分：1)
错误消息是明确的：您尝试将vec3乘以vec4，这完全没有任何意义。它还告诉您错误位于着色器的第49行：
gl_FragColor = vec4(textureColor.rgb * finalColor, textureColor.a);
// ^ finalColor is a vec4!
你可能想在这里找finalColor.rgb。