14

我是OpenGL ES 2 的新手,我已经阅读了许多关于如何在 Android 上的 OpenGL ES 2 中绘制圆的主题。基于Draw Shapes在 gamedev.net 上找到的这段代码,我可以画三角形和正方形,但我仍然不知道如何画圆。我现在有三种画圆的方法:

  1. 在圆形中生成顶点并使用 glDrawArray( GL_LINES, ... )。根据您生成的顶点数量,这将产生一个漂亮而清晰的结果。
  2. 使用预先生成的圆形纹理(具有 alpha 透明度)并将其映射到四边形上。这将产生非常平滑的图形并允许一个“厚”的圆圈,但它不会那么灵活:即使使用 mipmapping,您也会希望您的纹理与渲染四边形的大小大致相同。
  3. 使用片段着色器。

但是我该如何实现它们呢?

4

5 回答 5

20

我绝对不建议通过几何图形渲染一个圆。它有两个主要缺点:

  1. 它很慢。如果你想获得可接受的精度,你需要很多顶点,并且这些顶点中的任何一个都需要在着色器中进行处理。对于一个真正的圆,您需要的顶点数与圆的像素数一样多。
  2. 它不是很灵活。拥有不同的圈子、样式和颜色很难掌握。

还有另一种方法,我个人在每个图形 API 中都使用它。至少渲染一个三角形或正方形/四边形,并使用片段着色器仅使不期望的(基于方程)像素可见。这很容易理解。它灵活且快速。它需要混合,但这并不难开始工作。

脚步:

用数据初始化缓冲区。您需要一个顶点缓冲区,如果您使用方形几何图形,则需要一个索引缓冲区,以及纹理坐标的纹理坐标缓冲区。对于正方形,我建议使用 -1.0 作为最低纹理坐标,1.0 作为最高纹理坐标,因为这样你就可以使用单位圆方程。

在您的片段着色器中,使用如下内容:

if ((textureCoord.x * textureCoord.x) + (textureCoord.y * textureCoord.y) <= 1.0)
{
    // Render colored and desired transparency
}
else
{
    // Render with 0.0 in alpha channel
}

虽然 (textureCoord.x * textureCoord.x) + (textureCoord.y * textureCoord.y) <= 1.0 是不等式,因为您需要一个圆,所以您必须渲染该范围内的每个像素,而不仅仅是边框。您可以更改它,以便它为您提供所需的输出。

就是这样。实现起来不是很复杂,所以我在这里不提供任何基本的渲染代码。您需要的一切都发生在片段着色器中。

于 2014-12-24T11:01:18.417 回答
14

如果要为圆创建几何图形,请执行以下操作:

int vertexCount = 30;
float radius = 1.0f;
float center_x = 0.0f;
float center_y = 0.0f;

// Create a buffer for vertex data
float buffer[] = new float[vertexCount*2]; // (x,y) for each vertex
int idx = 0;

// Center vertex for triangle fan
buffer[idx++] = center_x;
buffer[idx++] = center_y;

// Outer vertices of the circle
int outerVertexCount = vertexCount-1;

for (int i = 0; i < outerVertexCount; ++i){
    float percent = (i / (float) (outerVertexCount-1));
    float rad = percent * 2*Math.PI;

    //Vertex position
    float outer_x = center_x + radius * cos(rad);
    float outer_y = center_y + radius * sin(rad);

    buffer[idx++] = outer_x;
    buffer[idx++] = outer_y;
}

//Create VBO from buffer with glBufferData()

然后您可以使用 glDrawArrays() 进行绘制:

  • GL_LINE_LOOP(仅限轮廓)或
  • GL_TRIANGLE_FAN(填充形状)

.

// Draw circle contours (skip center vertex at start of the buffer)
glDrawArrays(GL_LINE_LOOP, 2, outerVertexCount);

// Draw circle as a filled shape
glDrawArrays(GL_TRIANGLE_FAN, 0, vertexCount);
于 2013-08-09T13:02:35.013 回答
11
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import android.opengl.GLES20;
import android.util.Log;

public class Circle {

private  int mProgram, mPositionHandle, mColorHandle, mMVPMatrixHandle ;
private FloatBuffer mVertexBuffer;
private float vertices[] = new float[364 * 3];
float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };

private final String vertexShaderCode =
        "uniform mat4 uMVPMatrix;" +
        "attribute vec4 vPosition;" +
        "void main() {" +
        "  gl_Position = uMVPMatrix * vPosition;" +
        "}";

    private final String fragmentShaderCode =
        "precision mediump float;" +
        "uniform vec4 vColor;" +
        "void main() {" +
        "  gl_FragColor = vColor;" +
        "}";

Circle(){
    vertices[0] = 0;
    vertices[1] = 0;
    vertices[2] = 0;

    for(int i =1; i <364; i++){
        vertices[(i * 3)+ 0] = (float) (0.5 * Math.cos((3.14/180) * (float)i ));
        vertices[(i * 3)+ 1] = (float) (0.5 * Math.sin((3.14/180) * (float)i ));
        vertices[(i * 3)+ 2] = 0;
    }


    Log.v("Thread",""+vertices[0]+","+vertices[1]+","+vertices[2]);
    ByteBuffer vertexByteBuffer = ByteBuffer.allocateDirect(vertices.length * 4);
    vertexByteBuffer.order(ByteOrder.nativeOrder());
    mVertexBuffer = vertexByteBuffer.asFloatBuffer();
    mVertexBuffer.put(vertices);
    mVertexBuffer.position(0);
    int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
    int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

    mProgram = GLES20.glCreateProgram();             // create empty OpenGL ES Program
    GLES20.glAttachShader(mProgram, vertexShader);   // add the vertex shader to program
    GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program
    GLES20.glLinkProgram(mProgram);  

 }

public static int loadShader(int type, String shaderCode){

    int shader = GLES20.glCreateShader(type);
    GLES20.glShaderSource(shader, shaderCode);
    GLES20.glCompileShader(shader);
    return shader;
}


public void draw (float[] mvpMatrix){

    GLES20.glUseProgram(mProgram);

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

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

    // Prepare the triangle coordinate data
    GLES20.glVertexAttribPointer(mPositionHandle, 3,
                                 GLES20.GL_FLOAT, false,12
                                 ,mVertexBuffer);

    // get handle to fragment shader's vColor member
    mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");



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

    mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");

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



    // Draw the triangle
    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, 364);

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

}

}
于 2013-10-24T06:29:31.710 回答
7

这是上述答案的修改版本。它还包括为圆圈着色的代码。大多数功能都用作OpenGL ES1。注意班级厕所的命名约定,哈哈。如果您还需要我渲染 OpenGL 的其他类的代码,请告诉我。

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.opengles.GL10;

public class Toilet {

    // Circle variables
    int circlePoints = 30;
    float radius = 1.0f;
    float center_x = 0.0f;
    float center_y = 0.0f;

    // Outer vertices of the circle i.e. excluding the center_x, center_y
    int circumferencePoints = circlePoints-1;

    // Circle vertices and buffer variables
    int vertices = 0;
    float circleVertices[] = new float[circlePoints*2];
    private FloatBuffer toiletBuff; // 4 bytes per float

    // Color values
    private float rgbaValues[] = {
               1,     1,  0,     .5f,
               .25f,  0,  .85f,  1,
               0,     1,  1,     1
    };

    private FloatBuffer colorBuff;

    public Toilet()
    {
        // The initial buffer values
        circleVertices[vertices++] = center_x;
        circleVertices[vertices++] = center_y;

        // Set circle vertices values
        for (int i = 0; i < circumferencePoints; i++)
        {
            float percent = (i / (float) (circumferencePoints - 1));
            float radians = (float) (percent * 2 * Math.PI);

            // Vertex position
            float outer_x = (float) (center_x + radius * Math.cos(radians));
            float outer_y = (float) (center_y + radius * Math.sin(radians));

            circleVertices[vertices++] = outer_x;
            circleVertices[vertices++] = outer_y;
        }

        // Float buffer short has four bytes
        ByteBuffer toiletByteBuff = ByteBuffer
                .allocateDirect(circleVertices.length * 4);

        // Garbage collector won't throw this away
        toiletByteBuff.order(ByteOrder.nativeOrder());
        toiletBuff = toiletByteBuff.asFloatBuffer();
        toiletBuff.put(circleVertices);
        toiletBuff.position(0);

        // Float buffer short has four bytes
        ByteBuffer clrBuff = ByteBuffer.allocateDirect(rgbaValues.length * 4);
        // garbage collector wont throw this away
        clrBuff.order(ByteOrder.nativeOrder());
        colorBuff = clrBuff.asFloatBuffer();
        colorBuff.put(rgbaValues);
        colorBuff.position(0);
    }

    // Draw methods
    public void draw(GL10 gl) {

        // Get the front face
        gl.glFrontFace(GL10.GL_CW); // Front facing is clockwise
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

        // Enable color array
        gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

        // Pointer to the buffer
        gl.glVertexPointer(2, GL10.GL_FLOAT, 0, toiletBuff);

        // Pointer to color
        gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuff);

        // Draw hollow circle
        //gl.glDrawArrays(GL10.GL_LINE_LOOP, 1, circumferencePoints);

        // Draw circle as filled shape
        gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, circlePoints);

        gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
        gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
    }
}
于 2014-09-07T17:51:40.497 回答
0

我在'goal's post中注意到的一个主要缺陷:你不能改变圆圈的位置。

这是修复。注意“for”循环中前两行的结尾。

vertices[0] = 0;
vertices[1] = 0;
vertices[2] = 0;

for (int i =1; i <364; i++){
    vertices[(i * 3)+ 0] = (float) (0.5 * Math.cos((3.14/180) * (float)i ) + vertices[0]);
    vertices[(i * 3)+ 1] = (float) (0.5 * Math.sin((3.14/180) * (float)i ) + vertices[1]);
    vertices[(i * 3)+ 2] = 0;
}
于 2013-11-19T22:50:27.273 回答