我正在尝试在 webgl 中实现平面着色,
我知道顶点着色器中的
varying
关键字会插值该值并将其传递给片段着色器。
我正在尝试禁用插值,我发现
flat
关键字可以做到这一点,但它似乎不能在webgl中使用?
flat varying vec4 fragColor;
总是出现错误:
Illegal use of reserved word 'flat'
查看 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
我认为 WebGL 中使用的 GLSL 版本不支持“平面”。如果您想要平面阴影,有多种选择:
1) 在每个顶点复制多边形的法线。这是最简单的解决方案,但是我觉得复制数据有点不太令人满意。
2) 在顶点着色器中,在视图坐标中变换顶点,并在片段着色器中,使用计算导数的 dFdx() 和 dFdy() 函数计算法线。这些功能都由GL_OES_standard_derivatives扩展支持(使用前需要检查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)。
另请参阅此问题的答案: 如何在立方体上获得平坦的法线
我的实现可以在这里找到: http://alice.loria.fr/software/geogram/doc/html/index.html
一些在线 web-GL 演示在这里(使用 emscripten 从 C++ 转换为 JavaScript): http://homepages.loria.fr/BLevy/GEOGRAM/