OpenGL ES2学习笔记（7）-- 三角形

前面两篇文章介绍了怎样用OpenGL绘制点和线段，这篇文章来看看怎样绘制三角形。

绘制三角形

把下面的代码复制到OpenGL Console里：

import java.nio.ByteBuffer
import java.nio.ByteOrder
import javax.media.opengl.GL

def vertexShaderCode = """
  attribute vec4 a_Position;

  void main() {                              
    gl_Position = a_Position;
    gl_PointSize = 10.0;
  }
"""

def fragmentShaderCode = """
  precision mediump float; 

  void main() {
    gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
  }
"""

def shaderProgram = glob.compileAndLink(vertexShaderCode, fragmentShaderCode)
def aPositionLocation = gl.glGetAttribLocation(shaderProgram.objectId, "a_Position")
shaderProgram.use()


def BYTES_PER_FLOAT = 4
def POSITION_ELEMENT_COUNT = 2
def POINT_COUNT = 3

def vertices = [
  0.0f, 0.0f,
  0.5f, 0.0f,
  0.0f, 0.5f,
] as float[]

def vertexData = ByteBuffer
        .allocateDirect(vertices.length * BYTES_PER_FLOAT)
        .order(ByteOrder.nativeOrder())
        .asFloatBuffer()
vertexData.put(vertices)
vertexData.position(0)
gl.glVertexAttribPointer(aPositionLocation,
        POSITION_ELEMENT_COUNT, gl.GL_FLOAT, false, 0, vertexData)
gl.glEnableVertexAttribArray(aPositionLocation)


gl.glClear(gl.GL_COLOR_BUFFER_BIT)
gl.glDrawArrays(gl.GL_TRIANGLES, 0, POINT_COUNT)

点击Run Script按钮看效果：

代码解释

def vertices = [
  0.0f, 0.0f,
  0.5f, 0.0f,
  0.0f, 0.5f,
] as float[]

三个点（只有x和y坐标），正好构成一个三角形。

gl.glDrawArrays(gl.GL_TRIANGLES, 0, POINT_COUNT)

GL_TRIANGLES告诉 glDrawArrays()方法我们要绘制的是三角形，POINT_COUNT参数说明一共有3个点需要处理。

Triangle Strip

如果只是简单的画三角形的话，每个三角形需要三个点。但如果几个三角形连在一起的话，就可以形成Triangle Strip。比如像下面这样的4个三角形，画成普通三角形需要12个点（nx3），画成Triangle Strip只需要6个点（n+2）就够了。

修改上面的代码：

...
def POINT_COUNT = 6
def vertices = [
  0.0f, 0.0f,
  0.1f,-0.4f,
  0.2f, 0.0f,
  0.3f,-0.4f,
  0.4f, 0.0f,
  0.5f,-0.4f,
] as float[]
...
gl.glDrawArrays(gl.GL_TRIANGLE_STRIP, 0, POINT_COUNT)

效果：

Triangle Fan

几个三角形还可以组成像下面这样的扇形：

修改代码：

...
def POINT_COUNT = 5
def vertices = [
  0.0f, 0.0f,
 -0.2f, 0.4f,
 -0.1f, 0.5f,
  0.1f, 0.5f,
  0.2f, 0.4f,
] as float[]
...
gl.glDrawArrays(gl.GL_TRIANGLE_FAN, 0, POINT_COUNT)

效果：