如何在 WebGl 中使用漫射照明进行 Gouraud 着色？

Question

我坚持实施 Gouraud 平滑着色。我遗漏了一些东西，我需要帮助。

首先是漫射照明。为了获得漫射光，我使用了这个公式：

Id * Kd * max( dot(N,L), 0.0)

我应该得到我的漫反射颜色，我会将它添加到我的环境颜色中。

下一个着色。 Gouraud 着色是逐顶点着色。我在这个 lectures

中找到了 Gouraud 着色算法

据我了解这个算法：

确定每个多边形顶点的法线

vec3 N = mat3(normalMatrix) * normals;

对每个顶点应用光照模型计算顶点强度

float labertian = max(dot(N, L), 0.0);
vec4 color = vec4(intensityAmbientColor * ambientColor
                 + intensityDiffuseColor * diffuseColor * labertian, 1.0);

对顶点强度进行线性插值表面多边形

v_color = color;

这是输出图像

我在这里错过了什么？顶点着色器：

attribute vec3 coordinates;
attribute vec3 normals;

/** MVP */
uniform mat4 modelMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 normalMatrix;
// uniform mat4 viewModelMatrixl

/** LIGHT */
uniform vec3 ambientColor;
uniform float intensityAmbientColor;

uniform vec3 diffuseColor;
uniform float intensityDiffuseColor;

uniform vec3 cameraCoordinates;
uniform vec3 lightCoordinates;

varying vec4 v_color;

void main() {

  gl_Position = projectionMatrix *
    viewMatrix *
    modelMatrix *
    vec4(coordinates, 1.0);

  vec3 surfaceWorldPosition = (
    viewMatrix
    * modelMatrix
    * vec4(coordinates, 1.0)
  ).xyz;

  vec3 L = lightCoordinates - surfaceWorldPosition;
  vec3 V = cameraCoordinates - surfaceWorldPosition;
  vec3 N = mat3(normalMatrix) * normals;

  float labertian = max(dot(N, L), 0.0);
  v_color = vec4(intensityAmbientColor * ambientColor
                 + intensityDiffuseColor * diffuseColor * labertian, 1.0);
}

片段着色器：

precision mediump float;

varying vec4 v_color;

void main() {
  gl_FragColor = v_color;
}

Answer 1

Gouraud 着色只不过是对顶点法线进行平均，通常这是网格的一部分 importers/exporters/converters，您可以手动执行此操作，但是如果您的网格未编入索引，则需要先重新编入索引找到共享顶点，然后对它们之间的法线进行平均。现在您似乎渲染了一个未索引的网格，其中每个顶点相对于 one 面都是唯一的。

An estimate to the surface normal of each vertex in a polygonal 3D model is either specified for each vertex or found by averaging the surface normals of the polygons that meet at each vertex.

https://en.wikipedia.org/wiki/Gouraud_shading

如何在 WebGl 中使用漫射照明进行 Gouraud 着色？

How to Gouraud shading with diffuse lighting in WebGl?

javascript

opengl

glsl

webgl

shading