【Shader特效7】砖头墙壁纹理和排球纹理片元着色器实现

砖头墙壁纹理片元着色器实现（Shader特效7）

最近在研究一个使用片元着色器完成墙壁纹理和排球纹理的例子，在这里进行总结一些算法和开发过程。

作者：尹豆（憨豆酒），联系我yindou97@163.com，熟悉图形学，图像处理领域，本章代码： https://github.com/douysu/computer-graphics-notes

• 我的知乎
• 个人主页

参考内容：

• 《OpenGL ES 3.X 游戏开发 下卷》

墙壁纹理运行效果

排球纹理运行效果

墙壁纹理基本原理

通过以上的图片可以这样计算
1、首先通过每一行的高度计算出每一个顶点的所属行。奇数行与偶数行的砖块不能够重叠，否则看不出效果，所以奇数行相对偶数行有一个偏移量，这也就是需要计算行号的目的了。
2、将一行分解成图中的1,2,3部分分别计算即可。

排球纹理基本原理

排球纹理原理就不再多讲了，与墙壁纹理类似，将经度划分成8个区域，给定不用颜色，将纬度划分成3个区域，两极为白色。

墙壁纹理代码部分

commonTexLight.frag

#version 400
#extension GL_ARB_separate_shader_objects : enable//开启separate_shader_objects
#extension GL_ARB_shading_language_420pack : enable//开启shading_language_420pack
layout (location = 0) in vec3 vposition;//顶点着色器传入的顶点位置
layout (location = 1) in vec2 mcLongLat;//顶点着色器传入的顶点位置(经度，纬度)（偏航角，俯仰角）
layout (location = 0) out vec4 outColor;//输出到渲染管线的片元颜色值
void main(){//主方法
   vec3 bColor=vec3(0.678,0.231,0.129);//砖块的颜色
   vec3 mColor=vec3(0.763,0.657,0.614);//水泥的颜色
   vec3 color;//片元的最终颜色
   //计算当前位于奇数还是偶数行(这里的12是指每一行的高度)求得的结果为0或者1
   int row=int(mod((mcLongLat.y+90.0)/12.0,2.0));
   //计算当前片元是否在此行区域1中的辅助变量，结果为0~11将墙壁的每一行分段化
   float ny=mod(mcLongLat.y+90.0,12.0);
   //每行的砖块偏移值，奇数行偏移半个砖块
   float oeoffset=0.0;
   //当前片元是否在此行区域3中的辅助变量
   float nx;
   if(ny>10.0){//图中的1部分
       color=mColor;//采用水泥色着色
   }else{//图中的2,3部分
   if(row==1){//若为奇数行则偏移半个砖块
        oeoffset=11.0;
   }
   //计算当前片元是否在此行区域3中的辅助变量
   nx=mod(mcLongLat.x+oeoffset,22.0);
   if(nx>20.0){//图中的2部分
       color=mColor;
   }else{//图中的3部分
    color=bColor;//采用砖块色着色
    }
   } //将片元的最终颜色传递进渲染管线
     outColor=vec4(color,0);
}

这里需要注意，传入的vary有mcLongLat，这是一个vec2类型的变量，第一个值为纬度，第二个值为经度（也可以理解为第一个为偏航角，第二个值为俯仰角）
纬度和经度的知识可以看：http://blog.youkuaiyun.com/modestbean/article/details/79185457
偏航角和俯仰角的知识可以看：http://blog.youkuaiyun.com/modestbean/article/details/79135769

排球纹理代码部分

#version 400
#extension GL_ARB_separate_shader_objects : enable//开启separate_shader_objects
#extension GL_ARB_shading_language_420pack : enable//开启shading_language_420pack
layout (location = 0) in vec3 vposition;//顶点着色器传入的顶点位置
layout (location = 1) in vec2 mcLongLat;//顶点着色器传入的顶点位置(偏航角，仰角)
layout (location = 0) out vec4 outColor;//输出到渲染管线的片元颜色值
void main(){//主方法
    vec3 color;
      if(abs(mcLongLat.y)>75.0){
      	  color = vec3(1.0,1.0,1.0);//两边是白色
      }else{
         int colorNum = int(mcLongLat.x/45.0);//颜色号
         if(colorNum == 0){
         	color = vec3(1.0,0.0,0.0);//0号颜色
         }else if(colorNum == 1){
         	color = vec3(0.0,1.0,0.0);//1号颜色
         }else if(colorNum == 2){
         	color = vec3(0.0,0.0,1.0);//2号颜色
         }else if(colorNum == 3){
         	color = vec3(1.0,1.0,0.0);//3号颜色
         }else if(colorNum == 4){
         	color = vec3(1.0,0.0,1.0);//4号颜色
         }else if(colorNum == 5){
         	color = vec3(0.0,1.0,1.0);//5号颜色
         }else if(colorNum == 6){
         	color = vec3(0.3,0.4,0.7);//6号颜色
         }else if(colorNum == 7){
         	color = vec3(0.3,0.7,0.2);//7号颜色
         }
      }
     outColor = vec4(color,1.0);//将颜色扩充为带Alpha通道的vec4类型
}