How to load a texture onto a circle with OpenGL ES

Question

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

Please describe your problem. Images are a big help to understanding. — Tim, Sep 19 '12 at 18:44
please give me your email. I am unable to post the images here as new users aren't allowed to post any pictures. — Siddharth-Verma, Sep 19 '12 at 19:04
i've posted everything... but now i am not able to analyse that why my texture is not being loaded in a correct manner. — Siddharth-Verma, Sep 19 '12 at 19:24

Tim · Answer 1 · 2012-09-19T19:34:36.917

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.

edited Sep 19 '12 at 19:34

answered Sep 19 '12 at 19:25

Tim

35,413
11
95
121

I appreciate your valuable feedback Tim, so that means i have to write all the 360 co-ordinates? Won't that be a little hectic and non-feasible for me to analyse all the 360 co-ordinates? – Siddharth-Verma Sep 19 '12 at 19:28
How else does it know what part of the texture to map to each vertex? The more standard wawy I would think would be to just use a quad, and use an alpha texture to make the corner invisible, so all that's left is the circle. That would only require 4 vertices and 4 texture coordinates. – shenles Sep 19 '12 at 19:30
@shenles - That is another possibility to just use a texture mapped quad, but it would be good practice for the asker to understand how the texture coordinates work, considering that he has already drawn his circle using a texture fan. – Tim Sep 19 '12 at 19:36
@Tim Thanks for the answer, i shall work on it and acknowledge you further. – Siddharth-Verma Sep 19 '12 at 19:46
@Sid - If it's not working and you like some help, you need to provide more information. As a minimum you need to show your new code, and describe the result, preferably with an image. I would suggest editing your original post and replacing your current code with your latest code. – Tim Sep 24 '12 at 15:19
@Tim the code is the same and i get the same image as the result. Please add some of your valuable code here to tell me about the mistakes that i am currently making it. preferably with an example. If you don't mind spending your valuable time, you can try this code and guide me. – Siddharth-Verma Sep 24 '12 at 17:38
@Sid - I don't understand what you mean 'the code is the same'. I told you that you need to generate texture coordinates for each vertex. But what's up there still just shows the same three texture coordinates that you had originally. You need to assign `textcoordarray` in a loop, generating one texcoord for each vertex. I'm willing to help explain if you are confused, but I'm not going to write code for you. – Tim Sep 24 '12 at 17:54
@Tim Frankly speaking, i am confused. Should i add a for loop just above the ByteBuffer bBuff2?? – Siddharth-Verma Sep 24 '12 at 17:57

How to load a texture onto a circle with OpenGL ES

1 Answers1

Linked