GL_ARRAY_BUFFER是什么?

GL_ARRAY_BUFFER 是 OpenGL 中用于管理缓冲区对象(Buffer Object)的一个目标类型。它主要用于在 GPU 和 CPU 之间传输顶点相关的数据,如顶点坐标、法线、颜色、纹理坐标等。使用 GL_ARRAY_BUFFER 可以大大提高渲染性能,因为它将数据存储在 GPU 内存中,减少了 CPU 和 GPU 之间的数据传输。

以下是使用 GL_ARRAY_BUFFER 的一些常见函数:

glGenBuffers:生成一个或多个缓冲区对象,并返回它们的标识符。

GLuint buffer;
glGenBuffers(1, &buffer);

glBindBuffer:绑定一个缓冲区对象到指定的目标(如 GL_ARRAY_BUFFER)。

glBindBuffer(GL_ARRAY_BUFFER, buffer);

glBufferData:将数据分配给绑定到指定目标的缓冲区,并设置其使用方式(如 GL_STATIC_DRAW)。

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glBufferSubData:更新绑定到指定目标的缓冲区的一部分数据。

glBufferSubData(GL_ARRAY_BUFFER, offset, sizeof(newData), newData);

glDeleteBuffers:删除一个或多个缓冲区对象。

glDeleteBuffers(1, &buffer);

glVertexAttribPointer:定义顶点属性指针,如顶点坐标、法线、颜色等。

glVertexAttribPointer(attribLocation, 3, GL_FLOAT, GL_FALSE, 0, 0);

glEnableVertexAttribArray:启用指定顶点属性。

glEnableVertexAttribArray(attribLocation);

glDisableVertexAttribArray:禁用指定顶点属性。

glDisableVertexAttribArray(attribLocation);

除了 GL_ARRAY_BUFFER 外,还有其他类型的缓冲区目标,例如:

GL_ELEMENT_ARRAY_BUFFER:用于存储顶点索引数据,通常与 glDrawElements 函数一起使用。
GL_PIXEL_PACK_BUFFERGL_PIXEL_UNPACK_BUFFER:用于像素数据的读取和传输,例如在纹理上传和帧缓冲区读取操作中。
GL_UNIFORM_BUFFER:用于传输 Uniform 数据,可以在多个着色器程序之间共享 Uniform 数据。
这些缓冲区目标类型的使用方式与 GL_ARRAY_BUFFER 类似,它们都通过 glGenBuffers、glBindBuffer、glBufferData 等函数进行操作。不同类型的缓冲区目标主要根据它们的用途和与 OpenGL 中其他功能的交互方式来区分。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于学习oak必备的库,另加一个实例源码: <html lang="zh-CN"> <head> <title>WebGL中文教程 - 由HiWebGL翻译整理,感谢Oak3D提供图形库支持!</title> <meta charset="UTF-8" /> [removed][removed] [removed] precision mediump float; void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } [removed] [removed] attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } [removed] [removed] var gl; function initGL(canvas) { try { gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) { } if (!gl) { alert("Could not initialise WebGL, sorry :-("); } } function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null; } var str = ""; var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; } var shader; if (shaderScript.type == "x-shader/x-fragment") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type == "x-shader/x-vertex") { shader = gl.createShader(gl.VERTEX_SHADER); } else { return null; } gl.shaderSource(shader, str); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(gl.getShaderInfoLog(shader)); return null; } return shader; } var shaderProgram; function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Could not initialise shaders"); } gl.useProgram(shaderProgram); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); } var mvMatrix; var pMatrix; function setMatrixUniforms() { gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray()); gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray()); } var triangleVertexPositionBuffer; var squareVertexPositionBuffer; function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4; } function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); pMatrix = okMat4Proj(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0); mvMatrix = okMat4Trans(-1.5, 0.0, -7.0); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); mvMatrix = okMat4Trans(1.5, 0.0, -7.0); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); } function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); drawScene(); } [removed] </head> <body WebGL中文教程,由HiWebGL翻译整理,感谢<a href="http://www.oak3d.com">Oak3D</a>提供图形库支持!<br/> <a href="http://www.hiwebgl.com/?p=93"><< 回到Lesson 1</a><br /> <canvas id="lesson01-canvas" none;" width="500" height="500"></canvas> <br/> <a href="http://www.hiwebgl.com/?p=93"><< 回到Lesson 1</a><br /> [removed][removed]<noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/2578423/tongji.gif"/></a></noscript> </body> </html>
要绘制圆形,可以使用三角扇或三角形条带来逼近圆形。以下是使用三角扇绘制圆形的示例代码: ``` void drawCircle() { const int numSegments = 32; // 圆形的线段数 const float radius = 1.0f; // 圆形半径 // 顶点坐标和颜色数组 GLfloat vertices[(numSegments + 2) * 3]; GLfloat colors[(numSegments + 2) * 3]; // 圆心点 vertices[0] = 0.0f; vertices[1] = 0.0f; vertices[2] = 0.0f; colors[0] = 1.0f; colors[1] = 1.0f; colors[2] = 1.0f; // 计算圆周上的点的坐标和颜色 for (int i = 0; i <= numSegments; i++) { float angle = i * 2.0f * M_PI / numSegments; int offset = (i + 1) * 3; vertices[offset] = cos(angle) * radius; vertices[offset + 1] = sin(angle) * radius; vertices[offset + 2] = 0.0f; colors[offset] = 1.0f; colors[offset + 1] = 1.0f; colors[offset + 2] = 1.0f; } // 绘制三角扇 glBindBuffer(GL_ARRAY_BUFFER, buffer[VERTICES]); glBufferData(GL_ARRAY_BUFFER, sizeof(vertices) + sizeof(colors), NULL, GL_STATIC_DRAW); glBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(vertices), vertices); glBufferSubData(GL_ARRAY_BUFFER, sizeof(vertices), sizeof(colors), colors); glVertexPointer(3, GL_FLOAT, 0, 0); glColorPointer(3, GL_FLOAT, 0, (void*)(sizeof(vertices))); glDrawArrays(GL_TRIANGLE_FAN, 0, numSegments + 2); } ``` 注意到圆形的顶点数是固定的,因此在画圆形时不需要使用索引缓冲区。在顶点坐标和颜色数组中,第一个顶点是圆心,其它顶点按逆时针顺序排列在圆周上。最后使用 `glDrawArrays` 函数绘制三角扇即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值