BoundingBox Does Not Affect Occlusion Culling for the Model

here is my result:

so i change the height of some of my geometry and camera culling acts like i never change them and the disapear near the bottom of my view

Here is my code that changes geometry

  set height(value: number) {
    if (!this._movable) return;
    this._height = value;
    const dif = value - this._baseHeight;
    const rightPosition = this.right.geometry.getAttribute('position');
    const leftPosition = this.left.geometry.getAttribute('position');
    const basePosition = this._baseGeometry.getAttribute('position');
    for (var i = 0; i < this._topVerticesSection.indexes.length; i++) {
      const index = this._topVerticesSection.indexes[i];
      const y = basePosition.getY(index) + dif;
      rightPosition.setY(index, y);
      leftPosition.setY(index, y);
    rightPosition.needsUpdate = true;
    leftPosition.needsUpdate = true;

    // this.right.geometry.computeBoundingSphere();
    // this.left.geometry.computeBoundingSphere();

this.left and this.right is type of THREE.Mesh

if i uncomment computeBoundingSphere it works, but im affraid that it will calculate my points even if they are not in my view.

I even tried to set boundingBox to

new Box3(new Vector3(-300,-300,-300), new Vector3(300,300,300))

it doesnt change anything.

after computeBoundingBox()
console.log(this.right.geometry.boundingBox); shows

 Vector3(-0.17794036865234375, y: 0.4462258815765381, z: -1.181008338928222),
 Vector3(6.9234161376953125, y: 58.45136260986328, z: 3.295577049255371)

Whitch is wrong maxY should be around 116 after geometry changes

Any ideas what am i doing wrong?

Just by looking at the code, I cannot see any problem. When I try to replicate the problem (updating the position attribute values and computing bounding box) – it works well. Any chances to prepare some online debuggable code (CodePen, JSFiddle, CodeSandbox, etc)?

In the code only specific elements of the buffer array are changed depending on _topVerticesSection. Without debugging it is impossible to check this:

  • computeBoundingBox uses only the first count vertices in position
  • the data array in position could be longer
  • if you change data beyond count it will not be used by computeBoundingBox

If I were you, I will check what values are written, in what position they are written and whether they are used afterwords. Also, I will try with simpler code, by removing parts of the code, just to test bounding boxes, e.g.:

  set height(value: number) {
    const rightPosition = this.right.geometry.getAttribute('position');
    for (var i = 0; i < rightPosition.count; i++) {
      const y = rightPosition.getY(i) + 1000;
      rightPosition.setY(i, y);

If this code works, then it indicates something in the removed parts causes the problem.

And finally, I will also check whether the console.log are correct. There is some non-zero chance that the wrong values are printed. For example, in the code, the original values of y are logged in the console, and you might be confused if you see the console log and assume these are modified y values.

Most likely all above is just irrelevant, but I hope you could debug your code and resolve the problem.

PS. Also have in mind this: in some cases Three.js algorithms use the bounding box, in other cases it uses the bounding sphere. I think it might be a problem if you change the geometry and update only the bounding box. All checks that rely on bounding sphere will use the bounding sphere for the old data, thus they will ‘not see’ that the geometry has changed.

1 Like

I dont really have time to create an online example, but some of my bounding boxes are calculated, and are still culled. Perhaps it works, but Three.js algorithms are using bounding sphere insted of bounding box

i’ll use bounding sphere for now, maybe I will come back to this topic later on

Thank you