java - 在 Android OpenGL ES 2.0 中对多个 Sprite 进行动画处理

Question

我花了几天时间搜索、尝试教程，但实际上没有得到结果，所以我在这里。

简单地说，我正在尝试以 2D 格式为屏幕上的一组对象(Android Studio)制作动画，每个对象都有独立的移动和旋转。然而，当我尝试这样做时，我要么没有渲染对象，要么它的渲染倾斜(就像通过垂直 Y 轴旋转一样)

我也知道对象绘制顺序的重要性(以提供正确的 Z 顺序外观)，但是，我对矩阵操作有点不知所措。

这是我到目前为止所拥有的:

<小时/>

主要 Activity - 标准内容

    private GLSurfaceView mGLSurfaceView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mGLSurfaceView = new GLSurfaceView(this);

    //check if device supports ES 2.0
    final ActivityManager activityManager = (ActivityManager) getSystemService(Context.ACTIVITY_SERVICE);
    final ConfigurationInfo configurationInfo = activityManager.getDeviceConfigurationInfo();
    final boolean supportsEs2 = configurationInfo.reqGlEsVersion >= 0x20000;

    if (supportsEs2) {
        //Get the ES2 compatible context
        mGLSurfaceView.setEGLContextClientVersion(2);
        //set renderer to my renderer below
        mGLSurfaceView.setRenderer(new MyGL20Renderer(this));

    } else {
        //no support
        return;

    }


    //setContentView(R.layout.activity_main);
    setContentView(mGLSurfaceView);
}

<小时/>

GL20Renderer 类 - 请注意，我现在只是手动将 2 个对象添加到我的集合中进行渲染

public class MyGL20Renderer implements GLSurfaceView.Renderer
{
    private final Context mActivityContext;

    //Matrix Initializations
    private final float[] mMVPMatrix = new float[16];
    private final float[] mProjMatrix = new float[16];
    private final float[] mVMatrix = new float[16];
    private float[] mRotationMatrix = new float[16];

    private final float[] mRotateMatrix = new float[16];
    private final float[] mMoveMatrix = new float[16];
    private final float[] mTempMatrix = new float[16];

    private final float[] mModelMatrix = new float[16];

    private int                 numObjects = 2;
    private ArrayList<Sprite>   spriteList = new ArrayList<Sprite>();


    //Declare as volatile because we are updating it from another thread
    public volatile float mAngle;

    //private Triangle triangle;
    //private Sprite sprite;

    public MyGL20Renderer(final Context activityContext)
    {
        mActivityContext = activityContext;

    }

    public void onSurfaceCreated(GL10 unused, EGLConfig config)
    {
        //Set the background frame color
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

        //Set the camera position (View Matrix) //mtx, offset, eyex,y,z, centrex,y,z, upx,y,z
        Matrix.setLookAtM(mVMatrix, 0,
                0, 0, -1.5f,        //Eye XYZ - position eye behind the origin
                0f, 0f, -5.0f,         //Look XYZ - We are looking toward the distance
                0f, 1.0f, 0.0f);    //Up XYZ - Up vector - where head would be pointing if holding the camera

        //Initialize Shapes
        //triangle = new Triangle();
        //sprite = new Sprite(mActivityContext);

        //Sprite newSprite;

        float xMax = 2.0f;
        float yMax = 2.0f;

        //rand = 0->1
        float newX = (new Random().nextFloat() * xMax * 2) - xMax; //2.0f; //-2 -> +2
        float newY = (new Random().nextFloat() * yMax * 2) - yMax; //-3 -> +3
        float newZ = 0f;



        //for (int i=0; i<numObjects; i++) {
            //newSprite = new Sprite(mActivityContext);
            //spriteList.add(new Sprite(mActivityContext, newX, newY, newZ));
        //}

        spriteList.add(new Sprite(mActivityContext, -0.0f, -0.0f, 0.0f));
        spriteList.add(new Sprite(mActivityContext, +0.5f, -0.5f, 0.0f));
        //spriteList.add(new Sprite(mActivityContext, -1.0f, +1.0f, 0.0f));
        //spriteList.add(new Sprite(mActivityContext, +1.0f, +1.0f, 0.0f));


    }

    public void onDrawFrame(GL10 unused)
    {
        //init
        Sprite currSprite;

        //Redraw background color
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

        //timing
        float jFactor = 0.1f;
        long time = SystemClock.uptimeMillis() % 10000L;
        float angleInDegrees = (360.0f / 1000.0f) * ((int) time) * jFactor;




/*
        //number 1
        //Matrix.setIdentityM(mModelMatrix, 0);
        //currSprite = spriteList.get(0);
        //Matrix.rotateM(mModelMatrix, 0, angleInDegrees, 0.0f, 0.0f, 1.0f);
        //currSprite.Draw(mModelMatrix);

        //number 2
        Matrix.setIdentityM(mModelMatrix, 0);
        currSprite = spriteList.get(1);
        Matrix.translateM(mModelMatrix, 0, 0.0f, -0.1f, 0.0f);
        //Matrix.rotateM(mModelMatrix, 0, 90.0f, 1.0f, 0.0f, 0.0f);
        Matrix.rotateM(mModelMatrix, 0, angleInDegrees, 0.0f, 0.0f, 1.0f);
        currSprite.Draw(mModelMatrix);

        //Matrix.translateM(mModelMatrix, 0, 0, 0, 4.0f);
    */


        //Calculate the projection and view transformation
        Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0);

        //zoom out a bit?
        Matrix.translateM(mMVPMatrix, 0, 0, 0, 4.0f);

        //number 1
        //currSprite = spriteList.get(0);
        //Matrix.setIdentityM(mMVPMatrix, 0);
        //Matrix.rotateM(mMVPMatrix, 0, angleInDegrees, 0.0f, 0.0f, 1.0f);
        //Matrix.translateM(mMVPMatrix, 0, currSprite.coordX, 0.0f, 0.0f);
        //currSprite.coordX += 0.01f;
        //currSprite.Draw(mMVPMatrix);

        //number 2
        currSprite = spriteList.get(0);

        Matrix.setIdentityM(mMVPMatrix, 0);
        Matrix.translateM(mMVPMatrix, 0, 0.0f, 0.0f, 0.0f);

        Matrix.rotateM(mMVPMatrix, 0, angleInDegrees, 0.0f, 0.0f, +1.0f);

        //float[] mTempMatrix = new float[16];
        //mTempMatrix = mModelMatrix.clone();

        //Matrix.multiplyMM(mMVPMatrix, 0, mMVPMatrix, 0, mRotateMatrix, 0);

        //mTempMatrix = mMVPMatrix.clone();
        //Matrix.multiplyMM(mMVPMatrix, 0, mTempMatrix, 0, mModelMatrix, 0);

        //Matrix.setIdentityM(mMVPMatrix, 0);

        currSprite.Draw(mMVPMatrix);

        /*


        //Set the camera position (View Matrix) //mtx, offset, eyex,y,z, centrex,y,z, upx,y,z
        Matrix.setLookAtM(mVMatrix, 0,
                    0, 0, -10,
                    0f, 0f, 0f,
                    0f, 1.0f, 0.0f);


        //Calculate the projection and view transformation
        Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0);

        //zoom out a bit?
        Matrix.translateM(mMVPMatrix, 0, 0, 0, 4.0f);


        for (int i=0; i<numObjects; i++) {

        //Create a rotation transformation for the triangle
        //Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);
        Matrix.setRotateM(mRotationMatrix, 0, 0, 0, 0, -1.0f); //-1.0 = Z, for some reason need this. Grr


        //Combine the rotation matrix with the projection and camera view
        Matrix.multiplyMM(mMVPMatrix, 0, mRotationMatrix, 0, mMVPMatrix, 0);

        //Draw Shape
        //triangle.Draw(mMVPMatrix);
        //sprite.Draw(mMVPMatrix);


            currSprite = spriteList.get(i);
        //Move the object to the passed initial coordinates?
            //Matrix.translateM(mMVPMatrix, 0, currSprite.coordX, currSprite.coordY, currSprite.coordZ);


            currSprite.Draw(mMVPMatrix);
        }
        */

    }

    public void onSurfaceChanged(GL10 unused, int width, int height)
    {
        GLES20.glViewport(0, 0, width, height);
        if (height == 0) {
            height = 1; //incase of div 0 errors
        }

        float ratio = (float) width / height;

        final float left = -ratio;
        final float right = ratio;
        final float bottom = -1.0f;
        final float top = 1.0f;
        final float near = 1.0f;
        final float far = 10.f;


        //This Projection Matrix is applied to object coordinates in the onDrawFrame() method
        //Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
        Matrix.frustumM(mProjMatrix, 0, left, right, bottom, top, near, far);

    }

    public static int loadShader(int type, String shaderCode)
    {
        //Create a Vertex Shader Type Or a Fragment Shader Type (GLES20.GL_VERTEX_SHADER OR GLES20.GL_FRAGMENT_SHADER)
        int shader = GLES20.glCreateShader(type);

        //Add The Source Code and Compile it
        GLES20.glShaderSource(shader, shaderCode);
        GLES20.glCompileShader(shader);

        return shader;
    }
}

请原谅我一直在尝试但失败的 OnDrawFrame() 中的注释代码。

<小时/>

Sprite 类

public class Sprite
{
    //Reference to Activity Context
    private final Context mActivityContext;

    //Added for Textures
    private final FloatBuffer mCubeTextureCoordinates;
    private int mTextureUniformHandle;
    private int mTextureCoordinateHandle;
    private final int mTextureCoordinateDataSize = 2;
    private int mTextureDataHandle;

    private final String vertexShaderCode =
//Test
            "attribute vec2 a_TexCoordinate;" +
                    "varying vec2 v_TexCoordinate;" +
//End Test
                    "uniform mat4 uMVPMatrix;" +
                    "attribute vec4 vPosition;" +
                    "void main() {" +
                    "  gl_Position = vPosition * uMVPMatrix;" +
                    //Test
                    "v_TexCoordinate = a_TexCoordinate;" +
                    //End Test
                    "}";

    private final String fragmentShaderCode =
            "precision mediump float;" +
                    "uniform vec4 vColor;" +
//Test
                    "uniform sampler2D u_Texture;" +
                    "varying vec2 v_TexCoordinate;" +
//End Test
                    "void main() {" +
//"gl_FragColor = vColor;" +
                    "gl_FragColor = (vColor * texture2D(u_Texture, v_TexCoordinate));" +
                    "}";

    private final int shaderProgram;
    private final FloatBuffer vertexBuffer;
    private final ShortBuffer drawListBuffer;
    private int mPositionHandle;
    private int mColorHandle;
    private int mMVPMatrixHandle;
    public float coordX;
    public float coordY;
    //public float coordZ;

    // number of coordinates per vertex in this array
    static final int COORDS_PER_VERTEX = 2;
    static float spriteCoords[] = { -0.5f,  0.5f,   // top left
            -0.5f, -0.5f,   // bottom left
            0.5f, -0.5f,   // bottom right
            0.5f,  0.5f }; //top right

    private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; //Order to draw vertices
    private final int vertexStride = COORDS_PER_VERTEX * 4; //Bytes per vertex

    // Set color with red, green, blue and alpha (opacity) values
    //float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };
    float color[] = { 1f, 1f, 1f, 1.0f };

    public Sprite(final Context activityContext, float initX, float initY, float initZ)
    {
        mActivityContext = activityContext;

        this.coordX = initX;
        this.coordY = initY;
        //this.coordZ = initZ;

        //ergh - will do manually for now. Paxo n00b
        //just a 2D array, no need for Z nonsense
        for (int i=0; i<spriteCoords.length; i++) {
            spriteCoords[i] -= (i%2==0) ? coordX : coordY; //- works better than +

        }

        //float newPosMatrix[] = { initX, initY, 0f };

        //adjust the vector coords accordingly

        //Matrix.multiplyMV(spriteCoords, 0, newPosMatrix, 0, spriteCoords, 0);

        //Initialize Vertex Byte Buffer for Shape Coordinates / # of coordinate values * 4 bytes per float
        ByteBuffer bb = ByteBuffer.allocateDirect(spriteCoords.length * 4);
        //Use the Device's Native Byte Order
        bb.order(ByteOrder.nativeOrder());
        //Create a floating point buffer from the ByteBuffer
        vertexBuffer = bb.asFloatBuffer();
        //Add the coordinates to the FloatBuffer
        vertexBuffer.put(spriteCoords);
        //Set the Buffer to Read the first coordinate
        vertexBuffer.position(0);

        // S, T (or X, Y)
        // Texture coordinate data.
        // Because images have a Y axis pointing downward (values increase as you move down the image) while
        // OpenGL has a Y axis pointing upward, we adjust for that here by flipping the Y axis.
        // What's more is that the texture coordinates are the same for every face.
        final float[] cubeTextureCoordinateData =
                {
                        //Front face
            /*0.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 0.0f,
            0.0f, 1.0f,
            1.0f, 1.0f,
            1.0f, 0.0f*/

                        /*-0.5f,  0.5f,
                        -0.5f, -0.5f,
                        0.5f, -0.5f,
                        0.5f,  0.5f*/

                        0f, 1f,
                        0f, 0f,
                        1f, 0f,
                        1f, 1f
                };

        mCubeTextureCoordinates = ByteBuffer.allocateDirect(cubeTextureCoordinateData.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
        mCubeTextureCoordinates.put(cubeTextureCoordinateData).position(0);

        //Initialize byte buffer for the draw list
        ByteBuffer dlb = ByteBuffer.allocateDirect(spriteCoords.length * 2);
        dlb.order(ByteOrder.nativeOrder());
        drawListBuffer = dlb.asShortBuffer();
        drawListBuffer.put(drawOrder);
        drawListBuffer.position(0);

        int vertexShader = MyGL20Renderer.loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
        int fragmentShader = MyGL20Renderer.loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

        shaderProgram = GLES20.glCreateProgram();
        GLES20.glAttachShader(shaderProgram, vertexShader);
        GLES20.glAttachShader(shaderProgram, fragmentShader);

        //Texture Code
        GLES20.glBindAttribLocation(shaderProgram, 0, "a_TexCoordinate");

        GLES20.glLinkProgram(shaderProgram);

        //Load the texture
        mTextureDataHandle = loadTexture(mActivityContext, R.drawable.cube);
    }

    public void Draw(float[] mvpMatrix)
    {
        //Add program to OpenGL ES Environment
        GLES20.glUseProgram(shaderProgram);

        //Get handle to vertex shader's vPosition member
        mPositionHandle = GLES20.glGetAttribLocation(shaderProgram, "vPosition");

        //Enable a handle to the triangle vertices
        GLES20.glEnableVertexAttribArray(mPositionHandle);

        //Prepare the triangle coordinate data
        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);

        //Get Handle to Fragment Shader's vColor member
        mColorHandle = GLES20.glGetUniformLocation(shaderProgram, "vColor");

        //Set the Color for drawing the triangle
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);

        //Set Texture Handles and bind Texture
        mTextureUniformHandle = GLES20.glGetAttribLocation(shaderProgram, "u_Texture");
        mTextureCoordinateHandle = GLES20.glGetAttribLocation(shaderProgram, "a_TexCoordinate");

        //Set the active texture unit to texture unit 0.
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);

        //Bind the texture to this unit.
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureDataHandle);

        //Tell the texture uniform sampler to use this texture in the shader by binding to texture unit 0.
        GLES20.glUniform1i(mTextureUniformHandle, 0);

        //Pass in the texture coordinate information
        mCubeTextureCoordinates.position(0);
        GLES20.glVertexAttribPointer(mTextureCoordinateHandle, mTextureCoordinateDataSize, GLES20.GL_FLOAT, false, 0, mCubeTextureCoordinates);
        GLES20.glEnableVertexAttribArray(mTextureCoordinateHandle);

        //Get Handle to Shape's Transformation Matrix
        mMVPMatrixHandle = GLES20.glGetUniformLocation(shaderProgram, "uMVPMatrix");

        //Apply the projection and view transformation
        GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);


        //glTranslatef(0f, 0f, 0f);

        //Draw the triangle
        GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length, GLES20.GL_UNSIGNED_SHORT, drawListBuffer);

        //Disable Vertex Array
        GLES20.glDisableVertexAttribArray(mPositionHandle);
    }

    public static int loadTexture(final Context context, final int resourceId)
    {
        final int[] textureHandle = new int[1];

        GLES20.glGenTextures(1, textureHandle, 0);

        if (textureHandle[0] != 0)
        {
            final BitmapFactory.Options options = new BitmapFactory.Options();
            options.inScaled = false;   // No pre-scaling

            // Read in the resource
            final Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId, options);

            // Bind to the texture in OpenGL
            GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]);

            // Set filtering
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
            GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);

            // Load the bitmap into the bound texture.
            GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

            // Recycle the bitmap, since its data has been loaded into OpenGL.
            bitmap.recycle();
        }

        if (textureHandle[0] == 0)
        {
            throw new RuntimeException("Error loading texture.");
        }

        return textureHandle[0];
    }
}

<小时/>

现在，我不知道我是否以正确的方式处理这个问题，但我只是想为 spriteList 中的 Sprite 对象集合添加动画。

更具体地说，收集 3 个对象，然后响应屏幕触摸，并将对象设置为动画到该位置(但这将在稍后实现)

最初，我只是希望能够正确渲染这些对象(具有初始位置)，然后在中心点(绕 Z 轴)旋转它们。

出于某种原因，TranslateM 会扭曲纹理(就像绕 Y 轴一样)，但实际上并未沿 X/Y 平面移动对象

非常感谢您提供的任何帮助。如您所见，我对 OpenGL 相当陌生，并且对支持 Android Studio 和 GLES2.0 的有限教程不太感兴趣。

亲切的问候，詹姆斯

Answer 1

我认为问题在于您没有将平移矩阵乘以旋转矩阵。需要矩阵乘法来组合它们。