`Box3.setFromBufferAttribute` does not correctly handle InterleavedBufferAttribute with offset

[AlexOct]

Description

When using Box3.setFromBufferAttribute() on an InterleavedBufferAttribute, the resulting bounding box can be incorrect if the attribute has a non-zero offset. This is because fromBufferAttribute() does not appear to correctly take the offset into account for interleaved data.

In the setFromBufferAttribute function,the real count in loop should be equal to attribute.count - attribute.offset.Or attribute cout of interleavedBufferAttribute equal to attribute.data.count - attribute.offset

Reproduction steps

Steps to reproduce the behavior:

1. Create a geometry using InterleavedBufferAttribute for positions.
2. Provide a non-zero offset
3. Call box.setFromBufferAttribute(positionAttribute);
4. The resulting box may be invalid or incorrect.

Code

      const ReverseWindingOrder = function (idxArray: number[]) {
  for (let i = 0; i < idxArray.length; i += 3) {
      let tem = idxArray[i];
      idxArray[i] = idxArray[i + 1];
      idxArray[i + 1] = tem;
  }
      };
     const posData = [
        0, 0, 0, 0, 0, 0, 0, 0, 0,//0
        1, 0, 0, 1, 0, 0, 1, 0, 0,//1
        0, 0, 1, 0, 0, 1, 0, 0, 1,//2
        1, 0, 1, 1, 0, 1, 1, 0, 1,//3
        0, 1, 0, 0, 1, 0, 0, 1, 0,//4
        1, 1, 0, 1, 1, 0, 1, 1, 0,//5
        0, 1, 1, 0, 1, 1, 0, 1, 1,//6
        1, 1, 1, 1, 1, 1, 1, 1, 1,//7
        
        0, 0, 0, 0, 0, 0, 0, 0, 0,//0
        2, 0, 0, 2, 0, 0, 2, 0, 0,//2
        0, 0, 2, 0, 0, 2, 0, 0, 2,//2
        2, 0, 2, 2, 0, 2, 2, 0, 2,//3
        0, 2, 0, 0, 2, 0, 0, 2, 0,//4
        2, 2, 0, 2, 2, 0, 2, 2, 0,//5
        0, 2, 2, 0, 2, 2, 0, 2, 2,//6
        2, 2, 2, 2, 2, 2, 2, 2, 2,//7
     ];
      const idxData = [
          1 * 3 + 0, 5 * 3 + 0, 7 * 3 + 0, 1 * 3 + 0, 7 * 3 + 0, 3 * 3 + 0,//+x
          2 * 3 + 0, 6 * 3 + 0, 4 * 3 + 0, 2 * 3 + 0, 4 * 3 + 0, 0 * 3 + 0,//-x
          4 * 3 + 1, 6 * 3 + 1, 5 * 3 + 1, 5 * 3 + 1, 6 * 3 + 1, 7 * 3 + 1,//+y
          0 * 3 + 1, 1 * 3 + 1, 2 * 3 + 1, 2 * 3 + 1, 1 * 3 + 1, 3 * 3 + 1,//-y
          2 * 3 + 2, 7 * 3 + 2, 6 * 3 + 2, 2 * 3 + 2, 3 * 3 + 2, 7 * 3 + 2,//+z
          0 * 3 + 2, 4 * 3 + 2, 5 * 3 + 2, 0 * 3 + 2, 5 * 3 + 2, 1 * 3 + 2,//-z

          
          1 * 3 + 0, 5 * 3 + 0, 7 * 3 + 0, 1 * 3 + 0, 7 * 3 + 0, 3 * 3 + 0,//+x
          2 * 3 + 0, 6 * 3 + 0, 4 * 3 + 0, 2 * 3 + 0, 4 * 3 + 0, 0 * 3 + 0,//-x
          4 * 3 + 1, 6 * 3 + 1, 5 * 3 + 1, 5 * 3 + 1, 6 * 3 + 1, 7 * 3 + 1,//+y
          0 * 3 + 1, 1 * 3 + 1, 2 * 3 + 1, 2 * 3 + 1, 1 * 3 + 1, 3 * 3 + 1,//-y
          2 * 3 + 2, 7 * 3 + 2, 6 * 3 + 2, 2 * 3 + 2, 3 * 3 + 2, 7 * 3 + 2,//+z
          0 * 3 + 2, 4 * 3 + 2, 5 * 3 + 2, 0 * 3 + 2, 5 * 3 + 2, 1 * 3 + 2,//-z
      ];
      ReverseWindingOrder(idxData);
      const pos = new THREE.InterleavedBuffer(new Float32Array(posData),3);
      const idx = new THREE.BufferAttribute(new Uint16Array(idxData), 1)

      const geo = new THREE.BufferGeometry();
      const attpos = new THREE.InterleavedBufferAttribute(pos,pos.stride,0);
      geo.setAttribute('position',attpos);
      geo.setIndex(idx);
      geo.addGroup(0,36);

      const geo0 = new THREE.BufferGeometry();
      const attpos0 = new THREE.InterleavedBufferAttribute(pos,pos.stride,24 * pos.stride);
      geo0.setAttribute('position',attpos0);
      geo0.setIndex(idx);
      geo0.addGroup(0,Infinity);

      const material= new THREE.MeshStandardMaterial({
        side:THREE.BackSide,
        color: 0x00ff00,
        metalness: 0.8,
        roughness:0.5,
      });
      const cube = new THREE.Mesh(geo, [material]);
      cube.position.set(5,0,0);
      const cube0 = new THREE.Mesh(geo0, [material]);
      cube0.position.set(10,0,0);

      this.scene.add(cube);
      this.scene.add(cube0);

Screenshots

No response

Version

r167

Device

No response

Browser

No response

OS

No response

[Mugen87]

A single vertex can consist of multiple data like position, normals, uv, colors etc. When using interleaved buffer attributes, these data are managed in an interleaved fashion. So [v1,n1,uv1,c1, v2,n2,uv2,c2 ...].

offset is intended to describe where position, normal, uv, color etc. of a single vertex start relative to the vertex start position in the buffer.

three.js/examples/webgl_buffergeometry_points_interleaved.html

Lines 101 to 102 in b730a20

	geometry.setAttribute( 'position', new THREE.InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );
	geometry.setAttribute( 'color', new THREE.InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );

In above example, a single point/particle consist of a position and a color. The position data come first so there is no offset. The color has an offset or 12 because the first 12 slots in the Uint8Array are reserved for the x, y an z position values of the vertex.

You can't use offset to describe the start of a complete new set of vertices. It seems that is what you are doing in your code. Meaning you have a single interleaved buffer used for two distinct geometries.

I think what you want to use instead is BufferGeometry.drawRange. Meaning you maintain a single buffer attribute but then define via draw range what part of the geometry data should be used for a single mesh.

[AlexOct]

Thanks for the clarification!

You're absolutely right that offset in InterleavedBufferAttribute refers to the position of an attribute within a single vertex's layout, not a way to switch between different vertex sets.

In my case, what I'm actually trying to do is something closer to baseVertex behavior, rather than just setting a draw range. The geometry I'm dealing with has a large number of vertices, and in order to reduce memory usage, I'm using uint16 for indices. Since uint16 can only index up to 65535 vertices, I split the rendering into two passes:

In the first draw call, I use drawRange to render indices from 0 to 65535.
In the second draw call, I reset the index buffer to again range from 0, but this time the actual vertex data starts from an offset (like a base vertex).

So what I really need is a way to define a baseVertex, i.e., an offset into the vertex buffer for the second batch of rendering. Since three.js doesn’t directly expose baseVertex functionality in WebGL1, I’m working around it by splitting the geometry and managing buffer slices manually.

Let me know if you have any suggestions for better ways to handle this in three.js!

[Mugen87]

Since three.js doesn’t directly expose baseVertex functionality in WebGL1

AFAIK, WebGL does not provide a full counterpart to OES_draw_elements_base_vertex. The below WebGL extensions work with instancing and multidraw but not with pure elements (index rendering).

https://registry.khronos.org/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/
https://registry.khronos.org/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/

[AlexOct]

Thanks! Just to clarify — is this added to the milestone for tracking purposes, or is it something that might be addressed in r176?

[Mugen87]

It's added for tracking purposes.