如何使用在质心处计算的光来实现平面着色？

Question

我想编写一个 GLSL 着色器程序来进行逐面着色。我的第一次尝试使用带有激发顶点的flat 插值限定符。我对法线和位置顶点属性都使用平面插值，这给了我想要的纯色表面的老式效果。

虽然渲染看起来正确，但着色器程序实际上并没有做正确的工作：

1. 仍然基于每个片段（在片段着色器中）执行光照计算，
2. 位置向量取自激发顶点，而不是三角形的质心（对吗？）。

是否可以将照明方程一次应用于三角形的质心，然后将计算出的颜色值用于整个图元？该怎么做？

Answer 1

使用几何着色器，其输入为三角形，输出为三角形。从顶点着色器将法线和位置传递给它，自己计算质心（通过平均位置），然后进行照明，将输出颜色作为输出变量传递给片段着色器，它只是将其读入并写出。

Answer 2

另一种简单的方法是使用屏幕空间位置的导数在片段着色器中计算（屏幕空间）面法线。实现起来非常简单，甚至表现良好。

我已经写了一个例子here（需要支持WebGL的浏览器）：

顶点：

attribute vec3 vertex;

uniform mat4 _mvProj;
uniform mat4 _mv;

varying vec3 fragVertexEc;

void main(void) {
    gl_Position = _mvProj * vec4(vertex, 1.0);
    fragVertexEc = (_mv * vec4(vertex, 1.0)).xyz;
}

片段：

#ifdef GL_ES
precision highp float;
#endif

#extension GL_OES_standard_derivatives : enable

varying vec3 fragVertexEc;

const vec3 lightPosEc = vec3(0,0,10);
const vec3 lightColor = vec3(1.0,1.0,1.0);

void main()
{
    vec3 X = dFdx(fragVertexEc);
    vec3 Y = dFdy(fragVertexEc);
    vec3 normal=normalize(cross(X,Y));

    vec3 lightDirection = normalize(lightPosEc - fragVertexEc);

    float light = max(0.0, dot(lightDirection, normal));

    gl_FragColor = vec4(normal, 1.0);
    gl_FragColor = vec4(lightColor * light, 1.0);
}