OpenGL ES基础教程，绘制多边形

深藏阁楼爱情的钟 2022-05-20 08:46 222阅读 0赞

<table style="table-layout:fixed;color:rgb(68,68,68);font-family:'Microsoft Yahei', Tahoma, Helvetica, SimSun, sans-serif;font-size:12px;background-color:rgb(255,255,255);"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span style="font-family:'Microsoft Yahei', Tahoma, Helvetica, SimSun, sans-serif;color:#444444;"><span style="font-size:12px;background-color:rgb(255,255,255);">原文转自：<a href="http://www.cnblogs.com/sunnychuh/archive/2011/07/20/2112110.html" rel="nofollow">http://www.cnblogs.com/sunnychuh/archive/2011/07/20/2112110.html</a></span></span> 
    </div> 
    <div> 
     <span style="font-family:'Microsoft Yahei', Tahoma, Helvetica, SimSun, sans-serif;color:#444444;"><span style="font-size:12px;background-color:rgb(255,255,255);">官方网站：<a href="http://www.khronos.org/opengles" rel="nofollow">http://www.khronos.org/opengles</a></span></span> 
    </div> 
    <div> 
     <span style="font-family:'Microsoft Yahei', Tahoma, Helvetica, SimSun, sans-serif;color:#444444;"><span style="font-size:12px;background-color:rgb(255,255,255);">博客链接：<a href="http://www.cnblogs.com/dwinter/" rel="nofollow">http://www.cnblogs.com/dwinter/</a></span></span> 
    </div> 
    <div> 
     <span style="font-family:'Microsoft Yahei', Tahoma, Helvetica, SimSun, sans-serif;color:#444444;"><span style="font-size:12px;background-color:rgb(255,255,255);">安卓巴士：http://www.apkbus.com/android-20521-1-1.html（<a href="http://www.apkbus.com/android-20521-1-1.html" rel="nofollow">文章来源</a>）</span></span> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

一、设置OpenGL ES视图

设置OpenGL视图并不难，Android上也较简单。我们一般只需要2个步骤。

GLSurfaceView

我们要为GLSurfaceView提供一个专门用于渲染的接口

public void  setRenderer(GLSurfaceView.Renderer renderer)

GLSurfaceView.Renderer

GLSurfaceView.Renderer是一个通用渲染接口。我们必须实现下面的三个抽象方法：

// 画面创建

public void onSurfaceCreated(GL10 gl, EGLConfig config)

// 画面绘制

public void onDrawFrame(GL10 gl)

// 画面改变

public void onSurfaceChanged(GL10 gl, int width, int height)

onSurfaceCreated

在这里我们主要进行一些初始化工作，比如对透视进行修正、设置清屏所用颜色等。

onDrawFrame

绘制当前画面

onSurfaceChanged

当设备水平或者垂直变化时调用此方法，设置新的显示比例

案例代码：

public class OpenGLDemo extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) { 
            GLSurfaceView view = new GLSurfaceView(this);
            view.setRenderer(new OpenGLRenderer());
            setContentView(view);
        }
    }

实现renderer需要更多的设置

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
            // 黑色背景
            gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f);
            // 启用阴影平滑（不是必须的）
            gl.glShadeModel(GL10.GL_SMOOTH);
            // 设置深度缓存
            gl.glClearDepthf(1.0f);
            // 启用深度测试
            gl.glEnable(GL10.GL_DEPTH_TEST);
            // 所作深度测试的类型
            gl.glDepthFunc(GL10.GL_LEQUAL);
            // 对透视进行修正
            gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);
        }
    
        public void onDrawFrame(GL10 gl) {
            // 清除屏幕和深度缓存
            gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
        }
    
        public void onSurfaceChanged(GL10 gl, int width, int height) {
            // 设置画面的大小
            gl.glViewport(0, 0, width, height);
            // 设置投影矩阵
            gl.glMatrixMode(GL10.GL_PROJECTION);
            // 重置投影矩阵
            gl.glLoadIdentity();
            // 设置画面比例
            GLU.gluPerspective(gl, 45.0f, (float) width / (float) height, 0.1f,100.0f);
            // 选择模型观察矩阵
            gl.glMatrixMode(GL10.GL_MODELVIEW);
            // 重置模型观察矩阵
            gl.glLoadIdentity();
        }
    }

只要加入这段代码到OpenGLDemo class里就可实现全屏

this.requestWindowFeature(Window.FEATURE\_NO\_TITLE);  
getWindow().setFlags(WindowManager.LayoutParams.FLAG\_FULLSCREEN,  
    WindowManager.LayoutParams.FLAG\_FULLSCREEN);

设置完视图后，即可编译运行，可以看到一个“漂亮”的黑屏 = =！

二、绘制多边形

前面的教程都是关于设置GLSurfaceView.的，接下来的教程将教我们渲染出一个多边形。3D模型用较小的元素创建（点，边，面），他们可以被分别操作。

顶点

在Android中，我们通过float数组定义顶点，并将它放到字节型缓冲区内来获取更好的性能。

下例的代码即为上图所示顶点。

OpenGL ES的很多功能都必须手动的开启和关闭。

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
    // 设置顶点数据，3代表XYZ坐标系
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
    // 关闭顶点设置
    gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

边

面

计算多边形面的时候，一定要注意正确的方向.。因为这将决定哪一面为正面哪一面为背面。 所以我们尽量保证整个项目都使用相同的环绕。

gl.glFrontFace(GL10.GL\_CCW);

控制多边形的正面是如何决定的。在默认情况下，mode是GL\_CCW。

mode的值为：

GL\_CCW 表示窗口坐标上投影多边形的顶点顺序为逆时针方向的表面为正面。

GL\_CW 表示顶点顺序为顺时针方向的表面为正面。

顶点的方向又称为环绕。

gl.glEnable(GL10.GL\_CULL\_FACE);

gl.glCullFace(GL10.GL\_BACK);

剔除多边形的背面，禁用多边形背面上的光照、阴影和颜色计算及操作。

gl.glDisable(GL10.GL\_CULL\_FACE);

多边形

到了绘制面的时候了， 我们使用默认的逆时针环绕。

下例代码将绘制上图多边形。

// 将坐标数组放入字节缓存中
        // (1) 分配缓存，一个short为2个字节，所以要乘以2
        ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);
        // (2) 设置字节处理规则
        ibb.order(ByteOrder.nativeOrder());
        // (3) 转换为short型字符
        ShortBuffer indexBuffer = ibb.asShortBuffer();
        // (4) 放入坐标数组
        indexBuffer.put(indices);
        // (5) 复位
        indexBuffer.position(0);

渲染

是时候弄些玩意儿到屏幕上去了，绘制时我们将用到两个函数

public abstract void glDrawArrays(int mode, int first, int count)

通过我们构造的顶点缓存来绘制顶点

public abstract void glDrawElements(int mode, int count, int type, Buffer indices)

和glDrawArrays类似，但需要直接传入type（索引值的类型，如GL\_UNSIGNED\_SHORT, or GL\_UNSIGNED\_INT），和indices（索引缓存）

两者的共同点是，都必须知道他们需要画什么。怎样渲染图元，有不同方式，为了帮助调试，我们应该了解它们。

Mode：

GL\_POINTS

绘制独立的点到屏幕

GL\_LINE\_STRIP

连续的连线，第n个顶点与第n-1个顶点绘制一条直线

GL\_LINE\_LOOP

和上面相同，但首尾相连

GL\_LINES

各对独立的线段

GL\_TRIANGLES

各个独立的三角形

GL\_TRIANGLE\_STRIP

绘制一系列的三角形，先是顶点 v0, v1, v2, 然后是 v2, v1, v3 (注意规律), 然后v2, v3, v4等。该规律确保所有的三角形都以相同的方向绘制。

GL\_TRIANGLE\_FAN

和GL\_TRIANGLE\_STRIP类似, 但其先绘制 v0, v1, v2, 再是 v0, v2, v3, 然后 v0, v3, v4等。

我认为GL\_TRIANGLES是使用最方便的，所以我们将先使用它。

public class Square {
        // 顶点坐标数组
        private float vertices[] = { -1.0f, 1.0f, 0.0f, // 0, 左上
            -1.0f, -1.0f, 0.0f, // 1, 左下
            1.0f, -1.0f, 0.0f, // 2, 右下
            1.0f, 1.0f, 0.0f, // 3, 右上
        };
        // 连接规则
        private short[] indices = { 0, 1, 2, 0, 2, 3 };
        // 顶点缓存
        private FloatBuffer vertexBuffer;
        // 索引缓存
        private ShortBuffer indexBuffer;
    
    
        public Square() {
            // 一个float为4 bytes, 因此要乘以4
            ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
            vbb.order(ByteOrder.nativeOrder());
            vertexBuffer = vbb.asFloatBuffer();
            vertexBuffer.put(vertices);
            vertexBuffer.position(0);
            // short类型同理
            ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);
            ibb.order(ByteOrder.nativeOrder());
            indexBuffer = ibb.asShortBuffer();
            indexBuffer.put(indices);
            indexBuffer.position(0);
            }
    
        /**
         * 绘制正方形到屏幕
         * 
         * @param gl
         */
        public void draw(GL10 gl) {
            // 逆时针环绕
            gl.glFrontFace(GL10.GL_CCW);
            // 开启剔除功能
            gl.glEnable(GL10.GL_CULL_FACE);
            // 剔除背面
            gl.glCullFace(GL10.GL_BACK);
            // 开启顶点缓存写入功能
            gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
            // 设置顶点
            // size:每个顶点有几个数指描述。
            // type:数组中每个顶点的坐标类型。
            // stride:数组中每个顶点间的间隔，步长（字节位移）。
            // pointer:存储着每个顶点的坐标值。初始值为0
            gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
            gl.glDrawElements(GL10.GL_TRIANGLES, indices.length,
            GL10.GL_UNSIGNED_SHORT, indexBuffer);
            // 关闭各个功能
            gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
            gl.glDisable(GL10.GL_CULL_FACE);
        }
    }

我们必须在OpenGLRenderer类中初始化square

square = new Square();

并在主绘制方法中调用square的绘制方法

public void onDrawFrame(GL10 gl) {
        // 清除屏幕和深度缓存
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
        // 绘制正方形
        square.draw(gl);
    }

如果你现在运行应用，我们又看到了华丽的黑屏，为什么？因为OpenGL ES渲染默认的当前位置为(0,0,0)，窗口的定位也一样。而且OpenGL ES不渲染太靠近窗体定位的东西。解决方法就是移动绘制的位置。

gl.glTranslatef(0, 0, -4);

再次运行应用你将看到该正方形已经被绘制，但是它好像离我们越来越远一样，最后消失了。

OpenGL ES不会在画面之间复位绘制点，所以我们要自己完成。

// 重置当前的模型观察矩阵
    gl.glLoadIdentity();

现在，我们运行应用将会看到一个固定位置的正方形。