WebGL自学笔记第三天

绘制多个点

• 三维模型的基本单位是三角形
• 缓冲区对象(buffer object)
  一次性地向着色器传入多个顶点的数据
• 与绘制一个点不同的是需要设置点的坐标信息

1. 创建缓冲区对象 gl.createBuffer()
2. 绑定缓冲区对象 gl.bindBuffer()
3. 将数据写入缓冲区对象 gl.bufferData()
4. 将缓冲区对象分配给一个attribute变量 gl.vertexAttribPointer()
5. 开启attribute变量 gl.enableVertexAttribArray()

• 类型化数组

1. 不支持push和pop
2. 创建唯一方法：new

绘制三角形

• gl.drawArrays(mode, first, count) 强大又灵活的api
  mode参数

1. gl.POINTS 一系列的店
2. gl.LINES 一系列单独的线段，如果点的个数是奇数，最后一个将会忽略
3. gl.LINE_STRIP 一系列连续的线段
4. gl.LINE_LOOP 一系列连续的线段，最后一个点与第一个点相连
5. gl.TRIANGLES 一系列单独的三角形，最后一个或两个将会忽略
6. gl.TRIANGLE_STRIP 一系列连续的三角形
7. gl.TRIANGLE_FAN 后面一个点与前面一条边组成三角形的扇形

核心代码

function initVertexBuffers(gl){
	// 一个特殊的js数组 类型化数组
	var vertices= new Float32Array([
		0.0,0.5,-0.5,-0.5,0.5,-0.5
	]);
	var n = 3; // 点的个数
	// 创建缓冲区对象
	var vertexBuffer = gl.createBuffer();
	if(!vertexBuffer) {
		console.log('Failed to create the buffer object');
		return -1;
	}
	// 将缓冲区对象绑定到目标
	// gl.ARRAY_BUFFER 表示缓冲区包含了顶点的数据
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	// 向缓冲区对象中写入数据 
	// gl.STATIC_DRAW 只向缓冲区写入一次数据，但需要绘制多次
	// gl.STREAM_DRAW 只写入一次，然后绘制若干次
	 // gl.DYNAMIC_DRAW 写入多次并绘制很多次
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
	var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
	// 将缓冲区对象分配给a_Position变量
	// gl.vertexAttrib[1234]f 只能传输一个值
	gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
	// 开启attribute变量
	// 连接a_Position变量与分配给它的缓冲区对象
	gl.enableVertexAttribArray(a_Position);
	return n;
}

相关demo可以在我的公众号【xyzzlky】中回复【WebGL】获取，今日内容在HelloTriangle文件夹中。