当前位置： 首页 > news >正文

WebGl 多缓冲区和数据偏移

news 2026/1/2 20:10:51

1.多缓冲区

  • 多缓冲区技术通常涉及到创建多个缓冲区对象，并将它们用于不同的数据集。
  • 这种做法可以提高数据处理效率，尤其是在处理大量数据或需要频繁更新数据时。
  • 通过预先分配和配置多个缓冲区，可以在不影响渲染性能的情况下，快速切换数据集。

2.数据偏移

  • 数据偏移是指在处理缓冲区数据时，指针跳过一定数量的字节来定位特定的数据。
  • 在WebGL中，gl.vertexAttribPointer函数的offset参数用于指定从缓冲区起始位置开始的偏移量。
  • 这允许开发者将不同类型的数据（如顶点位置、法线、颜色等）存储在同一个缓冲区中，并通过偏移量来正确地访问这些数据。

3. 实现示例

3.1. 声明aPointSize
 attribute float aPointSize;
3.2. 获取attribute变量aPointSize
const aPointSize = gl.getAttribLocation(program, 'aPointSize');
3.3. 获取字节数
 const BYTES = points.BYTES_PER_ELEMENT;
3.4. 顶点大小参数设置：
gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2);

4. 代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto;display: block;background: pink;}</style><title>修改点的颜色</title>
</head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script src="./js/index.js"></script><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')// 顶点着色器源码// 1. 声明aPointSizeconst vertexShaderSource = `attribute vec4 aPosition;attribute float aPointSize;void main() {gl_Position = aPosition; gl_PointSize = aPointSize;}`// 片源着色器源码const fragmentShaderSource = `void main() {gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a}`const program = initShader(gl, vertexShaderSource, fragmentShaderSource);const aPosition = gl.getAttribLocation(program, 'aPosition');// 1.获取attribute变量aPointSizeconst aPointSize = gl.getAttribLocation(program, 'aPointSize');// 2.创建顶点数据,前两位是顶点的位置，第三位是顶点的大小const points = new Float32Array([-0.5, -0.5, 10.0,0.5, -0.5, 20.0,0.0, 0.5, 30.0,])const buffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);// 3.获取字节数const BYTES = points.BYTES_PER_ELEMENT;// 4.顶点位置参数设置：两个相邻顶点之间的字节数为三个字节，所以字节数为BYTES*3; 顶点数据是前两位，所以偏移量为0;gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, BYTES * 3, 0);// 5.顶点大小参数设置：两个相邻顶点之间的字节数为三个字节，所以字节数为BYTES*3; 顶点数据是第三位，所以偏移量为BYTES*2;gl.vertexAttribPointer(aPointSize, 1, gl.FLOAT, false, BYTES * 3, BYTES * 2);// 4.激活变量gl.enableVertexAttribArray(aPosition);gl.enableVertexAttribArray(aPointSize);gl.drawArrays(gl.POINTS, 0, 3);// 着色器 function initShader(gl, vertexShaderSource, fragmentShaderSource) {const vertexShader = gl.createShader(gl.VERTEX_SHADER);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(vertexShader);gl.compileShader(fragmentShader);const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);return program;}</script>
</body></html>

5. 效果如下 

相关文章：

WebGl 多缓冲区和数据偏移

1.多缓冲区 多缓冲区技术通常涉及到创建多个缓冲区对象&#xff0c;并将它们用于不同的数据集。这种做法可以提高数据处理效率&#xff0c;尤其是在处理大量数据或需要频繁更新数据时。通过预先分配和配置多个缓冲区&#xff0c;可以在不影响渲染性能的情况下&#xff0c;快速…...

编程日记 2024/10/22 10:26:39

基于SSM的甜品店销售管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

编程日记 2024/10/22 10:25:38

Spacetime Gaussian Feature Splatting for Real-Time Dynamic View Synthesis

Spacetime Gaussian Feature Splatting for Real-Time Dynamic View Synthesis 摘要 动态场景的新视角合成一直是一个引人入胜但充满挑战的问题。尽管最近取得了很多进展&#xff0c;但如何同时实现高分辨率的真实感渲染、实时渲染和紧凑的存储&#xff0c;依然是一个巨大的…...

编程日记 2024/10/22 10:24:34

PCL 基于FPFH特征描述子获取点云对应关系

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 FPFH特征计算函数 2.1.2 获取点云之间的对应点对函数 2.1.3 可视化函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接： PCL点云算法与项目实战案例汇总…...

编程日记 2024/10/22 10:22:30

项目实战：Qt+OpenCV仿射变换工具v1.1.0（支持打开图片、输出棋盘角点、调整偏移点、导出变换后的图等等）

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/143105881 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、Op…...

编程日记 2024/10/22 10:19:26

OpenCV坐标系统与图像处理案例

在图像处理中&#xff0c;理解图像的坐标系统是至关重要的。OpenCV&#xff0c;作为一个强大的计算机视觉库&#xff0c;提供了丰富的功能来操作图像。本文将介绍OpenCV中的坐标系统&#xff0c;并提供一个简单的案例来展示如何使用这些坐标来修改图像的特定区域。 OpenCV坐标…...

编程日记 2024/10/22 10:17:24

Unity之如何使用Unity Cloud Build云构建

文章目录 前言什么是 UnityCloudBuild？如何使用Unity云构建Unity 团队中的人员不属于 Unity Team 的人员UnityCloudBuild2.0价格表如何使用Unity云构建配置CloudBuild前言 Unity Cloud Build作为Unity平台的一项强大工具，它允许开发团队通过云端自动构建项目，节省了繁琐的手…...

编程日记 2024/10/22 10:15:20

Halcon开启多线程

并行运算&#xff08;提升检测时间&#xff09; 支持主线程中的子线程并行执行程序和调用算子。 一旦启动&#xff0c;子线程由线程 ID 标识&#xff0c;该线程 ID 是一个取决于操作系统的整数进程号。 子线程的执行独立于它们启动的线程。 因此&#xff0c;无法预测子线程执行…...

编程日记 2024/10/22 10:14:18

Echarts 点击事件无法使用 this 或者 this绑定的数据无法获取

这里写自定义目录标题 现象解决方案 现象 给echarts绑定自定义点击事件时&#xff0c;无法使用this&#xff0c;并且无法获取到this绑定的数据。 解决方案 增加&#xff1a;const _this this; 代码块如下&#xff1a; const _this this; let myChart echarts.init(docum…...

编程日记 2024/10/22 10:06:04

PCL 基于距离阈值去除错误对应关系(永久免费版)

目录 一、概述1.1 原理1.2 实现步骤1.3应用场景 二、关键函数2.1 获取初始点对2.2 基于距离的对应关系筛选函数2.3 可视化 三、完整代码四、结果展示 即日起&#xff0c;付费专栏所有内容将以永久免费形式陆续进行发表&#xff01;&#xff01;&#xff01; 一、概述 在3D点云的…...

编程日记 2024/10/22 10:05:02

DirectX 11 和 Direct3D 11 的关系

以下是对两者的详细比较&#xff1a; DirectX 11 DirectX 11是微软的一项技术&#xff0c;为高性能游戏和复杂图形程序制定了标准。它是DirectX系列的一个版本&#xff0c;引入了多项创新功能&#xff0c;如硬件加速的Tessellation&#xff08;细分曲面技术&#xff09;、多线…...

编程日记 2024/10/22 10:04:01

什么是SCRM？为什么企业要做SCRM？

很多人都知道CRM是客户关系管理系统&#xff0c;而SCRM又是什么呢&#xff1f; 今天我就给大家用一文讲清SCRM的那些事&#xff0c;本文包括&#xff1a;SCRM 的定义与内涵&#xff0c;与传统 CRM 的区别&#xff1b;通过案例阐述其重要性及作用&#xff0c;如适应消费模式转变…...

编程日记 2024/10/22 10:03:00

类间方差，分割地物

类间方差&#xff08;Inter-class Variance&#xff09;是用于图像分割中的一种统计量&#xff0c;特别是在使用Otsu方法进行阈值选择时。它衡量的是分割后两个类别&#xff08;通常是前景和背景&#xff09;之间的分离程度。类间方差越大&#xff0c;说明两个类别之间的差异越…...

编程日记 2024/10/22 9:58:55

基于微博评论的自然语言处理情感分析

目录 一、项目概述 二、需要解决的问题 三、数据预处理 1、词汇表构建&#xff08;vocab_creat.py&#xff09; 2、数据集加载&#xff08;load_dataset.py&#xff09; 四、模型构建&#xff08;TextRNN.py&#xff09; 1、嵌入层&#xff08;Embedding Layer&#xff…...

编程日记 2024/10/22 9:57:54

MFEM（ Modular Finite Element Methods）是一个灵活的、可扩展的、开源的有限元库

MFEM（ Modular Finite Element Methods ）是一个灵活的、可扩展的、开源的有限元库，主要用于求解偏微分方程（PDE）问题。MFEM的目标是通过模块化设计和强大的抽象能力，简化有限元方法的使用，并支持高效的并行计算，尤其是在复杂的几何形状和自适应网格细化的情况下。 核…...

编程日记 2024/10/22 9:56:53

在VMware上创建虚拟机以及安装Linux操作系统，使用ssh进行远程连接VMware安装注意点 (包含 v1,v8两张网卡如果没有的解决办法)

一&#xff0c;VMware上创建虚拟机 1.VMware下载 1&#xff09;点击VMware官网进入官网 网址:VMware by Broadcom - Cloud Computing for the EnterpriseOptimize cloud infrastructure with VMware for app platforms, private cloud, edge, networking, and security.https…...

编程日记 2024/10/22 9:55:51

关于vue3中如何实现多个v-model的自定义组件

实现自定义组件<User v-model"userInfo" v-model:gender"gender"></User> User组件中更改数据可以同步更改父组件中的数据&#xff1a; 1 父组件&#xff1a; <User v-model"userInfo" v-model:gender"gender">&…...

编程日记 2024/10/22 9:54:50

【STM32项目_2_基于STM32的宠物喂食系统】

摘要&#xff1a;本文介绍一款基于 STM32 的宠物喂食系统资源。该系统以 STM32 为核心&#xff0c;集成多种传感器与设备&#xff0c;涵盖 DHT11、HX711、减速马达及 ESP8266 模块&#xff0c;具备环境监测、精准喂食、网络连接及数据存储功能。 &#x1f51c;&#x1f51c;&am…...

编程日记 2024/10/22 9:52:47

商场楼宇室内导航系统

商场楼宇室内导航系统 本文所涉及所有资源均在传知代码平台可获取 文章目录 商场楼宇室内导航系统效果图导航效果图查看信息数据加载加载模型模型选型处理楼层模型绑定店铺创建店铺名称动态显示隐藏2d元素空气墙查看信息楼梯导航效果图 导航效果图 查看信息 数据加载 因为是一…...

编程日记 2024/10/22 9:51:45

2025全网最全计算机毕业设计选题推荐：计算机毕设选题指导及避坑指南√

博主介绍&#xff1a;✌全网粉丝50W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HLM…...

编程日记 2024/10/22 9:50:44

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/1/2 4:32:36

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/1/2 4:52:15

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/12/15 15:15:10

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/12/28 19:42:37

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/12/20 8:36:22

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/12/30 17:43:13

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2025/12/31 13:00:11

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/11/13 8:14:48

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/12/31 5:06:53