Android使用OpenGL ES 3.0实现随手指旋转3D立方体

OpenGL ES在做普通应用方面3D使用的不多，但有时候实现一些有趣的功能也是蛮不错的。画立方体的的demo网上已经很多了，这次我们就实现一个随手指旋转的立方体，这个demo基本可以了解各个坐标系转换矩阵的使用了。
先看一下最终效果：

话不多说，直接上代码了。

EGL的配置

EGL的配置也就是常规配置了，但是需要注意的一点是：为了使立方体看起来更加真实，需要开启深度测试，需要在egl的环境中加入深度测试的配置。不然就算启用了深度测试也会没用。

 //通过属性去筛选合适的配置const EGLint attibutes[] = {EGL_BUFFER_SIZE, 32,EGL_ALPHA_SIZE, 8,EGL_BLUE_SIZE, 8,EGL_GREEN_SIZE, 8,EGL_RED_SIZE, 8,EGL_RENDERABLE_TYPE, EGL_OPENGL_ES2_BIT, //指定渲染api版本 2EGL_SURFACE_TYPE, EGL_WINDOW_BIT,EGL_DEPTH_SIZE, 24, //添加这段来请求深度缓冲区EGL_NONE};

绘制一个立方体

首先使用OpenGL绘制一个立方体十分简单，一个面两个三角形，绘制十二个三角形就可以了。一个三角形3个点，也就是需要36个点。其实立方体很多点是重复的，我们完全可以用下标的形式去画点,但是这篇文章我没有用下标，使用了36个点来直接画。

  float vertices[] = {-0.5f, -0.5f, -0.5f, 0.0f, 0.0f,0.5f, -0.5f, -0.5f, 1.0f, 0.0f,0.5f, 0.5f, -0.5f, 1.0f, 1.0f,0.5f, 0.5f, -0.5f, 1.0f, 1.0f,-0.5f, 0.5f, -0.5f, 0.0f, 1.0f,-0.5f, -0.5f, -0.5f, 0.0f, 0.0f,-0.5f, -0.5f, 0.5f, 0.0f, 0.0f,0.5f, -0.5f, 0.5f, 1.0f, 0.0f,0.5f, 0.5f, 0.5f, 1.0f, 1.0f,0.5f, 0.5f, 0.5f, 1.0f, 1.0f,-0.5f, 0.5f, 0.5f, 0.0f, 1.0f,-0.5f, -0.5f, 0.5f, 0.0f, 0.0f,-0.5f, 0.5f, 0.5f, 1.0f, 0.0f,-0.5f, 0.5f, -0.5f, 1.0f, 1.0f,-0.5f, -0.5f, -0.5f, 0.0f, 1.0f,-0.5f, -0.5f, -0.5f, 0.0f, 1.0f,-0.5f, -0.5f, 0.5f, 0.0f, 0.0f,-0.5f, 0.5f, 0.5f, 1.0f, 0.0f,0.5f, 0.5f, 0.5f, 1.0f, 0.0f,0.5f, 0.5f, -0.5f, 1.0f, 1.0f,0.5f, -0.5f, -0.5f, 0.0f, 1.0f,0.5f, -0.5f, -0.5f, 0.0f, 1.0f,0.5f, -0.5f, 0.5f, 0.0f, 0.0f,0.5f, 0.5f, 0.5f, 1.0f, 0.0f,-0.5f, -0.5f, -0.5f, 0.0f, 1.0f,0.5f, -0.5f, -0.5f, 1.0f, 1.0f,0.5f, -0.5f, 0.5f, 1.0f, 0.0f,0.5f, -0.5f, 0.5f, 1.0f, 0.0f,-0.5f, -0.5f, 0.5f, 0.0f, 0.0f,-0.5f, -0.5f, -0.5f, 0.0f, 1.0f,-0.5f, 0.5f, -0.5f, 0.0f, 1.0f,0.5f, 0.5f, -0.5f, 1.0f, 1.0f,0.5f, 0.5f, 0.5f, 1.0f, 0.0f,0.5f, 0.5f, 0.5f, 1.0f, 0.0f,-0.5f, 0.5f, 0.5f, 0.0f, 0.0f,-0.5f, 0.5f, -0.5f, 0.0f, 1.0f};glDrawArrays(GL_TRIANGLES, 0, 36);

这个立方体可以想象一下，就是边长为1.0的立方体了，中心在原点。

矩阵变换

我们也还是按照几种常用矩阵变换的套路来，我们还是使用模型，视图，投影矩阵来变换坐标。

#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTexCoord;out vec2 TexCoord;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;void main(){gl_Position = projection*view*model*vec4(aPos, 1.0f);TexCoord=vec2(aTexCoord.x,1.0-aTexCoord.y);
}

1、不同向量的旋转

首先我们在只考虑在model中加入旋转。想象一下手指在屏幕上滑动是有一个方向向量的，加入我们在屏幕上这样滑动

那么立方体的旋转轴就是垂直于手指滑动方向的一个向量，而这个向量的求取方式，我们使用这个向量于Z轴的向量进行叉乘来取得。还要注意一点，因为我们取得屏幕坐标系和OpenGL的坐标系又差别，所以需要一定的变化来求得正确的旋转轴。

  if (x > 0 && y > 0) {y = -y;} else if (x <= 0 && y > 0) {x = -x;degree = -degree;} else if (x > 0 && y < 0) {y = -y;} else if (x <= 0 && y < 0) {y = -y;}LOGE("tedu %f %f %f" ,x,y,degree);if (degree != 0) {glm::vec3 cross = glm::cross(glm::vec3(0.0f, 0.0f, 1.0), glm::vec3(x, y, 0.0f));glm::mat4 tmpMat = glm::mat4(1.0f);tmpMat = glm::rotate(tmpMat, degree, cross);tmpMat *= model;model = tmpMat;}

简单分析一下，我们每次求得对应的向量后，生成一个新的选择矩阵，然后右乘原来的矩阵，注意不能交换顺序，然后求得最终的矩阵并赋值了model。通过状态的叠加，最终将会获得最终的效果。

2、双指的缩放

这里就不得不提一下对于双指的判定了。我们的逻辑是：

单指的时候不进行缩放，进行旋转
双指的时候进行缩放，不进行旋转
双指以上情况直接不处理，或者有双指变为单指的情况也不处理

逻辑理顺之后，我们只需要加入判断的bool变量即可，注意在抬起手指，以及单指切换双指的时候需要清空旋转的值，看一下逻辑。

 cube.setOnTouchListener { v, event ->when (event.actionMasked) {MotionEvent.ACTION_DOWN -> {//单指触摸情况lastX = event.getX()lastY = event.getY()canRotate = truecanScale = false}MotionEvent.ACTION_POINTER_DOWN -> {//双指触摸canRotate = falsecanScale = trueif (event.pointerCount > 2) {canScale = falsereturn@setOnTouchListener false}val index0 = event.getPointerId(0)val index1 = event.getPointerId(1)lastX = event.getX(index0)lastY = event.getY(index0)last1X = event.getX(index1)last1Y = event.getY(index1)controler.rotate(0.0f, 0.0f, 0.0f)}MotionEvent.ACTION_POINTER_UP -> {//还原canScale=falsecanRotate=falsecontroler.rotate(0.0f, 0.0f, 0.0f)}MotionEvent.ACTION_MOVE -> {if (canRotate) {if(event.pointerCount>=2){controler.rotate(0.0f, 0.0f, 0.0f)return@setOnTouchListener true}val curY = event.yval curX = event.xval vecX = curX - lastXval vecY = curY - lastYlastY = curYlastX = curXval distance = Math.sqrt((vecX * vecX).toDouble() + (vecY * vecY).toDouble())controler.rotate(vecX, vecY, distance.toFloat())} else if (canScale) {//通过双指按下的距离比例来进行缩放，但是这里的比例并不实际缩放的比例，只是通过简单调整视野的范围来进行缩放val index0 = event.getPointerId(0)val index1 = event.getPointerId(1)val curX = event.getX(index0)val curY = event.getY(index0)val cur1X = event.getX(index1)val cur1Y = event.getY(index1)val lastDis=Math.sqrt(Math.pow((lastX-last1X).toDouble(), 2.0)+Math.pow((lastY-last1Y).toDouble(), 2.0))val curDis=Math.sqrt(Math.pow((curX-cur1X).toDouble(), 2.0)+Math.pow((curY-cur1Y).toDouble(), 2.0))controler.scale((curDis/lastDis).toFloat())}}}return@setOnTouchListener true;}

然后我们看native代码，首先是做简单的视野角度加减

void CubeTextureRender::setScale(jfloat scale) {LOGE("scale %f",scale);if (scale > 1) {fov -= scale;} else if(scale<1) {fov +=  (1.0f/scale);}if (fov <= 20.0) {fov = 20.0;} else if (fov > 140.0) {fov = 140.0;}
}

然后将视野传入投影即可

    glm::mat4 projection = glm::mat4(1.0f);float ratio = (float) _backingWidth / (float) _backingHeight;projection = glm::perspective(glm::radians(fov), ratio, 0.1f, 100.0f);

文章到这里就结束了，除了一些必要的数学知识，其实难度不大。我们通过添加互动让立方体更加有趣。如果喜欢这篇文章，麻烦点一下关注谢谢。有什么问题也可以在评论区留言。

源码地址