Android OpenGL ES 绘制镜像纹理

1、背景

只记得有一次面试，面试官提到一个问题，既然你对OpenGL ES有一定的了解，那么可否写一个纹理镜像呢，但是脑子有点懵，对OpenGL ES了解的很初级，并没有回答出来，此篇文章用以记录；

2、基础知识

2.1、坐标系

image.png

2.2、GLSL基础语法

2.2.1、变量及变量类型

变量类别	变量类型	描述
空	void	用于无返回值的函数或空的参数列表
标量	float, int, bool	浮点型，整型，布尔型的标量数据类型
浮点型向量	float, vec2, vec3, vec4	包含1，2，3，4个元素的浮点型向量
整数型向量	int, ivec2, ivec3, ivec4	包含1，2，3，4个元素的整型向量
布尔型向量	bool, bvec2, bvec3, bvec4	包含1，2，3，4个元素的布尔型向量
矩阵	mat2, mat3, mat4	尺寸为2x2，3x3，4x4的浮点型矩阵
纹理句柄	sampler2D, samplerCube	表示2D，立方体纹理的句柄

除上述之外，着色器中还可以将它们构成数组或结构体，以实现更复杂的数据类型。

2.2.2、限定符

限定符	描述
< none: default >	局部可读写变量，或者函数的参数
const	编译时常量，或只读的函数参数
attribute	由应用程序传输给顶点着色器的逐顶点的数据
uniform	在图元处理过程中其值保持不变，由应用程序传输给着色器
varying	由顶点着色器传输给片段着色器中的插值数据

更多语法知识，详见GLSL 详解（基础篇）

2.3、OpenGL ES加载纹理

关于OpenGL ES如果加载纹理，本文不再赘述，如果需要，自行Google

3、关键步骤

接下来主要描述，在OpenGL ES加载纹理的基础上，如何显示镜像纹理；

• 首先，先将顶点着色器和图元着色器的代码贴上

  # color_vertex.glsl
  attribute vec4 vPosition;
  attribute vec2 vCoordinate;
  uniform mat4 vMatrix;
  
  varying vec2 aCoordinate;
  
  void main(){
      gl_Position=vMatrix*vPosition;
      aCoordinate=vCoordinate;
  }
  

  # color_fragment.glsl
  precision mediump float;
  
  uniform sampler2D vTexture;
  
  varying vec2 aCoordinate;
  
  void main(){
      vec4 nColor=texture2D(vTexture, aCoordinate);
      # 此处额外加了一个灰度图显示，可以自行修改
      float c=nColor.r*0.299f + nColor.g*0.587f + nColor.b*0.114f;
      gl_FragColor=vec4(c,c,c,nColor.a);
  }
  

• 分析镜像纹理的绘制流程

  首先，在绘制单张纹理的时候，我们会传入四个顶点坐标，四个纹理采样点坐标、分别对应如下四个位置

image.png

// 顶点坐标
private static final float[] mVertex = {
            -1.0f, 1.0f,
            -1.0f, -1.0f,
            1.0f, 1.0f,
            1.0f, -1.0f
};

// 纹理采样坐标
private static final float[] mTextureCoord = {
            0.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 0.0f,
            1.0f, 1.0f,
};

按照这样的流程，如果要绘制成镜像纹理，我们就需要绘制如下几个点，来完成对称效果：

image.png

private static final float[] mVertex = {
            -1.0f, 1.0f,
            -1.0f, -1.0f,
            0.0f, 1.0f,
            0.0f, -1.0f,
            1.0f, 1.0f,
            1.0f, -1.0f,
 };
private static final float[] mTextureCoord = {
            0.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 0.0f,
            1.0f, 1.0f,
            0.0f, 0.0f,
            0.0f, 1.0f,
};

关于顶点坐标的绘制就不解释了，比较简单，这块主要由一个关键的概念需要理解，就是GLSL的texture2D的采样率，我们就可以实现如下效果了；

image.png

四、其他

• Github Demo