如何显示在2D背景位图 [英] How to show background bitmap on 2D

问题描述

背景原始位像这样的真实效果：

The background original bitmap and the real effect like this:

href=\"http://i.stack.imgur.com/AxYBj.png\" rel=\"nofollow\">

这是我第一次使用OpenGL ES 2.0。我不知道为什么，并在我的问题。也许有些错误的发生方向。我的code：

This is my first time use Opengl ES 2.0. I don't know why and where my the problem is. Maybe some wrong happens in direction. My code:

public class BackgroundGLRnder implements GLSurfaceView.Renderer
{
    // Our matrices
    private final float[] mtrxProjection = new float[16];
    private final float[] mtrxView = new float[16];
    private final float[] mtrxProjectionAndView = new float[16];

    // Geometric variables
    private  float vertices[];
    private static float  uvs[] = new float[] {
        0.0f, 0.0f,
        0.0f, 1.0f,
        1.0f, 1.0f,
        1.0f, 0.0f
    };
    private static short indices[] = new short[]{ 0,  1,  2,  0,  2,  3};


    private FloatBuffer vertexBuffer;
    private ShortBuffer drawListBuffer;
    private FloatBuffer uvBuffer;

    // Our screenresolution
    private float   mScreenWidth = 1280;
    private float   mScreenHeight = 768;

    // Misc
    private Context mContext;
    private int mProgramHandle;
    private int mTextureDataHandle0;

    /** This will be used to pass in the transformation matrix. */
    private int mMVPMatrixHandle;

    /** This will be used to pass in the texture. */
    private int mTextureUniformHandle0;

    /** This will be used to pass in model position information. */
    private int mPositionHandle;

    /** This will be used to pass in model color information. */
    // private int mColorHandle;

    /** This will be used to pass in model texture coordinate information. */
    private int mTextureCoordinateHandle;

    public BackgroundGLRnder(Context c)
    {
        mContext = c;
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config)
    {
        SetupImage();
        // Set the clear color to black
        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1);

        final String vertexShader = getVertexShader();
        final String fragmentShader = getFragmentShader();

        final int vertexShaderHandle = ShaderHelper.compileShader(
            GLES20.GL_VERTEX_SHADER,
            vertexShader);
        final int fragmentShaderHandle = ShaderHelper.compileShader(
            GLES20.GL_FRAGMENT_SHADER, fragmentShader);

        mProgramHandle = ShaderHelper.createAndLinkProgram(
            vertexShaderHandle,
            fragmentShaderHandle, new String[] { 
                    "a_Position",
                    "a_TexCoordinate" });

        // Set our per-vertex lighting program.
        GLES20.glUseProgram(mProgramHandle);
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height)
    {
        mScreenWidth = width;
        mScreenHeight = height;

        // Redo the Viewport, making it fullscreen.
        GLES20.glViewport(0, 0, (int) mScreenWidth, (int) mScreenHeight);

        // Clear our matrices
        for(int i=0;i<16;i++)
        {
            mtrxProjection[i] = 0.0f;
            mtrxView[i] = 0.0f;
            mtrxProjectionAndView[i] = 0.0f;
        }

        // Setup our screen width and height for normal sprite translation.
        Matrix.orthoM(mtrxProjection, 0, 0f, mScreenWidth, 0.0f,     mScreenHeight, -1, 1);
    }

    @Override
    public void onDrawFrame(GL10 gl)
    {
        // Set program handles for cube drawing.
        mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgramHandle,
            "u_MVPMatrix");
        mTextureUniformHandle0 = GLES20.glGetUniformLocation(mProgramHandle,
            "u_Texture");
        mPositionHandle = GLES20.glGetAttribLocation(mProgramHandle,     "a_Position");
        mTextureCoordinateHandle = GLES20.glGetAttribLocation(mProgramHandle,
            "a_TexCoordinate");

        // clear Screen and Depth Buffer,
        // we have set the clear color as black.
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);
        GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);

        GLES20.glEnableVertexAttribArray(mPositionHandle);
        GLES20.glEnableVertexAttribArray(mTextureCoordinateHandle);

        GLES20.glVertexAttribPointer(mPositionHandle, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer);
        GLES20.glVertexAttribPointer(mTextureCoordinateHandle, 3, GLES20.GL_FLOAT, false, 0,
            uvBuffer);


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

        /**
         * First texture map
         */
        // Set the active texture0 unit to texture unit 0.
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);

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

        // Set the sampler texture unit to 0, where we have saved the texture.
        GLES20.glUniform1i(mTextureUniformHandle0, 0);

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

        // Disable vertex array
        GLES20.glDisableVertexAttribArray(mPositionHandle);
        GLES20.glDisableVertexAttribArray(mTextureCoordinateHandle);
    }

    private String getVertexShader() {
        return RawResourceReader.readTextFileFromRawResource(mContext, R.raw
                ._vertex_shader);
    }

    private String getFragmentShader() {
        return RawResourceReader.readTextFileFromRawResource(mContext,     R.raw._fragment_shader);
    }

    private void constructVertex(){
        float with = getScreenWidth();
        float heigh = getScreenHeight();

        vertices = new float[]{
           0.0f,0.0f,-1.0f,
           with,0.0f,-1.0f,
           with,heigh,-1.0f,
           0.0f,heigh,-1.0f
        };
    }


    public void SetupImage()
    {
        constructVertex();
        // The vertex buffer.
        ByteBuffer bb = ByteBuffer.allocateDirect(vertices.length * 4);
        bb.order(ByteOrder.nativeOrder());
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(vertices);
        vertexBuffer.position(0);

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

        // The texture buffer
        ByteBuffer uvsbb = ByteBuffer.allocateDirect(uvs.length * 4);
        uvsbb.order(ByteOrder.nativeOrder());
        uvBuffer = uvsbb.asFloatBuffer();
        uvBuffer.put(uvs);
        uvBuffer.position(0);

        // Load the texture
        mTextureDataHandle0 = TextureHelper.loadTexture(mContext,     R.raw.bg_fine_day);
    }

    private  int getScreenWidth() {
        WindowManager wm = (WindowManager)     mContext.getSystemService(Context.WINDOW_SERVICE);
        @SuppressWarnings("deprecation")
        int width = wm.getDefaultDisplay().getWidth();// 屏幕宽度
        return width;
    }

    private  int getScreenHeight() {
        WindowManager wm = (WindowManager)     mContext.getSystemService(Context.WINDOW_SERVICE);
        @SuppressWarnings("deprecation")
        int height = wm.getDefaultDisplay().getHeight();// 屏幕高度
        return height;
    }
}

我不知道为什么。

I don't know why.

推荐答案

当在UV坐标找和顶点坐标，人们可以看到，他们不适合在一起：

When looking at the uv-coordinates and the vertex coordinates, one can see that they do not fit together:

     vertex                    
----------------------------------------------
0.0f,0.0f,-1.0f,               0.0f, 0.0f,
with,0.0f,-1.0f,               0.0f, 1.0f,     <-- vertex: change in x, uv: change in y
with,heigh,-1.0f,              1.0f, 1.0f,
0.0f,heigh,-1.0f               1.0f, 0.0f

此外，你告诉OpenGL在这一行：

In addition, you tell OpenGL in this line:

GLES20.glVertexAttribPointer(mTextureCoordinateHandle, 3, GLES20.GL_FLOAT, false, 0,
uvBuffer);                                             ^

这是你必须每个顶点3 UV坐标，但你只有2。

that you have 3 uv-coordinates per vertex, but you only have 2.

这篇关于如何显示在2D背景位图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！