Phong Shader：固定光高光组件随相机旋转

Question

我为 WebGL 编写了一个 Phong 着色器。我的场景支持使用欧拉角的相机旋转。灯光应该固定在场景中。一旦我旋转相机，物体上的镜面反射效果也会移动。平移似乎对镜面反射分量也有奇怪的影响。我（希望如此）确保计算是在眼睛 space 中进行的。我首先想知道我的着色器是否正确。

这是我的代码：

顶点着色器

struct Light {
  vec3 position;

  /* ... */
};

uniform Light u_light;
uniform mat4 u_modelViewProjMat;
uniform mat4 u_modelViewMat;
uniform mat4 u_viewMat;
uniform mat3 u_normalMat;

in vec3 a_position;
in vec3 a_normal;
in vec2 a_texCoord;

out vec2 v_texCoord;
out vec3 v_normal;
out vec3 f_position;
out vec3 v_lightPos;

void main() {
  v_normal = u_normalMat * a_normal;
  v_texCoord = a_texCoord;
  f_position = vec3(u_modelViewMat * vec4(a_position, 1.0));
  v_lightPos = vec3(u_viewMat * vec4(u_light.position, 1.0));
  gl_Position = u_modelViewProjMat * vec4(a_position, 1.0);
}

片段着色器

struct Material {
  sampler2D diffuse;
  vec3 specular;
  float shininess;
};

struct Light {
    /* ... */
    vec3 ambient;
    vec3 diffuse;
    vec3 specular;
};

uniform Material u_material;
uniform Light u_light;
uniform vec3 u_eyePosition;

in vec2 v_texCoord;
in vec3 v_normal;
in vec3 f_position;
in vec3 v_lightPos;

out vec4 outColor;

void main() {
  vec3 texture = vec3(texture(u_material.diffuse, v_texCoord));

  // ambient
  vec3 ambient = u_light.ambient * texture;

  // diffuse
  vec3 normal = normalize(v_normal);
  vec3 lightDir = normalize(v_lightPos - f_position);
  float diff = max(dot(normal, lightDir), 0.0);
  vec3 diffuse = u_light.diffuse * diff * texture;

  // specular
  vec3 viewDir = normalize(u_eyePosition - f_position);
  vec3 reflectDir = reflect(-lightDir, normal);
  float spec = pow(max(dot(viewDir, reflectDir), 0.0), u_material.shininess);
  vec3 specular = u_light.specular * (spec * u_material.specular);

  outColor = vec4((ambient + diffuse + specular), 1.0);
}

Answer 1

f_position 是相机 space 位置，因此要为镜面反射分量获取 viewDir 矢量，您应该只执行 vec3 viewDir = normalize(-f_position); 或使用世界 space坐标

Phong Shader：固定光高光组件随相机旋转

Phong Shader: Fixed light specular component rotates with camera

shader

light

webgl

phong