[OpenGL]从零开始写一个Android平台下的全景视频播放器——3.2 使用OpenGL ES 2.0绘制一个球

Github项目地址

为了方便没有准备好梯子的同学，我把项目在CSDN上打包下载，不过更新会慢一些

回到目录

如何用OpenGL绘制一个球呢？其实方法很多，网上一搜就能搜到一大把。

坐标系

要想知道怎么画，当然要把坐标系先搞清楚啦，上图：

这是世界坐标（看懂这张图需要一定想象力），Y轴是和重力方向相反的，X轴和水平面齐平，我们（相机）站在Z轴上，观察点是在球内的。

这是世界坐标（3D）对应的纹理坐标（2D），不过我们现在还不需要考虑这个，等第五章再来讨论纹理映射的事。

原理

绘制球的原则其实和绘制平面并没有什么区别，那么球的坐标要如何表示呢？我们知道三角形是OpenGL的基本形状，所以我们就将球面划分成许多个三角形，当我们划分的个数足够多时，整个球看起来就比较圆润了，像这样：

最后一张图是用矩形表示的终极形状（是不是很像一个地球仪），我们还需要把矩阵切分成两个三角形进行绘制。

坐标推导公式就不上了，估计也没人看，直接上代码吧。

下面是一张百度上爬来的图（坐标系标的不符合我们的要求，凑合着看吧）：

题外话

在贴出球的代码之前，我们先将之前绘制平面视频的代码块提取出来，像这样：

package com.martin.ads.panoramaopengltutorial;

import android.opengl.GLES20;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import static com.martin.ads.panoramaopengltutorial.ShaderUtils.checkGlError;

public class Plain {
    private final FloatBuffer mVerticesBuffer;
    private FloatBuffer mTexCoordinateBuffer;

    private final float[] vertexData = {
            1f,-1f,0f,
            -1f,-1f,0f,
            1f,1f,0f,
            -1f,1f,0f
    };
    private final float[] textureVertexData = {
            1f,0f,
            0f,0f,
            1f,1f,
            0f,1f
    };
    public Plain() {
        mVerticesBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(vertexData);
        mVerticesBuffer.position(0);

        mTexCoordinateBuffer = ByteBuffer.allocateDirect(textureVertexData.length * 4)
                .order(ByteOrder.nativeOrder())
                .asFloatBuffer()
                .put(textureVertexData);
        mTexCoordinateBuffer.position(0);
    }

    public void uploadVerticesBuffer(int positionHandle){
        FloatBuffer vertexBuffer = getVerticesBuffer();
        if (vertexBuffer == null) return;
        vertexBuffer.position(0);

        GLES20.glVertexAttribPointer(positionHandle, 3, GLES20.GL_FLOAT, false, 0, vertexBuffer);
        checkGlError("glVertexAttribPointer maPosition");
        GLES20.glEnableVertexAttribArray(positionHandle);
        checkGlError("glEnableVertexAttribArray maPositionHandle");
    }

    public void uploadTexCoordinateBuffer(int textureCoordinateHandle){
        FloatBuffer textureBuffer = getTexCoordinateBuffer();
        if (textureBuffer == null) return;
        textureBuffer.position(0);

        GLES20.glVertexAttribPointer(textureCoordinateHandle, 2, GLES20.GL_FLOAT, false, 0, textureBuffer);
        checkGlError("glVertexAttribPointer maTextureHandle");
        GLES20.glEnableVertexAttribArray(textureCoordinateHandle);
        checkGlError("glEnableVertexAttribArray maTextureHandle");
    }


    public FloatBuffer getVerticesBuffer() {
        return mVerticesBuffer;
    }

    public FloatBuffer getTexCoordinateBuffer() {
        return mTexCoordinateBuffer;
    }

    public void draw() {
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
    }

}

为什么要这样做呢？因为就像之前说的，绘制平面和绘制球体并没有本质的区别，所以我们完全可以抽象出一个类，只要把Plain换成Sphere，我们就完成了绘制模式的转变。

球体绘制

package com.martin.ads.panoramaopengltutorial;

import android.opengl.GLES20;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.nio.ShortBuffer;

import static com.martin.ads.panoramaopengltutorial.ShaderUtils.checkGlError;

public class SphereNoTexture {

    private static final int sPositionDataSize = 3;

    private FloatBuffer mVerticesBuffer;
    private ShortBuffer indexBuffer;
    private int mNumIndices;

    public SphereNoTexture(float radius, int rings, int sectors) {
        final float PI = (float) Math.PI;
        final float PI_2 = (float) (Math.PI / 2);

        float R = 1f/(float)rings;
        float S = 1f/(float)sectors;
        short r, s;
        float x, y, z;

        int numPoint = (rings + 1) * (sectors + 1);
        float[] vertexs = new float[numPoint * 3];
        short[] indices = new short[numPoint * 6];

        //矩形的四个点
        int t = 0, v = 0;
        for(r = 0; r < rings + 1; r++) {
            for(s = 0; s < sectors + 1; s++) {
                x = (float) (Math.cos(2*PI * s * S) * Math.sin( PI * r * R ));
                y = (float) Math.sin( -PI_2 + PI * r * R );
                z = (float) (Math.sin(2*PI * s * S) * Math.sin( PI * r * R ));

                vertexs[v++] = x * radius;
                vertexs[v++] = y * radius;
                vertexs[v++] = z * radius;
            }
        }

        //球体绘制坐标索引，用于  glDrawElements
        int counter = 0;
        int sectorsPlusOne = sectors + 1;
        for(r = 0; r < rings; r++){
            for(s = 0; s < sectors; s++) {
                indices[counter++] = (short) (r * sectorsPlusOne + s);       //(a)
                indices[counter++] = (short) ((r+1) * sectorsPlusOne + (s));    //(b)
                indices[counter++] = (short) ((r) * sectorsPlusOne + (s+1));  // (c)
                indices[counter++] = (short) ((r) * sectorsPlusOne + (s+1));  // (c)
                indices[counter++] = (short) ((r+1) * sectorsPlusOne + (s));    //(b)
                indices[counter++] = (short) ((r+1) * sectorsPlusOne + (s+1));  // (d)
            }
        }

        // initialize vertex byte buffer for shape coordinates
        ByteBuffer bb = ByteBuffer.allocateDirect(
                // (# of coordinate values * 4 bytes per float)
                vertexs.length * 4);
        bb.order(ByteOrder.nativeOrder());
        FloatBuffer vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(vertexs);
        vertexBuffer.position(0);

        // initialize byte buffer for the draw list
        ByteBuffer dlb = ByteBuffer.allocateDirect(
                // (# of coordinate values * 2 bytes per short)
                indices.length * 2);
        dlb.order(ByteOrder.nativeOrder());
        indexBuffer = dlb.asShortBuffer();
        indexBuffer.put(indices);
        indexBuffer.position(0);

        mVerticesBuffer=vertexBuffer;
        mNumIndices=indices.length;
    }

    public void uploadVerticesBuffer(int positionHandle){
        FloatBuffer vertexBuffer = getVerticesBuffer();
        if (vertexBuffer == null) return;
        vertexBuffer.position(0);

        GLES20.glVertexAttribPointer(positionHandle, sPositionDataSize, GLES20.GL_FLOAT, false, 0, vertexBuffer);
        checkGlError("glVertexAttribPointer maPosition");
        GLES20.glEnableVertexAttribArray(positionHandle);
        checkGlError("glEnableVertexAttribArray maPositionHandle");
    }

    public FloatBuffer getVerticesBuffer() {
        return mVerticesBuffer;
    }

    public void draw() {
        indexBuffer.position(0);
        GLES20.glDrawElements(GLES20.GL_TRIANGLES, mNumIndices, GLES20.GL_UNSIGNED_SHORT, indexBuffer);
    }
}

和之前绘制平面的代码对比一下，除了构造函数以外，是不是满满的套路。。

public SphereNoTexture(float radius, int rings, int sectors)

我们给构造函数传入半径，纬度切分数，经度切分数，一般sectors应该是rings的两倍（当然不是也看不出明显的区别），我们按照经纬度切分出多个矩形，然后把矩形再划分成两个小的三角形（使用下标索引的方式）

为什么还要rings + 1呢（sector类似），因为我们的最后矩形的右边界还应该和第一个矩形的左边界重合。

除了上面所说的，球体的绘制还有很多需要注意的小细节，大家可以对着代码慢慢揣摩

因为我们还没有做纹理映射，方便起见，我们将球的颜色设置为白色。
如果我们已经设置好了MVP矩阵（第五章），那么我们就能看到这样子的一个球：

呵呵，这真的是一个球，不是个圆啊！！！算了，加点噪声好了，这样明显一些：

当然，如果用棋盘纹理来表示也是棒棒哒（虽然这不是重点）：

Github项目地址
回到目录