【OpenGL ES】立方体手动旋转
1 前言
本文主要介绍使用 OpenGL ES 绘制立方体，并实现手动触摸事件控制立方体旋转。
为方便控制触摸旋转，假设旋转轴始终在 xoy 平面上，设 z 轴的方向向量 u = (0, 0, 1)，触摸方向向量为 v（起点为ACTION_DOWN 时坐标，终点 ACTION_MOVE 时坐标），则旋转轴 w = u x v（x 为向量叉乘运算，运算结果仍然是一个向量，并且 w 垂直于 uov 平面）。
在每次触摸结束时（ACTION_UP），为保证下次触摸事件与立方体旋转的一致性，将变换后的顶点坐标刷新到模型中，即更新模型的顶点坐标。
读者如果对 OpenGL ES 不太熟悉，请回顾以下内容：
本文完整代码资源见→【OpenGL ES】立方体手动旋转，另外，笔者也实现了立方体贴图+手动旋转、绘制魔方+手动旋转，资源见→【OpenGL ES】立方体贴图+手动旋转、【OpenGL ES】绘制魔方+手动旋转。
项目目录如下：
2 案例
MainActivity.java
package com.zhyan8.touchCube;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private GLSurfaceView mGlSurfaceView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mGlSurfaceView = new MyGLSurfaceView(this);
setContentView(mGlSurfaceView);
mGlSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}
@Override
protected void onResume() {
super.onResume();
mGlSurfaceView.onResume();
}
@Override
protected void onPause() {
super.onPause();
mGlSurfaceView.onPause();
}
}
MyGLSurfaceView.java
package com.zhyan8.touchCube;
import android.content.Context;
import android.opengl.GLSurfaceView;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class MyGLSurfaceView extends GLSurfaceView {
private MyRender mRender;
private float mRate = 1f;
private float mPreviousX;
private float mPreviousY;
public MyGLSurfaceView(Context context) {
super(context);
setEGLContextClientVersion(3);
mRender = new MyRender(context);
setRenderer(mRender);
}
public MyGLSurfaceView(Context context, AttributeSet attrs) {
super(context, attrs);
setEGLContextClientVersion(3);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mPreviousX = x;
mPreviousY = y;
break;
case MotionEvent.ACTION_MOVE:
requestRender(x, y);
break;
case MotionEvent.ACTION_UP:
updateVertex();
break;
case MotionEvent.ACTION_CANCEL:
break;
}
return true;
}
private void requestRender(float x, float y) {
getRate();
float dx = x - mPreviousX;
float dy = mPreviousY - y; //屏幕坐标Y轴向下，模型坐标Y轴向上
float[] axis = getRotationAxis(dx, dy);
float angle = getRotationAngle(dx, dy);
mRender.setRotateArrt(axis, angle);
requestRender();
}
// 更新顶点坐标
private void updateVertex() {
mRender.updateVertex();
float[] axis = new float[] {0, 0, 1};
float angle = 0f;
mRender.setRotateArrt(axis, angle);
requestRender();
}
// 获取旋转轴
private float[] getRotationAxis(float dx, float dy) {
float[] axis = new float[] {0, 0, 1};
float dis = (float) Math.sqrt(dx * dx + dy * dy);
if (dis < 0.000001f) {
return axis;
}
// axis = (dx, dy, 0) X (0, 0, -1)
axis[0] = -dy;
axis[1] = dx;
axis[2] = 0;
return axis;
}
// 获取旋转角度
private float getRotationAngle(float dx, float dy) {
float d = (float) Math.sqrt(dx * dx + dy * dy);
float angle = d * mRate;
return angle;
}
// 获取滑动比例
private void getRate() {
float w = getWidth();
float h = getHeight();
mRate = 360 / (float) Math.sqrt(w * w + h * h);
}
}
MyRender.java
package com.zhyan8.touchCube;
import android.content.Context;
import android.opengl.GLES30;
import android.opengl.GLSurfaceView;
import java.nio.FloatBuffer;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
public class MyRender implements GLSurfaceView.Renderer {
private Model model;
private volatile FloatBuffer vertexBuffer;
private FloatBuffer colorBuffer;
private MyGLUtils mGLUtils;
private int mProgramId;
private float mRatio;
public MyRender(Context context) {
model = new Model();
mGLUtils = new MyGLUtils(context);
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig eglConfig) {
//设置背景颜色
GLES30.glClearColor(0.1f, 0.2f, 0.3f, 0.4f);
//启动深度测试
gl.glEnable(GLES30.GL_DEPTH_TEST);
//编译着色器
final int vertexShaderId = mGLUtils.compileShader(GLES30.GL_VERTEX_SHADER, R.raw.vertex_shader);
final int fragmentShaderId = mGLUtils.compileShader(GLES30.GL_FRAGMENT_SHADER, R.raw.fragment_shader);
//链接程序片段
mProgramId = mGLUtils.linkProgram(vertexShaderId, fragmentShaderId);
GLES30.glUseProgram(mProgramId);
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
//设置视图窗口
GLES30.glViewport(0, 0, width, height);
getFloatBuffer();
mRatio = 1.0f * width / height;
}
@Override
public void onDrawFrame(GL10 gl) {
//将颜色缓冲区设置为预设的颜色
GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT | GLES30.GL_DEPTH_BUFFER_BIT);
mGLUtils.transform(mProgramId, mRatio); //计算MVP变换矩阵
//启用顶点的数组句柄
GLES30.glEnableVertexAttribArray(0);
GLES30.glEnableVertexAttribArray(1);
//准备顶点坐标和颜色数据
GLES30.glVertexAttribPointer(0, 3, GLES30.GL_FLOAT, false, 0, vertexBuffer);
GLES30.glVertexAttribPointer(1, 4, GLES30.GL_FLOAT, false, 0, colorBuffer);
//绘制正方体的表面（6个面，每面2个三角形，每个三角形3个顶点）
draw();
//禁止顶点数组句柄
GLES30.glDisableVertexAttribArray(0);
GLES30.glDisableVertexAttribArray(1);
}
private void draw() {
int count = 4;
for (int i =0; i < model.getPlaneNum(); i++) {
int first = i * count;
GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, first, count);
}
}
private void getFloatBuffer() {
vertexBuffer = mGLUtils.getFloatBuffer(model.getVertex());
colorBuffer = mGLUtils.getFloatBuffer(model.getColor());
}
// 设置旋转轴和旋转角度
public void setRotateArrt(float[] axis, float angle) {
mGLUtils.setRotateArrt(axis, angle);
}
// 更新顶点坐标
public void updateVertex() {
float[] newVertex = mGLUtils.updateVertex(model.getVertex());
model.updateVertex(newVertex);
vertexBuffer = mGLUtils.getFloatBuffer(model.getVertex());
}
}
GLUtils.java
package com.zhyan8.touchCube;
import android.content.Context;
import android.opengl.GLES30;
import android.opengl.Matrix;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
public class MyGLUtils {
private Context mContext;
private volatile float[] mModelMatrix; //模型变换矩阵
private float mAngle = 0;
private float[] mAxis = new float[] {0, 0, 1};
public MyGLUtils(Context context) {
mContext = context;
}
public FloatBuffer getFloatBuffer(float[] floatArr) {
FloatBuffer fb = ByteBuffer.allocateDirect(floatArr.length * Float.BYTES)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
fb.put(floatArr);
fb.position(0);
return fb;
}
public ByteBuffer getByteBuffer(byte[] byteArr) {
ByteBuffer bb = ByteBuffer.allocateDirect(byteArr.length * Byte.BYTES)
.order(ByteOrder.nativeOrder());
bb.put(byteArr);
bb.position(0);
return bb;
}
//通过代码片段编译着色器
public int compileShader(int type, String shaderCode){
int shader = GLES30.glCreateShader(type);
GLES30.glShaderSource(shader, shaderCode);
GLES30.glCompileShader(shader);
return shader;
}
//通过外部资源编译着色器
public int compileShader(int type, int shaderId){
String shaderCode = readShaderFromResource(shaderId);
return compileShader(type, shaderCode);
}
//链接到着色器
public int linkProgram(int vertexShaderId, int fragmentShaderId) {
final int programId = GLES30.glCreateProgram();
//将顶点着色器加入到程序
GLES30.glAttachShader(programId, vertexShaderId);
//将片元着色器加入到程序
GLES30.glAttachShader(programId, fragmentShaderId);
//链接着色器程序
GLES30.glLinkProgram(programId);
return programId;
}
//从shader文件读出字符串
private String readShaderFromResource(int shaderId) {
InputStream is = mContext.getResources().openRawResource(shaderId);
BufferedReader br = new BufferedReader(new InputStreamReader(is));
String line;
StringBuilder sb = new StringBuilder();
try {
while ((line = br.readLine()) != null) {
sb.append(line);
sb.append("\n");
}
br.close();
} catch (Exception e) {
e.printStackTrace();
}
return sb.toString();
}
//计算MVP变换矩阵
public synchronized void transform(int programId, float ratio) {
//初始化modelMatrix, viewMatrix, projectionMatrix
mModelMatrix = getIdentityMatrix(16, 0); //模型变换矩阵
float[] viewMatrix = getIdentityMatrix(16, 0); //观测变换矩阵
float[] projectionMatrix = getIdentityMatrix(16, 0); //投影变换矩阵
//获取modelMatrix, viewMatrix, projectionMatrix
Matrix.rotateM(mModelMatrix, 0, mAngle, mAxis[0], mAxis[1], mAxis[2]); //获取模型旋转变换矩阵
Matrix.setLookAtM(viewMatrix, 0, 0, 0, 10, 0, 0, 0, 0, 1, 0); //获取观测变换矩阵
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 20); //获取投影变换矩阵
//计算MVP变换矩阵: mvpMatrix = projectionMatrix * viewMatrix * modelMatrix
float[] tempMatrix = new float[16];
float[] mvpMatrix = new float[16];
Matrix.multiplyMM(tempMatrix, 0, viewMatrix, 0, mModelMatrix, 0);
Matrix.multiplyMM(mvpMatrix, 0, projectionMatrix, 0, tempMatrix, 0);
//设置MVP变换矩阵
int mvpMatrixHandle = GLES30.glGetUniformLocation(programId, "mvpMatrix");
GLES30.glUniformMatrix4fv(mvpMatrixHandle, 1, false, mvpMatrix, 0);
}
private float[] getIdentityMatrix(int size, int offset) {
float[] matrix = new float[size];
Matrix.setIdentityM(matrix, offset);
return matrix;
}
// 设置旋转轴和旋转角度
public void setRotateArrt(float[] axis, float angle) {
mAxis = axis;
mAngle = angle;
}
// 更新顶点坐标
public synchronized float[] updateVertex(float[] oldVertex) {
float[] newVertex = new float[oldVertex.length];
int num = oldVertex.length / 3;
for (int i = 0; i < num; i++) {
int offset = i * 3;
float[] in = new float[4];
for (int j = 0; j < 3; j++) {
in[j] = oldVertex[offset + j];
}
in[3] = 1;
float[] out = new float[4];
Matrix.multiplyMV(out, 0, mModelMatrix, 0, in, 0);
for (int j = 0; j < 3; j++) {
newVertex[offset + j] = out[j];
}
}
return newVertex;
}
}
Model.java
package com.zhyan8.touchCube;
public class Model {
private final int PLANE_NUM = 6; // 面数
private final int VERTEXT_NUM_PER_PLANE = 4; // 每个面顶点数
private final int DIMENSION_PER_VERTEXT = 3; // 每个顶点坐标维度
private final int DIMENSION_PER_COLOR = 4; // 每个顶点颜色维度
private final float HALF_SIDE = 1.0f; // 立方体边长的一半
private final float[][] COLORS = new float[][] { // 颜色饱和度
{0.96f, 0.72f, 0.82f, 1f}, // white
{0.84f, 0.84f, 0.04f, 1f}, // yellow
{0.27f, 0.70f, 0.84f, 1f}, // blue
{0.41f, 0.56f, 0.25f, 1f}, // green
{0.95f, 0.42f, 0.02f, 1f}, // orange
{0.95f, 0.17f, 0.04f, 1f} // red
};
// 顶点坐标数组
private volatile float[][][] vertex = new float[PLANE_NUM][VERTEXT_NUM_PER_PLANE][DIMENSION_PER_VERTEXT];
// 顶点颜色数组
private float[][][] color = new float[PLANE_NUM][VERTEXT_NUM_PER_PLANE][DIMENSION_PER_COLOR];
public Model() {
initModel();
}
// 初始化模型顶点坐标和颜色
private void initModel() {
for (int i = 0; i < 3; i++) { // 遍历三视图
initView(i);
}
}
// 初始化三视图顶点坐标和颜色
private void initView(int direction) {
int baseIndex = direction * 2;
int axis = 2 - direction; // 固定的坐标轴
for (int i = 0; i < 2; i++) {
int planeIndex = baseIndex + i;
float value = HALF_SIDE * (1 - 2 * i);
initPlane(planeIndex, axis, value);
}
}
// 初始化一个面顶点坐标和颜色
private void initPlane(int planeIndex, int axis, float value) {
float row = HALF_SIDE;
float col = -HALF_SIDE;
float side = 2 * HALF_SIDE;
switch(axis) {
case 0: // 右视图
for (int i = 0; i < 4; i++) {
vertex[planeIndex][i][0] = value;
vertex[planeIndex][i][1] = row - side * (i / 2);
vertex[planeIndex][i][2] = col + side * (i % 2);
}
break;
case 1: // 俯视图
for (int i = 0; i < 4; i++) {
vertex[planeIndex][i][0] = col + side * (i % 2);
vertex[planeIndex][i][1] = value;
vertex[planeIndex][i][2] = row - side * (i / 2);
}
break;
case 2: // 正视图
for (int i = 0; i < 4; i++) {
vertex[planeIndex][i][0] = col + side * (i % 2);
vertex[planeIndex][i][1] = row - side * (i / 2);
vertex[planeIndex][i][2] = value;
}
break;
}
for (int i = 0; i < 4; i++) {
color[planeIndex][i][0] = COLORS[planeIndex][0];
color[planeIndex][i][1] = COLORS[planeIndex][1];
color[planeIndex][i][2] = COLORS[planeIndex][2];
color[planeIndex][i][3] = COLORS[planeIndex][3];
}
}
// 获取顶点坐标
public float[] getVertex() {
int length = PLANE_NUM * VERTEXT_NUM_PER_PLANE * DIMENSION_PER_VERTEXT;
float[] res = new float[length];
int index = 0;
for (int i = 0; i < PLANE_NUM; i++) {
for (int j = 0; j < VERTEXT_NUM_PER_PLANE; j++) {
for (int k = 0; k < DIMENSION_PER_VERTEXT; k++) {
res[index++] = vertex[i][j][k];
}
}
}
return res;
}
// 获取颜色
public float[] getColor() {
int length = PLANE_NUM * VERTEXT_NUM_PER_PLANE * DIMENSION_PER_COLOR;
float[] res = new float[length];
int index = 0;
for (int i = 0; i < PLANE_NUM; i++) {
for (int j = 0; j < VERTEXT_NUM_PER_PLANE; j++) {
for (int k = 0; k < DIMENSION_PER_COLOR; k++) {
res[index++] = color[i][j][k];
}
}
}
return res;
}
public int getPlaneNum() {
return PLANE_NUM;
}
// 将变换后的顶点坐标刷新到模型中
public void updateVertex(float[] newVertex) {
int index = 0;
for (int i = 0; i < PLANE_NUM; i++) {
for (int j = 0; j < VERTEXT_NUM_PER_PLANE; j++) {
for (int k = 0; k < DIMENSION_PER_VERTEXT; k++) {
vertex[i][j][k] = newVertex[index++];
}
}
}
}
}
vertex_shader.glsl
#version 300 es
layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec4 aColor;
uniform mat4 mvpMatrix;
out vec4 vColor;
void main() {
gl_Position = mvpMatrix * vPosition;
vColor = aColor;
}
顶点着色器的作用：进行矩阵变换位置、根据光照公式计算顶点颜⾊、⽣成 / 变换纹理坐标，并且把位置和纹理坐标发送到片元着色器。
顶点着色器中，如果没有指定默认精度，则 int 和 float 的默认精度都为 highp。
fragment_shader.glsl
#version 300 es
precision mediump float; //声明float型变量的精度为mediump
in vec4 vColor;
out vec4 fragColor;
void main() {
fragColor = vColor;
}
片元着色器的作用：处理经光栅化阶段生成的每个片元，计算每个像素的颜色和透明度。
在片元着色器中，浮点值没有默认的精度值，每个着色器必须声明一个默认的 float 精度。
运行效果：
声明：本文转自【OpenGL ES】立方体手动旋转
【OpenGL ES】立方体手动旋转的更多相关文章
- OpenGL ES 响应屏幕旋转 iOS
iOS下使用OpenGL 如果使用GLKit View 那么不用担心屏幕旋转的问题,说明如下: If you change the size, scale factor, or drawable pr ...
- [置顶] 使用Android OpenGL ES 2.0绘图之五：添加运动
传送门 ☞ 系统架构设计 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 传送门 ☞ GoF23种设计模式 ☞ 转载请注明 ☞ http://blog.csd ...
- Opengl ES 1.x NDK实例开发之七:旋转的纹理立方体
开发框架介绍请參见:Opengl ES NDK实例开发之中的一个:搭建开发框架 本章在第六章(Opengl ES 1.x NDK实例开发之六:纹理贴图)的基础上绘制一个旋转的纹理立方体,原理和纹理贴图 ...
- 【Qt for Android】OpenGL ES 绘制彩色立方体
Qt 内置对OpenGL ES的支持.选用Qt进行OpenGL ES的开发是很方便的,很多辅助类都已经具备.从Qt 5.0開始添加了一个QWindow类,该类既能够使用OpenGL绘制3D图形,也能够 ...
- 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解
最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...
- OpenGL ES: iOS 自定义 UIView 响应屏幕旋转
iOS下使用OpenGL 如果使用GLKit View 那么不用担心屏幕旋转的问题,说明如下: If you change the size, scale factor, or drawable pr ...
- OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解
最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...
- 【C++ OpenGL ES 2.0编程笔记】8: 使用VBO和IBO绘制立方体 【转】
http://blog.csdn.net/kesalin/article/details/8351935 前言 本文介绍了OpenGL ES 2.0 中的顶点缓冲对象(VBO: Vertex Buff ...
- 在 OpenGL ES 2.0 上实现视差贴图(Parallax Mapping)
在 OpenGL ES 2.0 上实现视差贴图(Parallax Mapping) 视差贴图 最近一直在研究如何在我的 iPad 2(只支持 OpenGL ES 2.0, 不支持 3.0) 上实现 视 ...
- 使用OpenGL ES绘制3D图形
如果应用定义的顶点不在同一个平面上,并且使用三角形把合适的顶点连接起来,就可以绘制出3D图形了. 使用OpenGL ES绘制3D图形的方法与绘制2D图形的步骤大致相同,只是绘制3D图形需要定义更多的 ...
随机推荐
- Kafka的部分初始化参数的学习与整理
Kafka的部分初始化参数的学习与整理 背景 前段时间跟同事一起处理过kafka的topic offset的retention 时间与 log 的retention时间不一致. 导致消息还有, 但是o ...
- [转帖]Prometheus 都可以采集那些指标？-- 常用 Exporter 合集
Prometheus 可以通过各种 Exporter 来获取很多指标,并且只要符合 Prometheus 规范的都可以获取到,本文汇总一些常用的采集器到这里. Prometheus Exporter ...
- Python学习之三: 编译二进制
Python学习之三: 编译二进制 摘要 每次使用python 执行py文件其实是比较麻烦的 主要是还得安装python的虚拟机,以及安装对应的pip包. 感觉比较繁杂 理论上最快捷的方式是编译成 二 ...
- [转帖]华为毕昇 JDK 8u292、11.0.11 发布！
https://baijiahao.baidu.com/s?id=1705499834793298544&wfr=spider&for=pc 2021 年 6 月 30 日,毕昇 JD ...
- [转帖]kubelet 原理解析四：probeManager
https://segmentfault.com/a/1190000022163835 概述 在Kubernetes 中,系统和应用程序的健康检查任务是由 kubelet 来完成的,本文主要讨论kub ...
- CentOS确认网口是否插入网线的办法
最近公司的机器存在网络问题, 部分网络总是不通, 比较奇怪. 最近一直想处理好. 第一步: 先查看网口的设备信息 可以使用 ip link show 可以讲网口信息都展示出来. 一般情况下 NO-C ...
- vue3新特性teleport传送原来这么神奇
我对teleport的理解 teleport有传送的意思,读音[te li po t][嘻嘻],看官们应该知道读啥子了吧 它可以将你写的代码传送到某一个地方 传送到哪一个地方呢? 传送到你标记的地方, ...
- vim 从嫌弃到依赖(12)——打开及保存文件
在前几篇文章中,我们从vim各种模式的使用着手介绍了vim如何进行文本本身的编辑.也通过缓冲区列表的介绍了解到了vim是如何进行打开文件的管理.这篇我们将会着眼于文件的打开和保存的基本操作.通过这篇的 ...
- 监控Celery不一定非要使用Flower
运维平台中有许多的周期/定时/异步任务,例如证书扫描.数据备份.日志清理.线上作业等等,这些任务的执行都是借助于Celery来完成的.任务多了之后就会遇到一系列的问题,例如我之前写过的将任务分多队列来 ...
- 遥感图像处理笔记之【FastAI Multi-label image classification】
遥感图像处理学习(4) 前言 遥感系列第4篇.遥感图像处理方向的学习者可以参考或者复刻 本文初编辑于2023年12月15日 2024年1月24日搬运至本人博客园平台 文章标题:FastAI Multi ...