javascript - 如何在WebGl中使用散射光对Gouraud进行着色？

我坚持实施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;
}

最佳答案

Gouraud底纹不过是平均顶点法线而已，通常这是网格导入器/导出器/转换器的一部分，您可以手动进行，但是，如果未对网格进行索引，则需要先对其重新索引才能找到共享的顶点，然后平均他们的法线。现在，您似乎正在渲染一个未索引网格，其中每个顶点相对于一个面都是唯一的。


  为每个顶点指定多边形3D模型中每个顶点的表面法线的估计，或者通过对在每个顶点处会合的多边形的表面法线进行平均来找到估计值。


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