【愚公系列】2023年12月 WEBGL专题-缓冲区对象_js 缓冲数据 new float32array-程序员宅基地

在这里插入图片描述

作者简介，愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，程序员宅基地专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。
《近期荣誉》：2023年华为云十佳博主，2022年程序员宅基地之星TOP2，2022年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎点赞评论收藏

前言

缓冲区对象（Buffer Object）是在OpenGL中用于存储和管理数据的一种机制。缓冲区对象可以存储各种类型的数据，例如顶点、纹理坐标、颜色等。在渲染过程中，缓冲区对象中存储的数据可以被复制到渲染管线的不同阶段中，例如顶点着色器、几何着色器和片段着色器等，以完成渲染操作。相比传统的CPU访问内存，缓冲区对象的数据存储和管理更加高效，能够提高OpenGL应用的性能表现。

一、缓冲区对象

1.Float32Array

在WebGL中，Float32Array是一种数据类型，用于存储32位浮点数。它通常用于存储顶点和颜色等数值型数据，以便将数据传递到顶点着色器中进行渲染。

Float32Array对象是JavaScript中的一个类型化数组，它可以通过创建一个新的Float32Array实例来初始化，并指定它的长度或数组。例如，可以通过以下方式创建一个长度为4的Float32Array实例：

var myFloatArray = new Float32Array(4);

这将创建一个长度为4的Float32Array数组，每个元素的默认值为0.0。也可以通过指定一个数组或另一个类型化数组来初始化Float32Array，例如：

var myArray = [0.5, 0.3, 0.8, 1.0];
var myFloatArray = new Float32Array(myArray);

这将创建一个长度为4的Float32Array，元素分别为0.5、0.3、0.8和1.0。

在WebGL中，Float32Array通常用于存储顶点坐标和颜色信息，以便在顶点着色器中进行渲染。可以使用gl.bufferData()将Float32Array数据存储到缓冲区对象中，然后使用gl.vertexAttribPointer()将缓冲区对象中的数据与顶点着色器中的属性关联起来。

2.创建缓冲区对象

在WebGL中，可以使用gl.createBuffer()函数创建缓冲区对象。该函数会返回一个指向新创建的缓冲区对象的引用。

例如，如果要创建一个顶点缓冲区对象，可以使用以下代码：

// 创建顶点缓冲区对象
var vertexBuffer = gl.createBuffer();

// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 将数据写入缓冲区对象
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

在上面的代码中，gl.bindBuffer(target, buffer)函数用于将缓冲区对象绑定到WebGL上下文的ARRAY_BUFFER目标上。

gl.ARRAY_BUFFER: 表示缓冲区存储的是顶点的数据
gl.ELEMENT_ARRAY_BUFFER: 表示缓冲区存储的是顶点的索引值

然后，可以使用gl.bufferData(target, data, type)函数将数据写入缓冲区对象。

target: 类型同 gl.bindBuffer 中的 target
data: 写⼊缓冲区的顶点数据，如程序中的 points
type: 表示如何使⽤缓冲区对象中的数据，分为以下⼏类
- gl.STATIC_DRAW: 写⼊⼀次，多次绘制
- gl.STREAM_DRAW: 写⼊⼀次，绘制若干次
- gl.DYNAMIC_DRAW: 写⼊多次，绘制多次

注意，创建缓冲区对象之后，必须将其绑定到目标上，才能使用gl.bufferData()函数将数据写入缓冲区对象。

3.vertexAttribPointer

vertexAttribPointer不同于vertexAttrib1f、vertexAttrib2f、vertexAttrib3f、vertexAttrib4f，vertexAttribPointer是WebGL中一个用于设置顶点属性的方法。它主要用于指定顶点着色器中的顶点属性的数据类型、数量和存储方式。

vertexAttribPointer(location, size, type, normalized, stride, offset)有五个参数：

index：指定要修改的顶点属性的索引，例如0表示修改位置属性，1表示修改颜色属性。
size：指定每个顶点属性的分量数量，例如位置属性通常是3个分量，颜色属性通常是4个分量。
type：指定每个分量的数据类型，例如：gl.FLOAT表示浮点型数据、gl.UNSIGNED_BYTE⽆符号字节、gl.SHORT短整型、gl.UNSIGNED_SHORT无符号短整型、gl.INT整型、gl.UNSIGNED_INT无符号整型。
normalized：表示是否需要将数据规范化到0-1之间。
stride：指定相邻两个顶点属性之间的字节数，如果是连续的，则为0。
offset：指定一个属性从顶点数据的起始位置偏移量，通常为0。

示例代码：

gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, numVertices * 3 * 4);

其中，positionLoc和colorLoc分别是位置和颜色属性的索引，3和4分别是每个顶点属性的分量数量，gl.FLOAT是数据类型，false表示不需要规范化数据，0表示数据是连续的，numVertices * 3 * 4表示从位置属性结束位置开始存储颜色属性。

可以使用gl.disableVertexAttribArray(aPosition)⽅法禁⽤。

4.缓冲区处理流程

在这里插入图片描述

5.案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      
      margin: 0;
      padding: 0;
    }

    canvas{
      
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 只传递顶点数据
    attribute vec4 aPosition;
    void main() {
      gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');

  const points = new Float32Array([
    -0.5, -0.5,
     0.5, -0.5,
     0.0,  0.5,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)
  // gl.vertexAttrib2f(aPosition, 0.0, 0.0)

  gl.drawArrays(gl.POINTS, 0, 3);
</script>

在这里插入图片描述

感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”

本文链接：https://blog.csdn.net/aa2528877987/article/details/132083515

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地

文章浏览阅读645次。这个肯定是末尾的IDAT了，因为IDAT必须要满了才会开始一下个IDAT，这个明显就是末尾的IDAT了。，对应下面的create_head()代码。，对应下面的create_tail()代码。不要考虑爆破，我已经试了一下，太多情况了。题目来源：UNCTF。_攻防世界困难模式攻略图文

达梦数据库的导出（备份）、导入_达梦数据库导入导出-程序员宅基地

文章浏览阅读2.9k次，点赞3次，收藏10次。偶尔会用到，记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录，执行导库操作　　导出语句：./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log　注释：　　 cwy_init/init_123..._达梦数据库导入导出

js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地

文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件，可以删掉不需要要到的jsp，asp，asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件，在页面引入js文件：<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js

STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地

文章浏览阅读2.3k次，点赞6次，收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA，我们的数据线就会变为10101010，通过修改不同的内容，即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平，后半周期为低电平的状态。在SPI的通信模式中，CPHA配置会影响该实验，下图展示了不同采样位置的SPI时序图[1]。CPOL = 0，CPHA = 1：CLK空闲状态 = 低电平，数据在下降沿采样，并在上升沿移出CPOL = 0，CPHA = 0：CLK空闲状态 = 低电平，数据在上升沿采样，并在下降沿移出。_stm32g431cbu6

计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决？5.如果在数据链路层不进行帧定界，会发生什么问题？6.PPP协议的主要特点是什么？为什么PPP不使用帧的编号？PPP适用于什么情况？为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输

软件测试工程师移民加拿大_无证移民，未受过软件工程师的教育（第1部分）-程序员宅基地

文章浏览阅读587次。软件测试工程师移民加拿大无证移民，未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...

随便推点

Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地

文章浏览阅读304次。Thinkpad X250笔记本电脑，装的是FreeBSD，进入BIOS修改虚拟化配置（其后可能是误设置了安全开机），保存退出后系统无法启动，显示：secure boot failed ，把自己惊出一身冷汗，因为这台笔记本刚好还没开始做备份.....根据错误提示，到bios里面去找相关配置，在Security里面找到了Secure Boot选项，发现果然被设置为Enabled，将其修改为Disabled ，再开机，终于正常启动了。_安装完系统提示secureboot failure

C++如何做字符串分割（5种方法）_c++ 字符串分割-程序员宅基地

文章浏览阅读10w+次，点赞93次，收藏352次。1、用strtok函数进行字符串分割原型： char *strtok(char *str, const char *delim);功能：分解字符串为一组字符串。参数说明：str为要分解的字符串，delim为分隔符字符串。返回值：从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它：strtok函数线程不安全，可以使用strtok_r替代。示例：//借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割

2013第四届蓝桥杯 C/C++本科A组真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地

文章浏览阅读2.3k次。1 .高斯日记大数学家高斯有个好习惯：无论如何都要记日记。他的日记有个与众不同的地方，他从不注明年月日，而是用一个整数代替，比如：4210后来人们知道，那个整数就是日期，它表示那一天是高斯出生后的第几天。这或许也是个好习惯，它时时刻刻提醒着主人：日子又过去一天，还有多少时光可以用于浪费呢？高斯出生于：1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答

基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地

文章浏览阅读851次，点赞17次，收藏22次。摘要：本文利用供需算法对核极限学习机(KELM)进行优化，并用于分类。

metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地

文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功，进入系统4、测试如下：二、MySQL弱密码登录：1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功，进入MySQL系统3、测试效果：三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入

Python学习之路：从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地

文章浏览阅读257次。本文将为初学者提供Python学习的详细指南，从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文，您将能够掌握Python编程的核心概念，为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf