《WebGL编程指南》的第三章用了两天看完,现将看完之后的总结和心得写下来!
- 三维模型的基本组成部分就是三角形。
一、绘制多个点
WebGL提供了
缓冲区对象(Buffer Object),可以一次性的向缓冲区内传入多个顶点数据。例如下面在同时绘制三个点的时候,就用到了缓冲区对象。
function main()
{
}
function initVertexBuffers(gl)
{
}
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//将缓冲区绑定到目标
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);//向缓冲区对象中写入数据
gl.vertexAttribPointer(Points, 2, gl.FLOAT, false, 0, 0);//将缓冲区对象分配给Points变量
gl.enableVertexAttribArray(Points);//连接Points变量与分配给他的缓冲区对象
|
创建缓冲区》》绑定缓冲区对象》》将数据写入缓冲区》》将缓冲区对象分配给一个attribute变量》》启用attribute变量。
一、移动、旋转、缩放
- 移动
为了将目标移动,只需要在顶点着色器中为顶点坐标的每个分量都加上需要移动的数值即可。
首先在顶点着色器中添加相应代码:
........
//将移动距离传递给顶点着色器
var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
gl.uniform4f(u_Translation, x, y, z, 0.0);
|
-
旋转
旋转稍微复杂,需要自己进行空间关系的计算,之后在程序里写出来,这里只给出代码:
//将旋转需要的数据传递给顶点着色器
|