使用OpenGL ES 2.0绘制2D图片

28
我一直在尝试使用OpenGL ES 2.0来绘制jpg/png文件的2D图像,但遇到了困难。无论我去哪里找教程,都是关于贴图3D图像的,所以弄清楚如何绘制普通的2D精灵很困难。我已经成功绘制并旋转了一个正方形,但当涉及到纹理时,我肯定出了问题,因为我不断收到错误消息,指出DrawElements未绑定到任何数据。但如果我注释掉与纹理相关的任何代码,它就能正常工作。

非常感谢您的帮助。

这是我的Sprite类和Renderer类的代码:

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 = (v_Color * 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;

// 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 };

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

    //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
    };

    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.brick);
}

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);

    //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];
}
}

我的渲染器类:

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];

//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);

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

public void onDrawFrame(GL10 unused)
{
    //Redraw background color
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

    //Set the camera position (View Matrix)
    Matrix.setLookAtM(mVMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

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

    //Create a rotation transformation for the triangle
    Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);

    //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);
}

public void onSurfaceChanged(GL10 unused, int width, int height)
{
    GLES20.glViewport(0, 0, width, height);

    float ratio = (float) width / height;

    //This Projection Matrix is applied to object coordinates in the onDrawFrame() method
    Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
}

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;
}
}

点击这个链接,它是一个很好的教程。它涉及到OpenGL在Android开发中的应用。 - sarabhai05
我已经学习了那个教程,但它没有包括任何关于纹理的内容。 - Strifex
我正在尝试在这篇文章修改后使用你的精灵类。但是当我尝试翻译精灵时,它给了我奇怪的行为。我想知道你是否遇到了同样的问题。 - user1673892
我使用了你的大部分代码来编写我的代码。mTextureUniformHandle = GLES20.glGetAttribLocation(mProgram, "u_Texture") 返回-1。有什么解决方法吗?谢谢。 - toto_tata
5个回答

24

"v_TexCoordinate = a_TexCoordinate;" +

应该是这样的。

显然,我忘记了一个分号,现在我意识到我有多么依赖我的IDE来告诉我当我犯了一些愚蠢的错误,哈哈。


请提供更多关于你回答的信息。 - EAS

9

在fragmentShaderCode中,变量vColor的命名(或使用)存在错误。这里您的变量名称为vColor:

uniform vec4 vColor;

这行代码中有一个名为 v_Color 的变量。

gl_FragColor = (v_Color * texture2D(u_Texture, v_TexCoordinate));

请提供更多关于您回答的信息。 - EAS

1

我也会在着色器中更改这个。

  gl_Position = vPosition * uMVPMatrix;

到这个

  gl_Position = uMVPMatrix * vPosition;

当尝试翻译图像位置时,这将产生影响。


1

尝试使用以下纹理坐标:

final float[] cubeTextureCoordinateData = {
0.5,-0.5, 0.5,0.5, -0.5,0.5, -0.5,-0.5 };

它有效了。非常感谢。


0
解决方案可能就是在分配VertexAttribPointer之前启用mTextureCoord...,这很简单。

解决了!原来我的问题是在顶点着色器中缺少了一个分号。 - Strifex

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接