Ошибки в реализации затенения по фонгу (по текстуре) в моих шейдерах
Я пытаюсь изучить webGL, попытался реализовать затенение по Фонгу, следуя этому примеру кода по ссылке http://voxelent.com/html/beginners-guide/chapter_3/ch3_Sphere_Phong.html
Я получаю две ошибки при компиляции шейдеров, и, следовательно, не отображается луна, которая должна отображаться, поскольку я следую Уроку 11 из GitHUB, где они создают сферу из прямоугольников, ошибки, которые я получил:
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>
Как отобразить луну с эффектами затенения фонг. Может ли кто-нибудь помочь мне?
1 ответ
Сообщение об ошибке однозначно: вы пытаетесь умножить vec3 по vec4что, конечно, не имеет никакого смысла. Это также говорит вам, что ошибка находится в строке 49 шейдера:
gl_FragColor = vec4(textureColor.rgb * finalColor, textureColor.a);
// ^ finalColor is a vec4!
Вы, вероятно, хотели использовать finalColor.rgb Вот.