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

Question

我坚持使用Gouraud平滑阴影。我丢失了一些东西，需要帮助。

首先是关于漫射照明。为了获得漫射光，我使用以下公式：

Id * Kd * max（dot（N，L），0.0）

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

下一个阴影。 Gouraud阴影是每个顶点的阴影。 我在此lectures

中找到了Gouraud阴影算法

据我所知，该算法：

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

vec3 N = mat3(normalMatrix) * normals;

1. 将照明模型应用于每个顶点以 计算顶点强度

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

1. 线性插值顶点强度 表面多边形

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阴影不过是平均顶点法线而已，通常这是网格导入器/导出器/转换器的一部分，您可以手动进行，但是如果未对网格进行索引，则需要先对其重新索引才能找到共享顶点，然后对它们之间的法线取平均。现在，您似乎呈现了一个未索引的网格，其中每个顶点相对于一个面都是唯一的。

  

可以为每个顶点指定多边形3D模型中每个顶点的表面法线的估计值，也可以通过平均在每个顶点处相交的多边形的表面法线来找到估计值。

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