WebGL05

之前小节我已经了解点的绘制、GLSL语法、内置变量和写法，我们接下来就要深入了解关于缓冲区对象相关知识，用于绘制线和面。

3D图形的基本单位就是三角形，也就是说三角形是所有面和3D图形的基础。

缓冲区对象

gl.drawArrays gl.POINTS绘制单个点

  • gl.LINE_STRIP
  • gl.LINE_LOOP
  • gl.TRIANGLES 缓冲区对象可以传入多个顶点数据，通过绘制一次绘制多个顶点。
  • 定义Float32Array类型的数据
  • 将js数组传递存储在缓冲区对象中
  • 使用gl.drawArrays绘制，顶点、片元着色可以从缓冲区读取数据。

使用WebGL的缓冲区

  • gl.createBuffer 创建缓冲区对象
  • gl.bindBuffer 绑定缓冲区对象 参数（target）
  • gl.bufferData 写入缓冲区数据
  • gl.vertexAttribPointer 将缓冲区数据分配到attribute变量
  • gl.enableVertexAttribArray 开启attribute变量

绑定缓冲区对象

第一个target参数

  • gl.ARRAY_BUFFER 包含顶点属性的Buffer 坐标数据、颜色数据
  • gl.ELEMENT_ARRAY_BUFFER 包含顶点的索引值 Buffer 第二个参数 —— buffer
// 第一个参数 target；第二个参数 buffer
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

当前我们就将创建的缓冲区绑定到这个gl.ARRAY_BUFFER target上了。

缓冲区写入数据 bufferData(target, srcData, usage)

  • 第三个参数usage 目前使用gl.STATIC_DRAW(数据写入缓冲区，可以用于多次绘制) 类型化数组，为了优化WebGL的渲染性能。 创建对应绘制线、三角的坐标数据
// 成对放置顶点数据 [<x, y>, <x, y>]
const vertices = new Float32Array([
  0., .8, -.6, -.6, .6, -.6
])
// 写入缓冲区
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

分配缓冲区数据给 attribute

使用 gl.vertexAttribPointer api将整个数组顶点数据进行传递。其作用就是将绑定到gl.ARRAY_BUFFER缓冲区对象数据传递到顶点着色器中的attribute变量。

gl.vertexAttribPointer(index, size, type, normalized, stride, offset)
  • index attribute变量
  • size 分配到每个顶点的缓冲区数据的个数 范围[1-4]

因为我们的顶点变量是 vec4 类型的数据,如果这个值为1，那剩下的数据将会进行一个补 0，最后一个值补 1。

// 第一个参数顶点着色器的 attribute 变量 a_Position，第二个参数值是 2
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

目前我们已经将缓冲区的数据分配到attribute变量中，但是顶点着色器还无法访问到缓冲区的数据。

开启 attribute 变量

gl.enableVertexAttribArray 开启attribute变量 现在我们缓冲区创建和激活流程都完成了，我们的顶点着色器可以使用分配到attribute变量中缓冲区的数据了。

绘制线和三角

const vertexCode = ` // 待分配缓冲区的 attribute 变量 attribute vec4 a_Position;

void main () { gl_Position = a_Position; } `

const fragmentCode = void main () { // 颜色固定为蓝色 gl_FragColor = vec4(0.0, 0.0, 0.9, 1.0); }

  1. gl.LINE_STRIP 绘制到下一个顶点的直线
  2. gl.TRIANGLES 为三个点绘制一个三角形
// 绘制直线
gl.drawArrays(gl.LINE_STRIP, 0, 3)
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3)

写在最后

未完待续…
希望大家好好生活，健康快乐。