webgl学习笔记二

写在前面

建议先看下第一篇webgl学习笔记一

第一篇文章,介绍了如何用webgl绘图一个点。接下来本文介绍的是如何绘制多个点。形成一个面。

webgl提供了一种很方便的机制,即缓冲区对象，可以一次性地向着色器传入多个顶点的数据。缓存区对象是webgl系统的一块内存区域。

绘制多个点的流程

这里重点介绍缓冲区对象使用步骤

• 创建缓冲区对象

gl.createBuffer()

• 绑定缓冲区对象

gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

• 将数据写入缓冲区对象

    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

• 将缓冲区对象分配给一个attribute变量

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

• 开启attribute变量

```
gl.enableVertexAttribArray(a_Position);

```

demo

-html

• Javascript