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)
效果:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值