【WebGL】attribute方式实例化绘制

GAMESLI-GIS

于 2025-02-22 20:12:40 发布

阅读量397

点赞数 3

分类专栏： WebGL 文章标签： webgl

本文链接：https://blog.youkuaiyun.com/qq_22849251/article/details/145799972

版权

背景

一般有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

最低0.47元/天解锁文章