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

【WebGL】attribute方式实例化绘制

article 2026/4/9 21:48:04

背景

一般有attribute和uniform两种方式进行实例化绘制

attribute方式实例化

这里需要注意

  • bufferData和bufferSubData方式的用法顺序和参数

    • gl.bufferData(target, sizeOrData, usage);

      • sizeOrData（实例化配合bufferSubData 更新数据一般使用这种先）
        • 传入数字（size）指定要分配的缓冲区大小，单位是字节。此时，缓冲区会被分配相应大小的内存，但不会被填充具体的数据。当你后续会使用 bufferSubData 方法来逐步填充缓冲区数据，或者不确定具体数据但先需要分配内存时，会采用这种方式
        • 传入类型化数组，直接将类型化数组中的数据写入到缓冲区中，同时根据数组的大小为缓冲区分配相应的内存。常见的类型化数组有 Float32Array、Uint16Array 等。当你已经有了完整的顶点数据或索引数据，并且想一次性将它们写入缓冲区时，使用这种方式很方便。

    • bufferSubData (target, offset, data）
      方法用于更新已经绑定的缓冲区对象中的一部分数据。它允许你在不重新创建整个缓冲区的情况下，修改缓冲区中的特定数据区域，这在动态更新数据时非常有用，比如动画中的顶点位置变化。

  • vertexAttribDivisor(index, divisor)
    • index：指定要设置的顶点属性的索引，这个索引通常是通过 gl.getAttribLocation 方法获取的。
    • divisor：指定属性更新的频率，是一个无符号整数。具体含义如下：
      • divisor 为 0 时，表示该属性在每个顶点都更新，这是传统的绘制方式。
      • divisor 为 1 时，表示该属性在每个实例更新一次，这是实例化绘制中最常用的设置。
      • divisor 大于 1 时，表示该属性每 divisor 个实例更新一次
  • drawArraysInstanced
    • mode：指定绘制的图元类型，是一个枚举值。常见的取值有：
      • gl.POINTS：绘制一系列点。
      • gl.LINES：绘制一系列独立的线段。
      • gl.TRIANGLES：绘制一系列独立的三角形。
    • first：指定从顶点数组的第几个元素开始绘制，是一个无符号整数。
    • count：指定要绘制的顶点数量，是一个无符号整数。
    • primcount：指定要绘制的实例数量，是一个无符号整数。
attribute方式案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebGL 2 Instanced Rendering with mat4 Attribute using bufferSubData</title><style>canvas {display: block;}</style>
</head><body><canvas id="glCanvas" width="640" height="480"></canvas><script>function main() {// 获取 canvas 元素和 WebGL 2 上下文const canvas = document.getElementById('glCanvas');const gl = canvas.getContext('webgl2');if (!gl) {alert('Unable to initialize WebGL 2. Your browser or machine may not support it.');return;}// 设置视口大小gl.viewport(0, 0, canvas.width, canvas.height);// 禁用深度测试gl.disable(gl.DEPTH_TEST);// 禁用混合gl.disable(gl.BLEND);// 顶点着色器代码const vertexShaderSource = `#version 300 eslayout (location = 0) in vec2 a_position;layout (location = 1) in mat4 a_instanceMatrix;void main() {// 使用矩阵变换顶点位置vec4 pos = a_instanceMatrix * vec4(a_position, 0.0, 1.0);gl_Position = pos;}`;// 片段着色器代码const fragmentShaderSource = `#version 300 esprecision mediump float;out vec4 outColor;void main() {outColor = vec4(1.0, 0.0, 0.0, 1.0);}`;// 创建着色器程序function createShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (!success) {console.error('Shader compilation error:', gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null;}return shader;}function createProgram(gl, vertexShader, fragmentShader) {const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);const success = gl.getProgramParameter(program, gl.LINK_STATUS);if (!success) {console.error('Program linking error:', gl.getProgramInfoLog(program));gl.deleteProgram(program);return null;}return program;}const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);if (!vertexShader || !fragmentShader) {return;}const program = createProgram(gl, vertexShader, fragmentShader);if (!program) {return;}// 顶点数据const positions = [-0.1, -0.1,0.1, -0.1,0.0, 0.1];// 预先分配足够的空间给矩阵数据const numInstances = 2;const matrixDataSize = numInstances * 4 * 4 * 4; // 每个 mat4 是 4x4 矩阵，每个元素是 float（4 字节）const matrixBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, matrixBuffer);gl.bufferData(gl.ARRAY_BUFFER, matrixDataSize, gl.DYNAMIC_DRAW);// 初始实例化矩阵数据let mat4Data = new Float32Array([1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,-0.5, 0, 0, 1,1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,0.5, 0, 0, 1]);// 使用 bufferSubData 更新矩阵数据gl.bindBuffer(gl.ARRAY_BUFFER, matrixBuffer);gl.bufferSubData(gl.ARRAY_BUFFER, 0, mat4Data);// 创建顶点缓冲区const positionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);// 获取属性位置const positionAttributeLocation = 0//gl.getAttribLocation(program, 'a_position');const matrixAttributeLocation = 1//gl.getAttribLocation(program, 'a_instanceMatrix');if (positionAttributeLocation === -1 || matrixAttributeLocation === -1) {console.error('Failed to get attribute location');return;}// 启用顶点位置属性gl.enableVertexAttribArray(positionAttributeLocation);gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);// 为矩阵的每个 vec4 分量设置 attributeconst bytesPerMatrix = 4 * 4 * 4; // 4 个 vec4，每个 vec4 4 个浮点数，每个浮点数 4 字节for (let i = 0; i < 4; i++) {const loc = matrixAttributeLocation + i;gl.enableVertexAttribArray(loc);const offset = i * 4 * 4; // 每个 vec4 偏移 16 字节gl.bindBuffer(gl.ARRAY_BUFFER, matrixBuffer);gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, bytesPerMatrix, offset);// 设置每个实例更新一次gl.vertexAttribDivisor(loc, 1);}// 渲染循环let time = 0;function render() {// 更新矩阵数据time += 0.01;mat4Data[12] = -0.5 + Math.sin(time) * 0.2; // 修改第一个矩阵的平移分量mat4Data[28] = 0.5 + Math.cos(time) * 0.2;  // 修改第二个矩阵的平移分量// 使用 bufferSubData 更新缓冲区数据gl.bindBuffer(gl.ARRAY_BUFFER, matrixBuffer);gl.bufferSubData(gl.ARRAY_BUFFER, 0, mat4Data);// 使用着色器程序gl.useProgram(program);// 清除画布gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);// 绘制实例const instanceCount = numInstances;gl.drawArraysInstanced(gl.TRIANGLES, 0, positions.length / 2, instanceCount);// 请求下一帧渲染requestAnimationFrame(render);}// 开始渲染循环render();}main();</script>
</body></html>

相关文章：

【WebGL】attribute方式实例化绘制

背景 一般有attribute和uniform两种方式进行实例化绘制 attribute方式实例化 这里需要注意 bufferData和bufferSubData方式的用法顺序和参数 gl.bufferData(target, sizeOrData, usage); sizeOrData&#xff08;实例化配合bufferSubData 更新数据一般使用这种先&#xff09…...

编程日记 2026/3/14 0:52:21

线代[8]｜北大丘维声教授《怎样学习线性代数？》（红色字体为博主注释）

文章目录 说明一、线性代数的内容简介二、学习线性代数的用处三、线性代数的特点四、学习线性代数的方法五、更新时间记录 说明 文章中红色字体为博主敲录完丘教授这篇文章后所加&#xff0c;刷到这篇文章的读者在首次阅读应当跳过红色字体&#xff0c;先通读一读文章全文&…...

编程日记 2026/3/10 21:10:20

光明谷推出AT指令版本的蓝牙音箱SOC 开启便捷智能音频开发新体验

前言 在蓝牙音箱市场竞争日益激烈的当下&#xff0c;开发一款性能卓越且易于上手的蓝牙音箱&#xff0c;成为众多厂商追求的目标。而光明谷科技有限公司推出的 AT 指令版本的蓝牙音箱 SOC&#xff0c;无疑为行业带来了全新的解决方案&#xff0c;以其诸多独特卖点&#xff0c;迅…...

编程日记 2026/4/8 15:40:35

C#从入门到精通（34）—如何防止winform程序被同时打开多次

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发上位机软件的过程中&#xff0c;评判一个人软件写的好不好&#xff0c;有一…...

编程日记 2026/2/18 1:08:03

TIP: Flex-DLD

Article: Flex-DLD: Deep Low-Rank Decomposition Model With Flexible Priors for Hyperspectral Image Denoising and Restoration, 2024 TIP. 文章的主要思想是用network来学low-rank decomposition的两个matrix&#xff08;input是random input&#xff09;. 文章的framew…...

编程日记 2026/4/8 10:52:14

如何在 ubuntu 上使用 Clash 与 docker 开启代理拉起

如何在 ubuntu 上使用 Clash https://github.com/doreamon-design/clash/releases上面是clash 的地址 clash_2.0.24_linux_386.tar.gz 下载 386 的 如果你的电脑是inter tar -xzvf clash_2.0.24_linux_386.tar.gz 启动 ./clash 然后会在电脑上生成一个config的文件 /home/xxx/…...

编程日记 2026/3/1 16:47:49

MFC开发：如何创建第一个MFC应用程序

文章目录 一、概述二、MFC 的主要组件三、创建一个MFC窗口四、控件绑定消息函数 一、概述 MFC 是微软提供的一个 C 类库&#xff0c;用于简化 Windows 应用程序的开发。它封装了 Windows API&#xff0c;提供面向对象的接口&#xff0c;帮助开发者更高效地创建图形用户界面&am…...

编程日记 2026/4/9 4:45:50

react hook useReducer

useReducer useReducer 是 React 中用于状态管理的 Hook&#xff0c;与 useState 不同&#xff0c;它更适合处理复杂的状态逻辑. const [state, dispatch] useReducer(reducer, initialArg, init?) reducer 是一个处理函数&#xff0c;用于更新状态, reducer 里面包含了两个…...

编程日记 2026/3/10 3:25:51

Java与C语言中取模运算符%的区别对比

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 &#x1f4af;前言&#x1f4af;C语言中的取模运算符 %基本行为示例 注意事项示例&#xff1a;负数取模 &#x1f4af;Java中的取模运算符 %基本行为示例 对浮点数的支持示例&#xff1a;浮点数取模 符…...

编程日记 2026/4/9 2:25:05

Zabbix 7.2实操指南：基于OpenEuler系统安装Zabbix 7.2

原文出处&#xff1a;乐维社区 部署环境 openEuler 22.03 LTS PHP 8.0 Apache Mysql 8.0 MySQL数据库 6.0 以上版本需要安装mysql8.0以上版本的数据库&#xff08;以mysql为例子&#xff09;。 欧拉系统自带 mysql8.0 的源&#xff0c;无需要安装额外的源。 安装mysql …...

编程日记 2026/4/9 7:12:02

Springboot的简单推荐实现

以springboot 推荐社团招新为例子 使用 Spring Boot 构建社团招新推荐系统&#xff0c;用户注册后选择兴趣&#xff0c;系统根据兴趣推荐社团。 实现包括用户注册、兴趣选择和基于标签匹配的推荐算法。 系统使用 JPA 管理数据库&#xff0c;Spring Security 确保安全&#xff0…...

编程日记 2025/8/20 1:19:24

如何使用Python快速开发一个带管理系统界面的网站-解析方案

如果你想用 Python 开发一个 管理系统界面 的网站&#xff0c;并且希望界面美观&#xff0c;可以考虑以下几个框架和库&#xff1a; 1. Streamlit&#xff08;快速、简洁&#xff09; 适合&#xff1a;数据分析、仪表盘、内部管理系统特点&#xff1a; 写法简单&#xff0c;类…...

编程日记 2026/3/5 20:27:43

深入剖析抽象工厂模式：设计模式中的架构利器

深入剖析抽象工厂模式&#xff1a;设计模式中的架构利器 在软件开发领域&#xff0c;设计模式是解决常见问题的通用方案&#xff0c;而抽象工厂模式作为创建型设计模式的重要一员&#xff0c;在构建复杂软件系统时发挥着关键作用。它为创建一系列相关或相互依赖的对象提供了一…...

编程日记 2026/2/28 6:34:48

面试基础-如何设计一个短链接系统

设计一个每秒处理 100 万个请求&#xff08;WQPS&#xff09;的短链系统需要综合考虑性能、可用性和可扩展性。以下是设计方案&#xff1a; 1. 系统架构设计 采用微服务架构&#xff0c;将功能模块化&#xff0c;便于水平扩展和故障隔离。 核心组件&#xff1a; 短链生成服务…...

编程日记 2026/2/16 23:31:44

Win11 24h2 不能正常使用ensp的问题（已解决）

因为Win11 24h2的内核大小更改&#xff0c;目前virtualbox在7.1.4中更新解决了。所以Win11 24H2系统版本无法使用 5.x.xx的virtualbox版本&#xff0c;virtualbox对于这个5.x.xx版本早已停止维护&#xff0c;所以这个以后不会有调整。 对应的报错代码是 virtualbox错误代码&…...

编程日记 2026/4/9 20:44:45

蓝桥杯——按键

一&#xff1a;按键得原理图 二&#xff1a;按键的代码配置 step1 按键原理图对应引脚配置为输入状态 step2 在GPIO中将对应引脚设置为上拉模式 step3 在fun.c中写按键扫描函数 写完后的扫描函数需放在主函数中不断扫描 扫描函数主要通过两个定义变量的值来判断&#xf…...

编程日记 2026/4/5 22:25:47

Linux环境基础开发工具的使用(三）

五、Linux项目自动化构建工具-make/Makefile make&#xff1a;是一条指令。 makefile&#xff1a;是一个当前目录下的文件。 第一行&#xff1a;依赖关系。 第二行&#xff1a;依赖方法。 clean是空依赖关系。 编译文件清理 背景 会不会写makefile&#xff0c;从一个侧面说…...

编程日记 2026/4/9 1:52:51

vue中将el-table导出为excel文件

在 Vue Element UI 中&#xff0c;el-table 数据导出 Excel 文件&#xff0c;可以使用 xlsx&#xff08;SheetJS&#xff09;库进行处理。以下是详细的实现方法&#xff0c;包括安装依赖、代码示例和优化建议。 1. 安装依赖 首先&#xff0c;安装 xlsx 库&#xff1a; 复制…...

编程日记 2026/2/24 23:50:45

electron提升软件运行权限，以管理员权限运行

大家有任何想法&#xff0c;都可以联系博主沟通。 本系列为实战文章&#xff0c;最终实现的桌面工具软件&#xff0c;获取方式&#xff1a;百度网盘地址&#xff1a;https://pan.baidu.com/s/1yrl0jYpti7QCn8CHBRT2lw?pwd1234 正文开始 前言一、提升electron运行权限的三种方…...

编程日记 2026/4/9 15:50:21

力扣LeetCode: 2506 统计相似字符串对的数目

题目&#xff1a; 给你一个下标从 0 开始的字符串数组 words 。 如果两个字符串由相同的字符组成&#xff0c;则认为这两个字符串 相似 。 例如&#xff0c;"abca" 和 "cba" 相似&#xff0c;因为它们都由字符 a、b、c 组成。然而&#xff0c;"aba…...

编程日记 2026/2/26 9:58:04

安科瑞能源物联网平台助力企业实现绿色低碳转型

安科瑞顾强 随着全球能源结构的转型和“双碳”目标的推进&#xff0c;能源管理正朝着智能化、数字化的方向快速发展。安科瑞电气股份有限公司推出的微电网智慧能源管理平台&#xff08;EMS 3.0&#xff09;&#xff0c;正是这一趋势下的创新解决方案。该平台集成了物联网&…...

编程日记 2026/4/8 7:23:56

Spring Boot 中使用 @Transactional 注解配置事务管理

事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务&#xff1b;声明式事务基于 AOP,将具体业务逻辑与事务处理解耦。声明式事务管理使业务代码逻辑不受污…...

编程日记 2026/4/5 22:18:50

动态链接器（九）：.init和.init_array

ELF文件中的.init和.init_array段是程序初始化阶段的重要组成部分&#xff0c;用于在main函数执行前完成必要的初始化操作。 1 .init段和.init_array 段 1.1 作用 .init段包含编译器生成的初始化代码&#xff0c;通常由运行时环境&#xff08;如C标准库的启动例程&#xff0…...

编程日记 2026/4/9 5:16:26

标准I/O与文件I/O

一、概念 标准IO&#xff1a;标准IO是指程序与标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;之间的输入输出操作。通常用于与用户交互或输出调试信息。文件IO&#xff1a;文件IO是指程序与文件系统…...

编程日记 2026/2/22 13:19:48

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter20-JavaScript API

二十、JavaScript API JavaScript API 随着 Web 浏览器能力的增加&#xff0c;其复杂性也在迅速增加。从很多方面看&#xff0c;现代 Web 浏览器已经成为构建于诸多规范之上、集不同 API 于一身的“瑞士军刀”。浏览器规范的生态在某种程度上是混乱而无序的。一些规范如 HTML5&…...

编程日记 2026/3/1 9:18:15

C#初级教程（7）——初级期末检测

练习 1&#xff1a;计算圆的周长和面积 改编题目&#xff1a;编写一个 C# 程序&#xff0c;让用户输入圆的半径&#xff0c;然后计算并输出该圆的周长和面积&#xff0c;结果保留两位小数。 using System;class CircleCalculation {static void Main(){const double pi 3.14…...

编程日记 2026/4/1 15:14:34

RT-Thread+STM32L475VET6——TF 卡文件系统

文章目录 前言一、板载资源二、具体步骤1.打开CubeMX进行USB配置1.1 使用外部高速时钟&#xff0c;并修改时钟树1.2 打开SPI1&#xff0c;参数默认即可(SPI根据自己需求调整&#xff09;1.3 打开串口&#xff0c;参数默认1.4 生成工程 2.配置SPI2.1 打开SPI驱动2.2 声明使用SPI…...

编程日记 2026/4/3 7:27:29

排序链表--字节跳动

少年的书桌上没有虚度的光阴 题目描述 请你对链表进行排序 思路分析 核心思想&#xff1a;归并排序 有三个部分 链表排序实现 1. merge 函数 21.见 合并两个有序链表&#xff0c; 首先创建一个虚拟头节点 newhead&#xff0c;并使用指针 tail 来构建合并后的链表。 通过…...

编程日记 2026/3/7 13:00:23

[论文解析]OmniRe: Omni Urban Scene Reconstruction

OmniRe: Omni Urban Scene Reconstruction 论文地址&#xff1a;https://arxiv.org/abs/2408.16760 代码地址&#xff1a;https://github.com/ziyc/drivestudio 项目地址&#xff1a;https://ziyc.github.io/omnire/ 论文解读 总结 这篇论文代表了一种重建的方向&#xff0…...

编程日记 2026/4/4 17:33:28

【微服务优化】ELK日志聚合与查询性能提升实战指南

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2026/4/9 12:16:29