投稿
  1. 首页
  2. 随笔

【OpenGL ES】立方体手动旋转

西电教务系统 • 2022-12-14 • 随笔 • 阅读 13

【OpenGL ES】立方体手动旋转,第1张

【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 不太熟悉，请回顾以下内容：

  • 绘制三角形​​​​​​
  • ​​​​​​绘制立方体
  • MVP矩阵变换

        本文完整代码资源见→ 【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 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 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 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 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];
        for (int i = 0; i < PLANE_NUM; i++) {
            int plane = i * VERTEXT_NUM_PER_PLANE * DIMENSION_PER_VERTEXT;
            for (int j = 0; j < VERTEXT_NUM_PER_PLANE; j++) {
                int ver = j * DIMENSION_PER_VERTEXT;
                for (int k = 0; k < DIMENSION_PER_VERTEXT; k++) {
                    int index = plane + ver + 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];
        for (int i = 0; i < PLANE_NUM; i++) {
            int plane = i * VERTEXT_NUM_PER_PLANE * DIMENSION_PER_COLOR;
            for (int j = 0; j < VERTEXT_NUM_PER_PLANE; j++) {
                int ver = j * DIMENSION_PER_COLOR;
                for (int k = 0; k < DIMENSION_PER_COLOR; k++) {
                    int index = plane + ver + k;
                    res[index] = color[i][j][k];
                }
            }
        }
        return res;
    }

    public int getPlaneNum() {
        return PLANE_NUM;
    }

    // 将变换后的顶点坐标刷新到模型中
    public void updateVertex(float[] newVertex) {
        for (int i = 0; i < PLANE_NUM; i++) {
            int plane = i * VERTEXT_NUM_PER_PLANE * DIMENSION_PER_VERTEXT;
            for (int j = 0; j < VERTEXT_NUM_PER_PLANE; j++) {
                int ver = j * DIMENSION_PER_VERTEXT;
                for (int k = 0; k < DIMENSION_PER_VERTEXT; k++) {
                    int index = plane + ver + 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 精度。

        运行效果：

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/5590435.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
西电教务系统 西电教务系统 一级用户组
0 0
上一篇 2022-12-14
下一篇 2022-12-15

发表评论

登录后才能评论

评论列表（0条）

保存