CSharpGL(14)用geometry shader渲染模型的法线(normal)

+BIT祝威+悄悄在此留下版了个权的信息说：

CSharpGL(14)用geometry shader渲染模型的法线(normal)

+BIT祝威+悄悄在此留下版了个权的信息说：

2016-08-13

由于CSharpGL一直在更新，现在这个教程已经不适用最新的代码了。CSharpGL源码中包含10多个独立的Demo，更适合入门参考。

为了尽可能提升渲染效率，CSharpGL是面向Shader的，因此稍有难度。

问题

在处理光照效果等问题时，模型的顶点的法线是必不可少的数据。但是法线并不直接显示在模型上，也没有别的办法可以直观地看到。如果法线计算错了，那是非常难以排查的。所以我就想用geometry shader来渲染出模型的法线。如下图的白色针状部分，就是这个teapot的法线。为了便于区分，针尖部分是顶点位置，较粗的针头部分则是法线的方向。从这个图中可以看到，我做的这个teapot的法线是很有问题的。怪不得之前拿它试验光照效果时会有一些诡异的现象。

+BIT祝威+悄悄在此留下版了个权的信息说：

下载

这个示例是CSharpGL的一部分，CSharpGL已在GitHub开源，欢迎对OpenGL有兴趣的同学加入（https://github.com/bitzhuwei/CSharpGL）

+BIT祝威+悄悄在此留下版了个权的信息说：

原理

Geometry shader的执行，在vertex shader之后，在fragment shader之前。Geometry shader的输入数据是一个primitive（points、lines、triangles等），输出可以是0或多个primitive（points、line_strip或triangle_strip）。Geometry shader的作用，就是能增加新的图元。本篇就利用这个功能，将模型顶点的法线作为新增的图元渲染出来。

+BIT祝威+悄悄在此留下版了个权的信息说：

Geometry shader

Geometry shader代码如下，含义参考注释即可。如果要用此shader，最好删掉中文注释。因为有的显卡可能不支持中文，会造成无法编译通过的情况。

#version 410 core

//输入类型为三角形
layout (triangles) in;
//输出的是三角形带
layout (triangle_strip, max_vertices = 11) out;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;

uniform float normalLength = 0.5f;

in VS_GS_VERTEX
{
    vec3 normal;
} vertex_in[];

out GS_FS_VERTEX
{
    vec3 color;
} vertex_out;

void main(void)
{
    int i;
    //先输出模型本身
    for (i = 0; i < gl_in.length(); i++) {
        vertex_out.color = vertex_in[i].normal;
        vec4 position = gl_in[i].gl_Position;
        gl_Position = projectionMatrix * viewMatrix * (modelMatrix * position);
        EmitVertex();
    }
    EndPrimitive();

    //生成顶点的法线（一个法线用一个三棱柱表示）
    for (i = 0; i < gl_in.length(); i++) {//我的理解：此处gl_in.length()为3
        //法线颜色为白色
        vertex_out.color = vec3(1, 1, 1);

         //获取模型的顶点位置（针尖）
        vec4 position = gl_in[i].gl_Position;
        //获取模型的法线（针头）位置
        vec4 target = position + vertex_in[i].normal * normalLength;
        {
            vec4 v0 = position;
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v0);
            EmitVertex();//生成一个三棱柱顶点

            vec4 v1 = target;
            if (target.x > position.x) { v1.x += normalLength / 30.0f; }
            else { v1.x -= normalLength / 10.0f; }
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v1);
            EmitVertex();//生成一个三棱柱顶点

            vec4 v2 = position;
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v2);
            EmitVertex();//生成一个三棱柱顶点

            vec4 v3 = target;
            if (target.y > position.y) { v3.y += normalLength / 30.0f; }
            else { v3.y -= normalLength / 10.0f; }
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v3);
            EmitVertex();//生成一个三棱柱顶点
            
            vec4 v4 = position;
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v4);
            EmitVertex();//生成一个三棱柱顶点

            vec4 v5 = target;
            if (target.z > position.z) { v5.z += normalLength / 30.0f; }
            else { v5.z -= normalLength / 10.0f; }
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v5);
            EmitVertex();//生成一个三棱柱顶点

            vec4 v6 = position;
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v6);
            EmitVertex();//生成一个三棱柱顶点

            vec4 v7 = target;
            if (target.x > position.x) { v7.x += normalLength / 30.0f; }
            else { v7.x -= normalLength / 10.0f; }
            gl_Position = projectionMatrix * viewMatrix * (modelMatrix * v7);
            EmitVertex();//生成一个三棱柱顶点

        }
        
        EndPrimitive();//依据上面的8个顶点，为此顶点的法线生成一个三棱柱
    }
}

输入输出类型

Geometry shader允许的输入输出类型，可以参考（https://www.opengl.org/wiki/Geometry_Shader）

GS input	OpenGL primitives	TES parameter	vertex count
points​	GL_POINTS	point_mode​	1
lines​	GL_LINES, GL_LINE_STRIP, GL_LINE_LIST	isolines​	2
lines_adjacency​	GL_LINES_ADJACENCY, GL_LINE_STRIP_ADJACENCY	N/A	4
triangles​	GL_TRIANGLES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN	triangles​, quads​	3
triangles_adjacency​	GL_TRIANGLES_ADJACENCY, GL_TRIANGLE_STRIP_ADJACENCY	N/A	6

输出类型只能是points​、line_strip或triangle_strip。

Geometry shader的一个特点，就是从vertex shader传过来的顶点，在经过geometry shader后就消失了，不会再传到fragment shader。所以为了保证仍旧渲染模型本身，输入、输出类型必须​一致。于是我只能选triangles riangle_strip。

当然，用一套shader program渲染模型，再用另一套来渲染法线，那也是可以的。我不这么做一是因为懒，二是希望内存中只有一套数据，三是希望不去更改目前的CSSL+Renderer框架。

uniform

Geometry shader中的uniform变量与vertex shader、fragment shader中的相同。

inout类型变量

例如上面的

in VS_GS_VERTEX
{
    vec3 normal;
} vertex_in[];

必须用数组的形式。这符合输入数据会有多个顶点的实际。

而out类型的变量，例如上面的

out GS_FS_VERTEX
{
    vec3 color;
} vertex_out;

+BIT祝威+悄悄在此留下版了个权的信息说：

与vertex shader、fragment shader中的形式相同。但是它可以被多次使用，在使用后，每调用一次 EmitVertex(); 就会生效一次（产生一个顶点，此顶点在fragment shader中的GS_FS_VERTEX.color字段就是刚刚设置的值）。

可以说，geometry shader的工作方式是：根据输入的图元的各个顶点信息，根据业务需要，设置好你需要的新顶点的各项信息，然后用EmitVertex();，就会生成一个顶点，并传给fragment shader。而调用 EndPrimitive(); 时，就会结束一个图元的生成过程（同时开始下一个图元的生成过程）。

gl_Position

geometry shader中是可以设置顶点的位置的。因此就不宜直接在vertex shader中设置了。

+BIT祝威+悄悄在此留下版了个权的信息说：

填坑

坑人的是geometry shader的layout inout类型不支持quads。而我之前做的球体、立方体模型用的都是quad_strip类型的索引。试验证明这样的模型是用不了geometry shader的。所以我只好做一套用triangles或triangle_strip做索引的球体了。

坑填完后，效果如下图。

我制作的球体模型：

我意外制作的“冰激凌”模型：

我制作的立方体模型：

+BIT祝威+悄悄在此留下版了个权的信息说：

总结

实际上，目前的法线会出现不稳定且无限延长的现象，这个问题待解决。

2016-02-16

解决法线不稳定的问题

这个不稳定问题在我整理了CSSL2GLSL后消失了。原因也未知，可能与下面这个问题相关。

下图中的法线没有完全显示。而是每个面只显示了一个。这是因为在geometry shader中的 layout (triangle_strip, max_vertices = 11) out; 最大顶点数太小了，改到27个顶点（=1个三角形的3个顶点+3个三棱柱的8个顶点）即可。

正常显示的立方体法线图：

 CSSL支持geometry shader

现在的CSSL支持geometry shader的编写和代码生成。并且，代码生成过程中也会自动解析用户自定义的结构类型，例如下面这样的：

1 in VS_GS_VERTEX
2 {
3     vec3 normal;
4 } vertex_in[];

还有下面这样的，都支持。

1 out GS_FS_VERTEX
2 {
3     vec3 color;
4 } vertex_out;

对应上面的两个GLSL类型，C#中的CSSL写法是这样的：

        class VS_GS_VERTEX
        {
            public vec3 normal;//必须是public的字段
        }
        [In]
        VS_GS_VERTEX[] vertex_in;

        class GS_FS_VERTEX
        {
            public vec3 color;//必须是public的字段
        }
        [Out]
        GS_FS_VERTEX vertex_out;

初始值的自动转化

此外，像下面这样的C#中的初始值也支持自动转化到GLSL。

        [Uniform]
        float normalLength = 0.5f;

这个会自动转换为GLSL中的：

uniform float normalLength = 0.5;

debug 

既然teapot的法线计算有问题，那就来debug。改正normal的计算程序后，得到了正常的法线图。

+BIT祝威+悄悄在此留下版了个权的信息说：