学习OpenGL ES for Android（二十四）— 几何着色器

女爷i 2023-07-11 06:13 19阅读 0赞

### 文章目录 ###

*  简介
 *   *  3.0变化
 *  几何着色器
 *   *  绘制点
     *  绘制线
     *  绘制房子
     *  爆破物体
     *  法向量可视化

在本章之前还有两章： [高级数据][Link 1]和 [高级GLSL][GLSL]，都是比较理论的知识，有兴趣的话可以自己学习。

# 简介 #

几何着色器(Geometry Shader)是一个可选功能，他介于在顶点和片段着色器之间，接收一组顶点数据，可以对数据进行处理，而且可以根据数据生成不止一个图形，假如你想绘制四个顶点，按照以前的方式，需要for循环四次，每次都顶点数据进行处理，最后传入顶点着色器中。而集合着色器就做了这样一件事。在移动平台上，几何着色器需要OpenGL ES 3.2版本（android 7之上），同样的我们可以先参考[文档][Link 2]或其他相关资料学习3.0新特性。

## 3.0变化 ##

这里简单学习一下3.0和2.0比较重要的变化

1.  attribute和varying，取而代之的是 in和out
2.  文件需要添加\#version 300 es (如果是3.2则是320，不加则默认2.0)
3.  还有纹理 texture2D和texture3D统统改为 texture
4.  内置函数gl\_FragColor和gl\_FragData删除，如果片段着色器要输出用out声明字段输出。不过保留了gl\_Position
5.  还有的是layout的作用：可以直接指定位置
    
        // opengl 2.0
        uniform  float intensity;
        // 代码 赋值
        GLES20.glUniform1f(GLES20.glGetAttribLocation(program, "intensity"), 1f)
    
        //opengl 3.0
        layout (location = 1) uniform  float intensity;
        //直接写上对应的layout的值就可以赋值
        GLES30.glUniform1f(1,1f)

# 几何着色器 #

## 绘制点 ##

先看一个几何着色器的例子

#version 320 es
    layout (points) in; // 输入
    layout (points, max_vertices = 4) out; //输出
    
    in VS_OUT {
        
        vec3 color;
    } gs_in[];
    
    out vec3 fColor;
    void build_point(vec4 position);
    
    void main() {
        
        build_point(gl_in[0].gl_Position);
    }
    
    void build_point(vec4 position){
        
        fColor = gs_in[0].color;
        gl_Position = position + vec4(-0.5, 0.5, 0.0, 0.0);// 1:左上角
        gl_PointSize = 20.0;
        EmitVertex();
        gl_Position = position + vec4(0.5, 0.5, 0.0, 0.0);// 2:右上角
        EmitVertex();
        gl_Position = position + vec4(-0.5, -0.5, 0.0, 0.0);// 3:左下角
        gl_PointSize = 10.0;
        EmitVertex();
        gl_Position = position + vec4(0.5, -0.5, 0.0, 0.0);// 4:右下角
        fColor = vec3(1.0, 1.0, 1.0);
        EmitVertex();
        EndPrimitive();
    }

这个几何着色器的作用是：输入一个顶点的数据，输出四个顶点显示在屏幕上；前两个点大小为20，后两个点大小为10；前三个点颜色为红色，最后一个是白色。

在几何着色器的顶部，我们需要声明从顶点着色器输入的类型。这需要在in关键字前声明一个布局修饰符(Layout Qualifier)。这个输入布局修饰符可以从顶点着色器接收下列任何一个值：

*  points：绘制GL\_POINTS（1）
 *  lines：绘制GL\_LINES或GL\_LINE\_STRIP时（2）
 *  lines\_adjacency：GL\_LINES\_ADJACENCY或GL\_LINE\_STRIP\_ADJACENCY（4）（3.0新增类型）
 *  triangles：GL\_TRIANGLES、GL\_TRIANGLE\_STRIP或GL\_TRIANGLE\_FAN（3）
 *  triangles\_adjacency：GL\_TRIANGLES\_ADJACENCY或GL\_TRIANGLE\_STRIP\_ADJACENCY（6）（3.0新增类型）

以上是能提供给glDrawArrays渲染函数的几乎所有图形了。如果我们想要将顶点绘制为GL\_GL\_POINTS，我们就要将输入修饰符设置为points。括号内的数字表示的是一个图形所包含的最小顶点数。

接下来，我们还需要指定几何着色器输出的类型，这需要在out关键字前面加一个布局修饰符。和输入布局修饰符一样，输出布局修饰符也可以接受几个值：

*  points
 *  line\_strip
 *  triangle\_strip

有了这3个输出修饰符，我们就可以使用输入数据创建几乎任意的形状了。要生成一个点的话，我们将输出定义为points，并输出max\_vertices个顶点，如果你生成的顶点数大于max\_vertices则不会显示。

下面是接口块（参考[高级GLSL][GLSL]）VS\_OUT的定义，用来接收顶点着色器中传来的数据（当然也可以定义变量来传递，但是用接口块更方便）。

接下来是使用传入的顶点数据，从3.0版本开始GLSL提供了一个内建(Built-in)变量，它的结构大概如下（参考[官方文档][Link 3]）

in gl_PerVertex {
    	highp vec4 gl_Position;
    	highp float gl_PointSize;
    } gl_in[];

可以通过gl\_in数组来取我们传入的顶点数据，例如传入两个顶点，根据索引取出数据即可（gl\_in\[0\]和gl\_in\[1\]）。

EmitVertex方法，指当前一个顶点已经设置完成，包括顶点位置，大小，颜色等等。  
EndPrimitive方法，指当前所有顶点这种完成，开始进行绘制。  
顶点着色器和片段着色器的代码比较简单，如下

// 顶点着色器用来传递顶点和颜色数据
    #version 320 es
    layout (location = 0) in vec2 aPos;
    layout (location = 1) in vec3 aColor;
    
    out VS_OUT {
        vec3 color;
    } vs_out;
    
    void main(){
        vs_out.color = aColor;
        gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0);
    }

// 片段着色器
    #version 320 es
    precision mediump float;
    
    out vec4 FragColor;
    
    in vec3 fColor;
    
    void main(){
        FragColor = vec4(fColor, 1.0);
    }

我们传入一个顶点屏幕中心(0,0），颜色传入红色，即可得到如下效果图  
![绘制点][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70]

## 绘制线 ##

我们可以通过对点处理生成线。这里我们传入四个顶点，

points = new float[]{
        
    	-0.5f, 0.5f, 1.0f, 0.0f, 0.0f, // 左上
    	0.5f, 0.5f, 0.0f, 1.0f, 0.0f, // 右上
    	0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 右下
    	-0.5f, -0.5f, 1.0f, 1.0f, 0.0f  // 左下
    };

然后修改几何着色器的代码，每个顶点生成两个点，左顶点x方向减0.1，右顶点x方向加0.1，把输出的类型改为line\_strip，最大值为0，代码如下

#version 320 es
    layout (points) in;
    layout (line_strip, max_vertices = 2) out;
    
    in VS_OUT {
        vec3 color;
    } gs_in[];
    
    out vec3 fColor;
    void build_line(vec4 position);
    
    void main() {
        build_line(gl_in[0].gl_Position);
    }
    
    void build_line(vec4 position){
        fColor = gs_in[0].color;
        gl_Position = gl_in[0].gl_Position + vec4(-0.1, 0.0, 0.0, 0.0); // 左顶点
        EmitVertex();
    
        gl_Position = gl_in[0].gl_Position + vec4( 0.1, 0.0, 0.0, 0.0); // 右顶点
        EmitVertex();
        EndPrimitive();
    }

可绘制出四条线，分别在屏幕的四个角，效果如下  
![绘制线][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 1]

## 绘制房子 ##

一个小房子的样子如下图，  
![房子][20200305165530800.png]  
因为几何着色器的三角形输出只有triangle\_strip（因为它更节省节点），我们根据传入的顶点分别生成从1到5五个顶点即可绘制成小房子的样式，输入的顶点坐标和绘制线的相同，我们只需要修改几何着色器的代码，输出类型改为triangle\_strip，数量为5。修改后的代码如下

#version 320 es
    layout (points) in;
    layout (triangle_strip, max_vertices = 5) out;
    
    in VS_OUT {
        vec3 color;
    } gs_in[];
    
    out vec3 fColor;
    void build_house(vec4 position);
    
    void main() {
        build_house(gl_in[0].gl_Position);
    }
    
    void build_house(vec4 position){
        fColor = gs_in[0].color;
        gl_Position = position + vec4(-0.2, -0.2, 0.0, 0.0);// 1:bottom-left
        EmitVertex();
        gl_Position = position + vec4(0.2, -0.2, 0.0, 0.0);// 2:bottom-right
        EmitVertex();
        gl_Position = position + vec4(-0.2, 0.2, 0.0, 0.0);// 3:top-left
        EmitVertex();
        gl_Position = position + vec4(0.2, 0.2, 0.0, 0.0);// 4:top-right
        EmitVertex();
        gl_Position = position + vec4(0.0, 0.4, 0.0, 0.0);// 5:top
        fColor = vec3(1.0, 1.0, 1.0);
        EmitVertex();
        EndPrimitive();
    }

效果图如下  
![房子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 2]

## 爆破物体 ##

物体的爆炸效果，在有些游戏中比较常见，比如当炮弹击中物体时，物体会破碎掉。这样一种效果用几何着色器是可以模拟的（当然效果比较粗糙），我们需要计算绘制的三角形的法向量，然后沿着法向量移动一小段距离，然后根据时间不断的移动或恢复。  
计算法向量的代码

vec3 GetNormal(){
        vec3 a = vec3(gl_in[0].gl_Position) - vec3(gl_in[1].gl_Position);
        vec3 b = vec3(gl_in[2].gl_Position) - vec3(gl_in[1].gl_Position);
        return normalize(cross(a, b));
    }

计算爆炸效果的代码

vec4 explode(vec4 position, vec3 normal){
        float magnitude = 2.0;
        vec3 direction = normal * ((sin(time) + 1.0) / 2.0) * magnitude;
        return position + vec4(direction, 0.0);
    }

最后是整个几何着色器的代码，

#version 320 es
    layout (triangles) in;
    layout (triangle_strip, max_vertices = 3) out;
    
    in VS_OUT {
        vec2 texCoords;
    } gs_in[];
    
    out vec2 TexCoords;
    
    uniform float time;
    
    vec4 explode(vec4 position, vec3 normal);
    vec3 GetNormal();
    
    vec4 explode(vec4 position, vec3 normal){
    ……
    }
    
    vec3 GetNormal(){
    ……
    }
    
    void main() {
        vec3 normal = GetNormal();
    
        gl_Position = explode(gl_in[0].gl_Position, normal);
        TexCoords = gs_in[0].texCoords;
        EmitVertex();
        gl_Position = explode(gl_in[1].gl_Position, normal);
        TexCoords = gs_in[1].texCoords;
        EmitVertex();
        gl_Position = explode(gl_in[2].gl_Position, normal);
        TexCoords = gs_in[2].texCoords;
        EmitVertex();
        EndPrimitive();
    }

找出我们之前的模型加载中加载纳米装的代码，传入顶点和纹理，运行代码即看到如下的效果，因为图片被压缩过效果不太好，可以下载源码来查看。  
![爆炸效果][20200306134212770.gif]

## 法向量可视化 ##

在学习光照效果时，处理法向量时可能出现错误，但是因为glsl无法调试，无法找到问题所在。这里我们可以利用几何着色器把法向量可视化，进行调试。  
法向量可视化需要先绘制物体，然后绘制法向量，还是以纳米装为例，绘制纳米装不再赘述，绘制法向量则只需要传入顶点和法向量即可，然后在几何着色器中进行处理，根据传入的顶点坐标和经过处理的法向量绘制一条线（每个三角形三条线），代码如下

#version 320 es
    layout (triangles) in;
    layout (line_strip, max_vertices = 6) out;
    
    in VS_OUT {
        vec3 normal;
    } gs_in[];
    
    const float MAGNITUDE = 0.2;
    void GenerateLine(int index);
    
    void GenerateLine(int index){
        gl_Position = gl_in[index].gl_Position;
        EmitVertex();
        gl_Position = gl_in[index].gl_Position + vec4(gs_in[index].normal, 0.0) * MAGNITUDE;
        EmitVertex();
        EndPrimitive();
    }
    
    void main(){
        GenerateLine(0); // 第一个顶点的法向量
        GenerateLine(1); // 第二个顶点的法向量
        GenerateLine(2); // 第三个顶点的法向量
    }

最后的效果图如下  
![法向量可视化][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 3]  
这样就能帮助我们来判断模型的法向量是否正确了，同样可以用来实现其他功能，例如毛发效果。

本章对应的[文档地址][Link 4]，可以参考进行理论学习。  
本章源码[地址][Link 5]

[Link 1]: https://learnopengl-cn.github.io/04%20Advanced%20OpenGL/07%20Advanced%20Data/
[GLSL]: https://learnopengl-cn.github.io/04%20Advanced%20OpenGL/08%20Advanced%20GLSL/
[Link 2]: https://www.khronos.org/registry/OpenGL/specs/es/3.2/GLSL_ES_Specification_3.20.html
[Link 3]: https://www.khronos.org/registry/OpenGL/extensions/OES/OES_geometry_shader.txt
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305163525481.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200305164813526.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[20200305165530800.png]: https://img-blog.csdnimg.cn/20200305165530800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200305170153492.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[20200306134212770.gif]: https://img-blog.csdnimg.cn/20200306134212770.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200306144049948.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2prbHdhbg==,size_16,color_FFFFFF,t_70
[Link 4]: https://learnopengl-cn.github.io/04%20Advanced%20OpenGL/09%20Geometry%20Shader
[Link 5]: https://github.com/jklwan/OpenGLProject/blob/master/sample/src/main/java/com/chends/opengl/renderer/advanced/opengl/GeometryShaderRenderer.java