WebGL 中超出缓冲区范围的常见原因是什么 [英] What is common cause of range out of bounds of buffer in WebGL

问题描述

我正在参与一个 webgl 项目.当我调用 gl.DrawElements 时，会显示错误范围超出缓冲区范围".

I'm engaging in a webgl project. When I call gl.DrawElements, the error 'range out of bounds of buffer' is shown.

我确实确保我传递了正确的缓冲区长度或偏移量.但是，仍然显示错误.

I surely ensured that I passed correct length or offset of buffer. But, still the error is showing.

我认为有几个原因可能会引发错误.因此，我想问一下您的项目中是否有同样的问题，您检查什么来解决这个问题?

I think there is several cause that could raise the error. Therefore,I want to ask if you had same problem in your project, what you check for fix this problem?

推荐答案

在调用 gl.drawElements

1. 您的索引引用了超出缓冲区范围的顶点

1. Your indices are referencing vertices out of range of your buffers

例如，您创建一个缓冲区并在其中放置 3 个位置值

For example you make a buffer and put 3 position values in it

var buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
var data = [1,2,3,4,5,6,7,8,9]; // 3 (3 value) positions
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

由于只有 3 个位置，因此唯一可能的索引是 0、1 和 2.因此，如果您在索引缓冲区中放入任何其他值，您将收到该错误.

Since there are only 3 positions the only possible indices are 0, 1, and 2. So if you put ANY OTHER VALUE in your index buffer you'll get that error.

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf);
var indices = [0,1,3]; // ERROR! That 3 is out of range
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// This will generate an out of bounds error because
// the 3 index we put in the index buffer is out of range
// as the only valid indices are 0, 1, and 2.
gl.drawElements(gl.TRIANGLE, 3, gl.UNSIGNED_SHORT, 0);

您试图绘制过多的索引或设置的偏移量超出范围

You tried to draw too many indices or set the offset out of range

如果你做了上面的设置

gl.drawElements(gl.TRIANGLE, 4, gl.UNSIGNED_SHORT, 0); 

您会超出范围，因为您只放入了 3 个索引，但您要求绘制 4 个.同样，如果您更改偏移量

You'd get out of range because you only put 3 indices in but you're asking to draw 4. Similarly if you change the offset

gl.drawElements(gl.TRIANGLE, 3, gl.UNSIGNED_SHORT, 1);

同样，您只输入了 3 个索引，但您要求它绘制索引 1,2 和 3 而不是 0、1 和 2.

Again you only put 3 indices in but you're asking it to draw index 1,2, and 3 instead of 0, 1, and 2.

您将属性设置为访问过多数据

You set your attributes to access too much data

假设我们像上面一样放置了三个 3 值位置.如果我们把属性设置成这样拉出三个4值位置

Let's assume we put in three 3 value positions like above. If we set the attribute to pull out three 4 value positions like this

var size = 4; // ERROR! There are only 3 value per position
gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);

该设置将尝试访问 12 个浮点数据(假设您的索引正确)，但您只放入了 9 个浮点数据.大小应等于 3

That setup will try to access 12 floats of data (assuming your indices are correct) but you only put in 9 floats of data. size should equal 3

如果您将步幅或偏移量(gl.vertexAtrribPointer 的最后 2 个参数设置为错误的值)同样会搞砸.几乎所有的 WebGL 程序总是在那里使用 0, 0.如果您'正在做一些更花哨的事情，请确保正确设置它们.

You can similarly mess up if you set the stride or the offset (the last 2 parameters to gl.vertexAtrribPointer to the wrong values. Nearly all WebGL programs always use 0, 0 there. If you're doing something more fancy make sure you set them correctly.

这篇关于WebGL 中超出缓冲区范围的常见原因是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！