webgl缓冲区对象使用详解

已于 2023-01-30 20:14:21 修改
阅读量1.8k 收藏 7
点赞数 7
分类专栏： WebGL 文章标签： webgl
于 2022-12-26 21:19:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37987033/article/details/128438439
版权

文章目录

前言

在webgl中，所有的图形都是由大量点组成的，为了绘制点，每次都需要调用gl.drawArrays()方法，当需要绘制大量三角形、多边形或者几何体时，轮番绘制各个点是非常麻烦的。为此，webgl提供了缓冲区对象功能，它通过在webgl中开辟一块独立的内存区，将需要绘制的顶点数据全部填充至缓冲区内，供顶点着色器使用。

缓冲区对象向着色器传递数据

1 创建缓冲区对象:gl.createBuffer()

在使用缓冲区对象之前，必须先行创建。

gl.createBuffer():创建缓冲区对象，并返回该对象

  • 参数：无

通过gl.createBuffer()创建的缓存区对象可以通过gl.deleteBuffer()销毁

gl.deleteBuffer(buffer):销毁名为buffer的缓冲区对象

  • buffer：待销毁的缓冲区对象

2 绑定缓冲区对象:gl.bindBuffer()

创建缓冲区后需要将创立的缓冲区对象绑定至webgl中的目标上，由于不能直接向缓冲区写入数据，只能向“target”写入数据，必须先进行绑定，这样webgl才可以正确处理其中的内容。

gl.bindBuffer(target，buffer):允许使用名为buffer的缓冲区对象，并将其绑定至目标target上

  • target的枚举如下
    – gl.ARRARY_BUFFER：表示缓冲区对象包含了顶点数据
    – gl.ELEMENT_ARRARY_BUFFER：表示缓冲区对象包含了顶点索引值
  • buffer:gl.createBuffer()所创建的指定缓冲区对象

3 向缓冲区对象写入数据:gl.bufferData()

gl.bufferData()方法用来开辟空间并向缓冲区写入数据

gl.bufferData(target，data，usage):开辟存储空间，向绑定至target的缓冲区对象写入数据

  • target：gl.ARRARY_BUFFER或 者 gl.ELEMENT_ARRARY_BUFFER，与上一步gl.bindBuffer(target，buffer)中的target一样
  • data：写入缓冲区的数据（类型化数组）
  • usage：使用存储在缓冲区的数据的方式，枚举如下：
    – gl.STRTIC_DRAW：向缓冲区在写入一次，需要绘制多次
    – gl.STREAM_FRAW：向缓冲区在写入一次，然后绘制若干次
    – gl.DYNAMIC_DRAW：向缓冲区在写入多次次，并绘制多次

类型化数组

webgl通常会同时绘制大量相同的数据类型，如坐标，颜色等，为了优化性能，webgl根据类型的不同引入了特殊的数据，即类型化数组，gl.bufferData(target，data，usage)传递的data就是类型化数组。浏览器事先知道数组中的数据类型后，处理起来会更有效率。

数组类型每个元素的字节数描述
Int8Array18位整型数
UInt8Array18位无符号整型数
Int16Array216位整型数
UInt16Array216位无符号整型数
Int32Array432位整型数
UInt32Array432位无符号整型数
Float32Array4单精度32位浮点数
Float64Array8双精度64位浮点数

类型化数组通过new关键字创建，不能直接使用[ ]，那样创建出的会是普通数组，也可以通过指定数组长度创建一个空的类型化数组。

let vertices = new Float32Array([
		0.0, 0.5, // 顶点着色器补全为（0.0，0.5，0.0，1.0）
		-0.5, -0.5,
		0.5, -0.5
	])

let vertices = new Float32Array(3)

与js的数据相比，类型化数组也具备一些基本的属性方法，但是不支持push()、pop()

方法、属性描述
get(index)读取索引为index的元素值
set(index, value)把索引为index的元素值设置为value
set(array,offset)从第offset个元素开始将数据array的值填充进去
length获取数组长
BYTES_PER_ELEMENT数组每个元素的字节数

4 将缓冲区对象分配给attribute变量:gl.vertexAttribPointer()

使用gl.vertexAttrib[x]f系列函数可以把attribute的值单个传递给着色器变量，而gl.vertexAttribPointer()方法可以将类型化数组中的所有数据一次性传递给attribute变量。gl.vertexAttribPointer(将整个缓冲区对象（地址）分配给attribute变量

gl.vertexAttribPointer(location, size, type, normalized, stride, offset): 将绑定到gl.ARRARY_BUFFER的缓冲区对象分配给由location指定的attribute变量

  • location：待分配attribute变量的存储位置
  • size：缓冲区中每个顶点分量的个数
  • type：指定数据格式
  • normalized：是否将非浮点型数据归一化为[0,1]或者[-1,1]
  • stride：两个相邻顶点的字节数
  • offset：缓冲区对象在的偏移量，即attribute从何处开始存储，默认为0

gl.vertexAttribPointer(location, size, type, normalized, stride, offset)第三个参数type的枚举及意义如下：

名称描述
gl.UNSIGNED_BYTE无符号字节 Unit8Array
gl.SHORT短整型 Int16Array
gl.UNSIGNED_SHORT无符号短整型 Unit16Array
gl.INT整型 Int32Array
gl.UNSIGNED_INT无符号整型 Unit32Array
gl.FLOAT浮点型

5 开启attribute变量:gl.enableVertexAttribArray()

最后，使用gl.enableVertexAttribArray()使顶点着色器可以访问缓冲区的数据

gl.enableVertexAttribArray(location):将绑定到glARRARY_BUFFER的缓冲区对象分配给由location指定的attribute变量

  • location：attribute变量的存储位置

已经开启的attribute变量同样可以使用gl.disableVertexAttribArray()关闭分配

完整示例

采用上述流程，一口气绘制三个顶点

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>webgl</title>
	<script src="./lib.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		canvas {
			margin: 50px 30px;
			width: 500px;
			height: 500px;
		}
	</style>
</head>

<body>
	<canvas id="canvas"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */
		//------------------------------------------------------创建画布
		// 获取canvas元素对象
		let canvas = document.getElementById('canvas');
		// 获取webgl绘图上下文
		const gl = canvas.getContext('webgl');
		if (!gl) {
			throw new Error('WebGL not supported');
		}

		canvas.width = 500;
		canvas.height = 500;
		gl.viewport(0, 0, canvas.width, canvas.height)

		// 设置背景色
		gl.clearColor(1.0, 1.0, 0.0, 1.0)
		// 清空缓冲区
		gl.clear(gl.COLOR_BUFFER_BIT)

		const vertex = `
			attribute vec4 aPosition;
			void main() {
				gl_Position = aPosition;
				gl_PointSize = 10.0;
			}
		`
		const fragment = `
			precision highp float;
			// uniform vec4 uColor;
			void main(){
				gl_FragColor =vec4(1.0,0.0,1.0,1.0);
			}
		`

		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		// 获取uniform变量的数据存储位置
		// const uColor = gl.getUniformLocation(program, 'uColor');
		// 创建缓冲区对象
		const buffer = gl.createBuffer();
		// 绑定缓冲区对象
		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
		// 传入的数据
		const vertices = new Float32Array([
			0.0, 0.5, // 顶点着色器补全为（0.0，0.5，0.0，1.0）
			-0.5, -0.5,
			0.5, -0.5
		])
		// 开辟空间并写入数据
		gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
		// 缓冲区对象分配给attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
		// 开启attribue变量
    gl.enableVertexAttribArray(aPosition)

    // 开始绘制
    gl.drawArrays(gl.POINTS, 0, 3)
			
	</script>
</body>

</html>

使用缓冲区时webgl会从js代码中获取数据后，逐个进行顶点着色器和片元着色器：
在这里插入图片描述
最终效果如图：
在这里插入图片描述

缓冲区对象传递多组信息

在缓冲区对象中不仅仅可以传递顶点信息，假设我也想同时传递其它信息呢？一个方法是再开辟一个缓冲区并绑定，给他传入代表点大小的数据，但是通过使用gl.vertexAttribPointer(location, size, type, normalized, stride, offset)的最后两个参数可以在一个缓冲区中实现上述功能。

传递坐标与大小绘制点

  • 重新定义写入的数据
const vertices = new Float32Array([
			0.0, 0.5, 20.0, // x坐标 y坐标 点大小
			-0.5, -0.5, 15.0,
			0.5, -0.5, 10.0
		])
  • 更新顶点着色器，加入新的attribute变量
const vertex = `
			attribute vec4 aPosition;
     		 attribute float aPointSize;
			void main() {
				gl_Position = aPosition;
				gl_PointSize = aPointSize;
			}
  • 使用gl.vertexAttribPointer的最后两个参数，将顶点坐标和大小同时写入缓冲区
// 开辟空间并写入数据
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
	// 每个元素的字节数
    const BYTES = vertices.BYTES_PER_ELEMENT;
    // 坐标信息
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 3 * BYTES, 0)
    gl.enableVertexAttribArray(aPosition)
    // 顶点大小信息
    gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, 3 * BYTES, 2 * BYTES)
    gl.enableVertexAttribArray(aPointSize)

    // 开始绘制
    gl.drawArrays(gl.POINTS, 0, 3)

效果如下
在这里插入图片描述

传递坐标与颜色绘制三角形

绘制三角形时，需要将缓冲区中的信息传递给顶点着色器，通过varying关键字将信息传递给片元着色器，由于每个顶点存储有坐标（2）和颜色信息（4）所以gl.vertexAttribPointer函数的倒数第二个参数应该为6*BYTES。核心代码如下：

	const vertex = `
			attribute vec4 aPosition;
      // attribute float aPointSize;
      attribute vec4 aColor;
      varying vec4 v_Color;

			void main() {
				gl_Position = aPosition;
				// gl_PointSize = aPointSize;
        v_Color = aColor;
			}
		`
		const fragment = `
			precision highp float;
			varying vec4 v_Color;
			void main(){
				gl_FragColor = v_Color;
			}
		`
		// 创建program
		const program = initShader(gl, vertex, fragment)
		// 获取attribute变量的数据存储位置
		const aPosition = gl.getAttribLocation(program, 'aPosition');
		// const aPointSize = gl.getAttribLocation(program, 'aPointSize');
   	   const aColor = gl.getAttribLocation(program, 'aColor');
		// 创建缓冲区对象
		const buffer = gl.createBuffer();
		// 绑定缓冲区对象
		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
		// 传入的数据
		const vertices = new Float32Array([
			0.0, 0.5, 1.0, 0.0, 0.0, 1.0, // x坐标 y坐标 r g b a
			-0.5, -0.5, 0.0, 1.0, 0.0, 1.0,
			0.5, -0.5, 0.0, 0.0, 1.0, 1.0
		])
		// 开辟空间并写入数据
		gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
		// 每个元素的字节数
    const BYTES = vertices.BYTES_PER_ELEMENT;

    // 坐标信息
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 6 * BYTES, 0)
    gl.enableVertexAttribArray(aPosition)
    // 顶点大小信息
    // gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, 7 * BYTES, 2 * BYTES)
    // gl.enableVertexAttribArray(aPointSize)
    // yanse信息
    gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 6 * BYTES, 2 * BYTES)
    gl.enableVertexAttribArray(aColor)

    // 开始绘制
    gl.drawArrays(gl.TRIANGLES, 0, 3)

效果如下：
在这里插入图片描述

总结

缓冲区对象向着色器传递数据

  • 创建缓冲区对象:gl.createBuffer()
  • 绑定缓冲区对象:gl.bindBuffer()
  • 向缓冲区对象写入数据:gl.bufferData()
  • 将缓冲区对象分配给attribute变量:gl.vertexAttribPointer()
  • 开启attribute变量:gl.enableVertexAttribArray()

缓冲区对象传递多组信息

  • 重新定义写入的数据
  • 传递坐标与大小绘制点
  • 传递坐标与颜色绘制三角形
迦南giser
关注
专栏目录
【webgl】 buffer的使用
weixin_42910765的博客
07-12 498
webgl提供一种很方便的机制 ，就是缓冲区对象，它可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。如果没有用缓冲区，然后循环遍历 数组列表，位置传递到顶点着色器， 然后去绘制顶点 就像下面代码一样循环一次，绘制一次。 使用缓冲区 第一步：创建缓冲区对象（gl.createBuffer()） // 删除缓冲区对象gl.deleteBuffer(buffer) 第二步：绑定缓冲区
【WebGL】WebGL API 详解
衷于栖
03-26 1787
基于 WebGL Specifications 最全面的API释疑。 类型以及对象定义 这部分内容主要定义一部分类型和数据结构。 typedef unsigned long GLenum; typedef boolean GLboolean; typedef unsigned long GLbitfield; typedef byte GLbyte; typ...
WebGL 2.0 FrameBuffer And RenderBuffer
05-22
在学习WebGL过程中，有一种技术叫二次绘制，就是把每一帧画面再次处理渲染，它能做好多高级效果的实现，如边缘检测，高斯模糊，SSAO等。二次绘制中最重要的就是FBO和RBO,接下来，我们来看看什么是FBO和RBO。 FBO就是由颜色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）组成的一个逻辑存储对象。那RBO是什么呢，RBO是一个2D图像缓冲区，可以用于分配和存储颜色值，深度或者模板值，可以作为FBO的颜色，深度模板附件。
关于UnityWebgl缓存机制
最新发布
weixin_46711336的博客
06-18 893
最近在做UnityWebgl热更的时候，我的热更程序集更新，而我所有运行过项目的设备都没有更新成功。因此，你可以成功写入文件，但这些文件是存在于浏览器的IndexedDB中，而不是本地文件系统中。我这里使用的是HybirdCLR做代码热更，发现这个热更程序集会被浏览器缓存，所以热更后浏览器依然读的是缓存的旧程序集。那么既然我已经可以直接用File读到缓存的文件了，那么说明我也可以去判断程序集是否更新，通过MD5也行、版本控制都可以。3、第二次进入，直接就可以读了，那么说明确实是缓存成功了。
WebGL（五）——WEBGL缓冲区，绘制三角形
qq_51550750的博客
03-18 369
WebGL（五）——WEBGL缓冲区，绘制三角形 在 WebGL（四）—— 第一个WEBGL程序 一篇中，留了一个问题， 像下面这样的写法，字符串拼接真的很让人觉得麻烦： 关于改进： 缓冲区对象 缓冲区对象（buffer object）: 缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。 绘制一个三角形，了解缓冲区对象的使用。 ...
玩转WebGL(四)缓冲区
q641187432的专栏
02-09 1544
1.缓冲区 缓冲区是驻存于内存中的javascript对象,存储着即将推送到着色器中的attribute对象.最常用的attribute对象莫过于记录了空间中点位置信息的aVertexPosition了.缓冲区如同一个长长的队列,着色器每处理完一个顶点(或和顶点对应的其他attribute对象),缓冲区就提供下一个顶点给着色器处理. 上节中,只绘制了一个点,这节来实现一个较为复杂的例子,用webgl来画一个正方形.可以通过4次每次画一个点,画4个点,然后将这4个点连起来就成为了一个正方形,此外如果我们要一次
WebGL中缓冲区对象的使用方法
moonjie444的专栏
08-05 663
使用缓冲区对象向顶点着色器传入多个顶点数据，需要遵循以下五个步骤。 1. 创建缓冲区对象 gl.createBuffer() -- 删除缓冲区对象 gl.deleteBuffer() gl.createBuffer() 创建缓冲区对象，返回创建成功的对象或者 nullgl.deleteBuffer(buffer) 传入缓冲区对象buffer，意为删除缓冲区对象 2. 绑定缓冲区对象 gl.bindBuffer() gl.bindBuffer(target, buffer); target 参数...
webgl的缓冲区有什么用？
weixin_48263065的博客
03-18 666
在用js定点位的时候，肯定是要建立一份顶点数据的，用于给着色器绘图时制作顶点。但是由于着色器与js语言并不通，为了解决这个问题，webgl 系统就建立了一个能翻译双方语言的缓冲区。js 可以用特定的方法把数据存在这个缓冲区中，着色器可以从缓冲区中拿到相应的数据。 接下来咱们就看一下这个缓冲区是如何建的，着色器又是如何从其中拿数据的。 1. 建立顶点数据，两个浮点数构成一个顶点，分别代表x、y 值。 const vertices=new Float32Array([ //x y ..
WebGL中的深度缓冲和深度测试机制详解
# 1. 简介 #### 1.1 WebGL的基本概念和作用 WebGL（Web Graphics Library）是一种用于在...WebGL通过使用的顶点缓冲区、着色器和纹理等概念来构建3D图形。它能够利用GPU的计算能力来进行高性能的图形渲染，使得在We
webgl坐标转换_WebGL绘制详解之六：Depth Buffer
weixin_35955473的博客
01-13 436
在这小节中，我们来看另一个Buffer：Depth Buffer(深度缓冲区)，你将了解到：深度缓冲区的作用和原理深度缓冲区的用法深度缓冲区的实际运用作用和原理在观察三维世界的时候，物体之间总会存在前后的遮挡关系，既然是3D渲染，那么渲染出的场景也应该和实际情况一样：靠近眼睛的物体会遮挡远离眼睛的物体。深度缓冲区就是用来实现这个效果的。当启用深度检测的时候，WebGL会将深度信息(深度信息位于Z轴...
D3D顶点缓冲区和索引缓冲区详解
通过使用顶点缓冲区，我们可以将一组顶点数据传递给图形硬件，从而实现高效的渲染。 索引缓冲区则用于存储顶点的索引数据，用于确定三角形、线段或点的连接方式，构建更复杂的图形形状。通过索引缓冲区，我们可以...
【Unity】开发WebGL内存概念详解和遇到的问题
热门推荐
天生爱赞美的博客
03-01 1万+
自加入unity WebGL平台以来，Unity的开发团队就一直致力于优化WebGL的内存消耗。我们已经在Unity使用手册上有对于WebGL内存管理的详尽分析，甚至在Unite Europe 2015与Unite Boston 2015两届大会上，也有专题对其进行深入的讲解。然而，这方面的内容依旧是用户讨论的热门话题，因此我们意识到应当分享更多。希望本文能回答一些被频繁咨询的问题。 U
WebGL学习——缓冲区对象（四）
pgLi
05-27 372
缓冲区对象：WebGl提供的一种机制，可以一次性向着色器传入多个顶点数据，我们可以一次性向缓冲器对象中填充大量的顶点数据，然后将这些数据保存起来，供顶点着色器使用。 初始化过程： 创建缓冲器对象 绑定缓冲器对象 将数据写入缓冲区对象 将缓冲区对象分配给一个attribute 开启attribute变量 ...
WebGL缓冲区对象
qq_36245071的博客
10-14 403
简书地址
【WebGL与Graphics的学习之路02】缓冲区与三角形
AY
11-09 178
webgl的缓冲区对象以及绘制三角形
WebGL利用缓冲区绘制三角和矩形（后附three.js写法）
qq_45487080的博客
08-28 528
WebGL利用缓冲区绘制三角形
WebGL使用缓冲区向着色器一次性上传大量数据
qq_20535249的博客
07-14 360
WebGL使用缓冲区向着色器上传数据 1.建 2.绑 3.写 4.配 5.启 //使用顶点缓冲区上传顶点数据 //1.创建 let vertexBuffer = gl.createBuffer(); //2.绑定 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); //3.写入数据 let vertices = new Float32Array([ // 前 -1.0, -1.0, 1.0,
webgl渲染优化——深度缓冲区、多边形缓冲机制
qq_37987033的博客
02-25 1150
webgl在渲染三维场景时，按照Z坐标的值决定前后关系，但是在默认状态下它并未开启深度检测，而是将后绘制的物体放在前面；当两个物体Z坐标相差无几时，会产生深度冲突，两个物体颜色互相影响，使得表面看上去斑斑驳驳，需要开启多边形缓冲来避免此类问题。
10 WebGL的缓冲区对象使用
现在学习也不晚
05-07 6646
前面的方法只能绘制一个点，而不能绘制多个顶点组成的图形，比如三角形、矩形和立方体，像那些方法我们需要一次性的将图形的顶点全部传入顶点着色器，然后才能把图形画出来。WebGL提供了一种很方便的机制，就是缓冲区对象，它可以一次性向着色器传入多个顶点的数据。缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。案例查看地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值