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 face0.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 face0.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];// 生成纹理idfinal 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);// 绑定纹理到OpenGLglBindTexture(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, projectionMatrixfloat[] 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 * modelMatrixfloat[] mvpMatrix = new float[16];Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, viewMatrix, 0);return mvpMatrix;
}

六.着色器代码

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

6.1 cube_texture_vertex_shader.glsl

#version 300 eslayout (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个方向轴旋转的讲解到此结束

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