WebGl 多缓冲区和数据偏移
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.多缓冲区 多缓冲区技术通常涉及到创建多个缓冲区对象，并将它们用于不同的数据集。这种做法可以提高数据处理效率，尤其是在处理大量数据或需要频繁更新数据时。通过预先分配和配置多个缓冲区，可以在不影响渲染性能的情况下，快速…...
基于SSM的甜品店销售管理系统
作者：计算机学姐 开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。 专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏：…...
Spacetime Gaussian Feature Splatting for Real-Time Dynamic View Synthesis
Spacetime Gaussian Feature Splatting for Real-Time Dynamic View Synthesis 摘要 动态场景的新视角合成一直是一个引人入胜但充满挑战的问题。尽管最近取得了很多进展，但如何同时实现高分辨率的真实感渲染、实时渲染和紧凑的存储，依然是一个巨大的…...
PCL 基于FPFH特征描述子获取点云对应关系
目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 FPFH特征计算函数 2.1.2 获取点云之间的对应点对函数 2.1.3 可视化函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接： PCL点云算法与项目实战案例汇总…...
项目实战：Qt+OpenCV仿射变换工具v1.1.0（支持打开图片、输出棋盘角点、调整偏移点、导出变换后的图等等）
若该文为原创文章，转载请注明出处 本文章博客地址：https://hpzwl.blog.csdn.net/article/details/143105881 长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、Op…...
OpenCV坐标系统与图像处理案例
在图像处理中，理解图像的坐标系统是至关重要的。OpenCV，作为一个强大的计算机视觉库，提供了丰富的功能来操作图像。本文将介绍OpenCV中的坐标系统，并提供一个简单的案例来展示如何使用这些坐标来修改图像的特定区域。 OpenCV坐标…...
Unity之如何使用Unity Cloud Build云构建
文章目录 前言什么是 UnityCloudBuild？如何使用Unity云构建Unity 团队中的人员不属于 Unity Team 的人员UnityCloudBuild2.0价格表如何使用Unity云构建配置CloudBuild前言 Unity Cloud Build作为Unity平台的一项强大工具，它允许开发团队通过云端自动构建项目，节省了繁琐的手…...
Halcon开启多线程
并行运算（提升检测时间） 支持主线程中的子线程并行执行程序和调用算子。 一旦启动，子线程由线程 ID 标识，该线程 ID 是一个取决于操作系统的整数进程号。 子线程的执行独立于它们启动的线程。 因此，无法预测子线程执行…...
Echarts 点击事件无法使用 this 或者 this绑定的数据无法获取
这里写自定义目录标题 现象解决方案 现象 给echarts绑定自定义点击事件时，无法使用this，并且无法获取到this绑定的数据。 解决方案 增加：const _this this; 代码块如下： const _this this; let myChart echarts.init(docum…...
PCL 基于距离阈值去除错误对应关系(永久免费版)
目录 一、概述1.1 原理1.2 实现步骤1.3应用场景 二、关键函数2.1 获取初始点对2.2 基于距离的对应关系筛选函数2.3 可视化 三、完整代码四、结果展示 即日起，付费专栏所有内容将以永久免费形式陆续进行发表！！！ 一、概述 在3D点云的…...
DirectX 11 和 Direct3D 11 的关系
以下是对两者的详细比较： DirectX 11 DirectX 11是微软的一项技术，为高性能游戏和复杂图形程序制定了标准。它是DirectX系列的一个版本，引入了多项创新功能，如硬件加速的Tessellation（细分曲面技术）、多线…...
什么是SCRM？为什么企业要做SCRM？
很多人都知道CRM是客户关系管理系统，而SCRM又是什么呢？ 今天我就给大家用一文讲清SCRM的那些事，本文包括：SCRM 的定义与内涵，与传统 CRM 的区别；通过案例阐述其重要性及作用，如适应消费模式转变…...
类间方差，分割地物
类间方差（Inter-class Variance）是用于图像分割中的一种统计量，特别是在使用Otsu方法进行阈值选择时。它衡量的是分割后两个类别（通常是前景和背景）之间的分离程度。类间方差越大，说明两个类别之间的差异越…...
基于微博评论的自然语言处理情感分析
目录 一、项目概述 二、需要解决的问题 三、数据预处理 1、词汇表构建（vocab_creat.py） 2、数据集加载（load_dataset.py） 四、模型构建（TextRNN.py） 1、嵌入层（Embedding Layerÿ…...
MFEM（ Modular Finite Element Methods）是一个灵活的、可扩展的、开源的有限元库
MFEM（ Modular Finite Element Methods ）是一个灵活的、可扩展的、开源的有限元库，主要用于求解偏微分方程（PDE）问题。MFEM的目标是通过模块化设计和强大的抽象能力，简化有限元方法的使用，并支持高效的并行计算，尤其是在复杂的几何形状和自适应网格细化的情况下。 核…...
在VMware上创建虚拟机以及安装Linux操作系统，使用ssh进行远程连接VMware安装注意点 (包含 v1,v8两张网卡如果没有的解决办法)
一，VMware上创建虚拟机 1.VMware下载 1）点击VMware官网进入官网 网址:VMware by Broadcom - Cloud Computing for the EnterpriseOptimize cloud infrastructure with VMware for app platforms, private cloud, edge, networking, and security.https…...
关于vue3中如何实现多个v-model的自定义组件
实现自定义组件<User v-model"userInfo" v-model:gender"gender"></User> User组件中更改数据可以同步更改父组件中的数据： 1 父组件： <User v-model"userInfo" v-model:gender"gender">&…...
【STM32项目_2_基于STM32的宠物喂食系统】
摘要：本文介绍一款基于 STM32 的宠物喂食系统资源。该系统以 STM32 为核心，集成多种传感器与设备，涵盖 DHT11、HX711、减速马达及 ESP8266 模块，具备环境监测、精准喂食、网络连接及数据存储功能。 🔜🔜&am…...
商场楼宇室内导航系统
商场楼宇室内导航系统 本文所涉及所有资源均在传知代码平台可获取 文章目录 商场楼宇室内导航系统效果图导航效果图查看信息数据加载加载模型模型选型处理楼层模型绑定店铺创建店铺名称动态显示隐藏2d元素空气墙查看信息楼梯导航效果图 导航效果图 查看信息 数据加载 因为是一…...
2025全网最全计算机毕业设计选题推荐：计算机毕设选题指导及避坑指南√
博主介绍：✌全网粉丝50W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围：SpringBoot、Vue、SSM、HLM…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
)
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
GitFlow 工作模式（详解）
今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...
PHP 8.5 即将发布：管道操作符、强力调试
前不久，PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5！作为 PHP 语言的又一次重要迭代，PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是，借助强大的本地开发环境 ServBay&am…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中，压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言，提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...