How to load a texture onto a circle with OpenGL ES

问题

I am facing problems on loading a texture onto a circle. My circle is made with a triangle fan. It gives a bad output.

Original Image:

The Result :

My code:

public class MyOpenGLCircle {

    private int points=360;
    private float vertices[]={0.0f,0.0f,0.0f};
    private FloatBuffer vertBuff, textureBuffer;
    float texData[] = null;


    float theta = 0;
    int[] textures = new int[1];
    int R=1;
    float textCoordArray[] = 
        {
            -R, (float) (R * (Math.sqrt(2) + 1)),
             -R, -R,
            (float) (R * (Math.sqrt(2) + 1)), -R
        };
    public MyOpenGLCircle(){

        vertices = new float[(points+1)*3];
        for(int i=0;i<(points)*3;i+=3)
        {       
                //radius is 1/3 
                vertices[i]=(float) ( Math.cos(theta))/3;
                vertices[i+1]=(float) (Math.sin(theta))/3;
                vertices[i+2]=0;
                theta += Math.PI / 90;

        }
        ByteBuffer bBuff=ByteBuffer.allocateDirect(vertices.length*4);    
          bBuff.order(ByteOrder.nativeOrder());
          vertBuff=bBuff.asFloatBuffer();
          vertBuff.put(vertices);
          vertBuff.position(0);


        ByteBuffer bBuff2=ByteBuffer.allocateDirect(textCoordArray.length * 4 * 360);
        bBuff2.order(ByteOrder.nativeOrder());
        textureBuffer=bBuff2.asFloatBuffer();
        textureBuffer.put(textCoordArray);
        textureBuffer.position(0);
    }

    public void draw(GL10 gl){ 
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertBuff);
    gl.glEnable(GL10.GL_TEXTURE_2D);   
    gl.glEnable(GL10.GL_BLEND);
    gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
    gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]); //4
    gl.glTexCoordPointer(2, GL10.GL_FLOAT,0, textureBuffer); //5
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
    gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, points/2);
     }  

    public void loadBallTexture(GL10 gl, Context context, int resource){
        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resource);
        gl.glGenTextures(1, textures, 0);
        gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);
        gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
        GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
        bitmap.recycle();
    }
}

Please help me through this

回答1:

For starters, you need to have the same number of texcoord pairs in your texcoord array as you have vertex tuples in your vertex array.

It looks like you've just got 3 pairs of texture coordinates, and 360 vertices.

You need to have a texcoord array that has 360 texture coordinates in it. Then when the vertices are drawn, vertex[0] gets texcoord[0], vertex[1] gets paired with texcoord[1], etc.

===EDIT===

You just have to define the texture coordinates in a similar manner to how you define your vertices: in a loop using mathematical formulas.

So for example, your first vertex of the triangle fan is at the center of the circle. For the center of your circle, you want the texcoord to reference the center of the texture, which is coordinate (0.5, 0.5).

As you go around the edges, just think about which texture coordinate maps to that part of the circle. So lets assume that your next vertex is the rightmost vertex of the circle, that lies along the same y value as the center of the circle. The texcoord for this one would be (1.0, 0.5), or the right edge of the texture in the vertical middle.

The top vertex of the circle would have texcoord (0.5, 1.0), the leftmost vertex would be (0.0, 0.5), etc.

You can use your trigonometry to fill in the rest of the vertices.

来源：https://stackoverflow.com/questions/12500908/how-to-load-a-texture-onto-a-circle-with-opengl-es