OpenGLES：实现11个卡通箱子绕7个轴旋转

效果展示

一.概述

上一篇博文讲解了使用六张卡通图片进行立方体纹理贴图，实现一个旋转的箱子的效果。

这一篇博文在上一篇的基础上进行拓展，实现11个箱子分别围绕7个方向轴旋转的效果。

为什么是11个箱子？

因为我只绘了11个，如果想可以绘制任意多个。

7个轴分别是哪7个？

x, y, z三个轴，以及3维坐标系中各空间象限与(x,y,z)都成45度夹角的方向轴。

贴图的图片仍然延用上一篇博文中的六张卡通图：

二.GLRender：变量定义

2.1 顶点、纹理相关变量定义

在上一篇博文中，最终调用glDrawArrays()进行绘制时，我采用了GL_TRIANGLE_FAN的方式，这是一种以图形几何中心为中心点，对顶点进行扇形绘制的一种方式，所以上一篇博文中立方体各个面的顶点坐标定义相对简单一些。

这一篇博文中，立方体的实现我再换成GL_TRIANGLE_STRIP的方式来实现，顶点坐标的定义按照逆时针()()的顺序

顶点坐标数组：

OpenGL中对基础图元：三角形的绘制是按照顶点逆时针顺序，

所以本文中在对立方体每一个面的顶点坐标都按照 ：(顶点0、顶点1、顶点2)（顶点2、顶点3、顶点0）的顺序进行定义。

我要绘制的是边长为0.5f的立方体箱子，所以参照上图，顶点坐标中的1改为0.5f

public static float[] vertexData = new float[]{

		// back face
		0.5f, 0.5f, -0.5f,     
		0.5f, -0.5f, -0.5f,     
		-0.5f, -0.5f, -0.5f,    
		-0.5f, -0.5f, -0.5f,   
		-0.5f, 0.5f, -0.5f,     
		0.5f, 0.5f, -0.5f,     

		// front face
		-0.5f, 0.5f, 0.5f,    
		-0.5f, -0.5f, 0.5f,    
		0.5f, -0.5f, 0.5f,  
		0.5f, -0.5f, 0.5f,   
		0.5f, 0.5f, 0.5f,    
		-0.5f, 0.5f, 0.5f,  

		// left face
		-0.5f, 0.5f, -0.5f,   
		-0.5f, -0.5f, -0.5f,   
		-0.5f, -0.5f, 0.5f,   
		-0.5f, -0.5f, 0.5f,    
		-0.5f, 0.5f, 0.5f,   
		-0.5f, 0.5f, -0.5f,   

		// right face
		0.5f, 0.5f, 0.5f,   
		0.5f, -0.5f, 0.5f,   
		0.5f, -0.5f, -0.5f,    
		0.5f, -0.5f, -0.5f,    
		0.5f, 0.5f, -0.5f,     
		0.5f, 0.5f, 0.5f,   

		// bottom face
		-0.5f, -0.5f, 0.5f,     
		-0.5f, -0.5f, -0.5f,  
		0.5f, -0.5f, -0.5f,     
		0.5f, -0.5f, -0.5f,     
		0.5f, -0.5f, 0.5f,     
		-0.5f, -0.5f, 0.5f,    

		// top face
		-0.5f, 0.5f, -0.5f, 
		-0.5f, 0.5f, 0.5f,  
		0.5f, 0.5f, 0.5f,  
		0.5f, 0.5f, 0.5f,    
		0.5f, 0.5f, -0.5f,     
		-0.5f, 0.5f, -0.5f,    
};

纹理坐标数组：

Android设备上，纹理坐标的原点在左上角，右下角的纹理坐标是（1，1）

按照Android的纹理坐标系，纹理坐标与顶点坐标一一对应的定义如下：

public static float[] textureData = new float[]{
		0.0f, 0.0f,
		0.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 0.0f,
		0.0f, 0.0f,

		0.0f, 0.0f,
		0.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 0.0f,
		0.0f, 0.0f,

		0.0f, 0.0f,
		0.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 0.0f,
		0.0f, 0.0f,

		0.0f, 0.0f,
		0.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 0.0f,
		0.0f, 0.0f,

		0.0f, 0.0f,
		0.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 0.0f,
		0.0f, 0.0f,

		0.0f, 0.0f,
		0.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 1.0f,
		1.0f, 0.0f,
		0.0f, 0.0f,
};

纹理Id数组：

private int[] textureIds;

纹理资源数组：

public static int[] textureResIds = new int[]{
		R.drawable.cube_texture_1,
		R.drawable.cube_texture_2,
		R.drawable.cube_texture_3,
		R.drawable.cube_texture_4,
		R.drawable.cube_texture_5,
		R.drawable.cube_texture_6
};

顶点和纹理Buffer：

private FloatBuffer vertexBuffer;
private FloatBuffer textureBuffer;

2.2 其他变量定义

其他常规变量，和上一篇博文中的没太大区别

//MVP矩阵
private float[] mMVPMatrix = new float[16];

//shader程序/渲染器
private int shaderProgram;

private int vPosition;
private int aTextureCoord;
//mvp矩阵属性
private int mvpMatrix;
//采样器属性
private int sampler;      

//屏幕宽高比率
private float ratio;

三.GLRender：着色器、内存分配等

3.1 着色器创建、链接、使用

3.2 着色器属性获取、赋值

3.3 缓冲内存分配

这几个部分的代码实现2D图形绘制基本一致

可参考专栏中2D绘制相关博文中的函数代码：

• createAndLinkProgram()
• getFloatBuffer()

有详细的代码实现

不再重复展示代码

四.GLRender：多纹理加载

传入Context、纹理资源数组textureResIds，返回纹理Id，赋值给纹理id数组textureIds

textureIds = TextureUtils.LoadTexture(mContext, textureResIds);

//纹理Id根据贴图数量在Api内部创建，加载纹理贴图后返回纹理Id数组
public static int[] LoadTexture(Context context, int[] resIds) {
	BitmapFactory.Options options = new BitmapFactory.Options();
	options.inScaled = false;
	Bitmap[] bitmaps = new Bitmap[resIds.length];
	// 生成纹理id
	final int[] textureIds = new int[resIds.length];
	glGenTextures(resIds.length, textureIds, 0);
	for (int i = 0; i < resIds.length; i++) {
		bitmaps[i] = BitmapFactory.decodeResource(context.getResources(), resIds[i], options);
		// 绑定纹理到OpenGL
		glBindTexture(GL_TEXTURE_2D, textureIds[i]);
		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
		// 加载bitmap到纹理中
		GLUtils.texImage2D(GL_TEXTURE_2D, 0, bitmaps[i], 0);
		// 生成MIP贴图
		glGenerateMipmap(GL_TEXTURE_2D);
		// 取消绑定纹理
		glBindTexture(GL_TEXTURE_2D, 0);
		bitmaps[i].recycle();
	}
	return textureIds;
}

五.GLRender：绘制

除了顶点、纹理坐标数组采用了不同的方式，前面所讲述的其他部分基本与上一篇绘制单个箱子一样。

但是，接下来的绘制部分会有所不同。

5.1 七个方向轴

本博文要实现的是“11个箱子绕7个轴旋转”，那么就要先定义出7个轴的方向向量：

public static float[][] rotate = {
		{1,   1,  1},
		{1,   0,  0},    //X轴
		{-1, -1,  1},
		{0,   1,  0},    //Y轴
		{-1, -1, -1},
		{0,   0,  1},    //Z轴
		{1,  -1, -1},
};

5.2 十一个箱子怎么生成？

定义11个方向向量，将箱子移动到11个不同的位置

public static float[][] directions = {
		{0.0f, 0.0f, -9.0f},
		{0.0f, -2.0f, -6.0f},
		{-1.5f, -4.5f, -9.0f},
		{-1.5f, -2.0f, -5.0f},
		{1.5f, 1.0f, -7.0f},
		{0.0f, 2.0f, -8.0f},
		{-1.5f, 2.0f, -6.0f},
		{-1.5f, 3.7f, -7.0f},
		{2.0f, 4.0f, -8.0f},
		{-1.5f, 0.0f, -5.0f},
		{1.5f, -3.0f, -6.0f},
};

5.3 onDrawFrame()

每一次绘制都需要绘制11个箱子，也就是将1个箱子平移到11个不同的位置，所以需要用一个for()来循环更新mMVPMatrix。

在这个for()循环里面，又需要对每个箱子的6个面进行纹理贴图，所以还得再加上一层子for()循环进行纹理贴图。

代码如下：

@Override
public void onDrawFrame(GL10 gl) {
	...

	for (int i = 0; i < directions.length; i++) {
		mMVPMatrix = TransformUtils.getCubeTexturesMVPMatrix(i, ratio);
		//设置MVP变换矩阵到着色器程序/渲染器
		glUniformMatrix4fv(mvpMatrix, 1, false, mMVPMatrix, 0);

		int count = 6;
		for (int j = 0; j < textureIds.length; j++) {
			int first = j * count;
			//绑定纹理
			glBindTexture(GL_TEXTURE_2D, textureIds[j]);
			glDrawArrays(GL_TRIANGLE_STRIP, first, count);
		}
	}
    
	...
}

5.4 getCubeTexturesMVPMatrix()

代码：

private static float mCubeTexturesRotateAgree = 0.0f;

public static float[] getCubeTexturesMVPMatrix(int i, float ratio) {
	//初始化modelMatrix, viewMatrix, projectionMatrix
	float[] modelMatrix = getIdentityMatrix(16, 0); //模型变换矩阵
	float[] viewMatrix = getIdentityMatrix(16, 0); //观测变换矩阵/相机矩阵
	float[] projectionMatrix = getIdentityMatrix(16, 0); //投影变换矩阵

	/*设置透视投影变换矩阵*/
	Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 25);

	//获取modelMatrix, viewMatrix, projectionMatrix
	//获取观测变换矩阵，设置相机位置
	Matrix.setLookAtM(viewMatrix, 0, 0, 0, 10, 0, 0, 0, 0, 1, 0);
	//设置平移矩阵
	Matrix.translateM(viewMatrix, 0, directions[i][0], directions[i][1], directions[i][2]);

	//获取模型旋转变换矩阵
	int rIndx = i % rotate.length;
	mCubeTexturesRotateAgree = (mCubeTexturesRotateAgree + 1.0f / directions.length) % 360;
	Matrix.rotateM(viewMatrix, 0, mCubeTexturesRotateAgree, rotate[rIndx][0], rotate[rIndx][1], rotate[rIndx][2]);

	//计算MVP变换矩阵: mvpMatrix = projectionMatrix * viewMatrix * modelMatrix
	float[] mvpMatrix = new float[16];
	Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, viewMatrix, 0);

	return mvpMatrix;
}

六.着色器代码

与单个箱子绘制一样，并无差异

6.1 cube_texture_vertex_shader.glsl

#version 300 es

layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec2 aTextureCoord;

uniform mat4 mvpMatrix;

out vec2 vTexCoord;

void main() {
    gl_Position = mvpMatrix * vPosition;
    vTexCoord = aTextureCoord;
}

6.2 cube_texture_fragtment_shader.glsl

#version 300 es
#extension GL_OES_EGL_image_external_essl3 : require
precision mediump float;

uniform sampler2D sampler;

in vec2 vTexCoord;

out vec4 outColor;

void main(){
    outColor = texture(sampler,vTexCoord);
}

七.结束语

11个卡通箱子围绕7个方向轴旋转的讲解到此结束

最终实现效果如本博文开头所示