Glsl webGL中的平面着色

我正在尝试在webgl中实现平面着色，
我知道顶点着色器中的

variable

关键字将插值该值并将其传递给片段着色器

我试图禁用插值，我发现

flat

关键字可以做到这一点，但它似乎不能在webgl中使用

平变vec4色；

---

总是出现错误：

非法使用保留字“flat”

我认为WebGL中使用的GLSL版本不支持“flat”。如果需要平面着色，有几个选项：

1） 在每个顶点中复制多边形的法线。这是最简单的解决方案，但我发现复制数据有点不令人满意

2） 在顶点着色器中，在视图坐标中变换顶点，在片段着色器中，使用计算导数的dFdx（）和dFdy（）函数计算法线。这些功能由扩展GL_OES_standard_衍生工具支持（在使用之前，您需要检查GPU是否支持），大多数GPU（包括智能手机中的GPU）都支持该扩展

我的顶点着色器如下所示：

struct VSUniformState {              
    mat4 modelviewprojection_matrix; 
    mat4 modelview_matrix;           
};

uniform VSUniformState GLUP_VS;     

attribute vec4 vertex_in;
varying vec3 vertex_view_space;

    void main() {                                         
         vertex_view_space = (GLUP_VS.modelview_matrix * vertex_in).xyz;  
         gl_Position = GLUP_VS.modelviewprojection_matrix * vertex_in;  
    }          

在关联的片段着色器中：

#extension GL_OES_standard_derivatives : enable

varying vec3 vertex_view_space;
...
   vec3 U = dFdx(vertex_view_space);                     
   vec3 V = dFdy(vertex_view_space);                 
   N = normalize(cross(U,V));
   ... do the lighting with N    

我喜欢这个解决方案，因为它使设置代码更简单。缺点可能是它为片段着色器提供了更多的工作（但对于今天的GPU来说，这应该不是问题）。如果性能是一个问题，那么衡量它可能是一个好主意

3） 另一种可能是使用几何体着色器（如果支持）来计算法线。一般来说，速度较慢（但同样，衡量性能可能是个好主意，这可能取决于特定的GPU）

另见对该问题的回答：

我的实现可在以下位置获得：

一些在线Web GL演示程序（这里使用EnScript）从C++转换成JavaScript。

---

查看webGL 2。支持平面着色。 对于顶点着色器：

#version 300 es
in vec4 vPos; //vertex position from application
flat out vec4 vClr;//color sent to fragment shader
void main(){
    gl_Position = vPos;
    vClr = gl_Position;//for now just using the position as color
}//end main

对于片段着色器

#version 300 es
precision mediump float;
flat in vec4 vClr;
out vec4 fragColor;
void main(){
    fragColor = vClr;
}//end main

---

谢谢，通过使用dFdx/dFdy函数，我终于得到了曲面法线~！但在webGL中，dFdx/dFdy处于扩展中，因此需要首先声明它。modelview*位置不是剪辑空间，而是视图空间