webGL中的平面着色

时间:2016-10-18 06:28:29

标签: glsl webgl

我正在尝试在webgl中实现平面着色,
我知道顶点着色器中的varying关键字将插值该值并将其传递给片段着色器。

我正在尝试禁用插值,我发现flat关键字可以执行此操作,但似乎无法在webgl中使用?

flat varying vec4 fragColor;

始终收到错误:Illegal use of reserved word 'flat'

2 个答案:

答案 0 :(得分:4)

我认为' flat' 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)。

另见这个问题的答案: How to get flat normals on a cube

我的实施可在此处获得: http://alice.loria.fr/software/geogram/doc/html/index.html

这里有一些在线web-GL演示(使用emscripten从C ++转换为JavaScript): http://homepages.loria.fr/BLevy/GEOGRAM/

答案 1 :(得分:1)

检查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