这篇主要是通过VBO对象
存储多个顶点数据,绘制多个点。
在OpenGL(入门笔记)--图形渲染管线Graphics Pipeline文章中,我们了解到使用VBO对象的好处。
- 学习目标:
-
VBO对象的创建和使用; 注:VBO的生成需要使用一维数组;
在webgl中VBO创建和使用
- 关键函数:
-
gl.createBuffer(); --创建buffer对象;
-
gl.bindBuffer(gl.ARRAY_BUFFER,VBO); -- 绑定顶点缓冲 --ARRAY_BUFFER是顶点缓冲类型;
-
gl.bufferData(gl.ARRAY_BUFFER,sizeof); 配置当前绑定的缓冲VBO; -- 把用户定义的数据 复制到 当前绑定缓冲的函数。
参数:
-
目标缓冲类型;
-
传输数据的大小(字节为单位);
-
实际数据;
-
指定显卡如何管理给定的数据;
- GL_STATIC_DRAW:数据几乎不变;
- GL_DYNAMIC_DRAW:数据会被改变很多;
- GL_STREAM_DRAW:数据每次 绘制时都会改变;
-- 顶点数据储存在显卡的内存--
-
-
链接顶点属性 gl.vertexAttribPointer();
-
开启顶点缓存对象 gl.enableVertexAttribArray(0);
function webgl() { const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl'); if (!gl) { return; } //顶点数据 --VBO对象 const vertexData = new Float32Array([ 0.0, 0.0, 0.5, 0.0, 0.0, 0.5 ]) const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); // vec4 向量浮点数 const VertexSource = ` attribute vec4 a_pos; void main(){ gl_Position=a_pos; gl_PointSize=10.0; } `; //在片段着色器上,float没有默认的精度限定符 //precision 指定默认精度 const FragmentSource = ` precision lowp float; uniform vec4 u_color; void main(){ gl_FragColor=vec4(u_color); } `; const shaderProgram = initShaders(gl, VertexSource, FragmentSource); //--激活着色器程序(使用着色器程序 ) gl.useProgram(shaderProgram); //通知WEBGL那个VBO和那个attribute变量相关联 const a_pos = gl.getAttribLocation(shaderProgram, "a_pos"); gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 0.0, 0.0); gl.enableVertexAttribArray(0);//开启 -- 顶点缓存对象 const u_color = gl.getUniformLocation(shaderProgram, "u_color"); gl.uniform4fv(u_color, [0.0, 1.0, 0.0, 1.0]); //绘制 --指定图元 gl.drawArrays(gl.TRIANGLES, 0, 3); } webgl();
-