0

This has had me beat for a while now. I'm making a game, and the main map is a model using the obj format. I load it like this:

var objLoader = new THREE.OBJLoader();
objLoader.setPath('Assets/');

objLoader.load('prison.obj', function(prison){
    prison.rotation.x = Math.PI / 2;
    prison.position.z += 0.1;
    prison.scale.set(15, 15, 15)
    scene.add(prison);
});

So when I was loading the same model, but smaller, it worked normally. But, now I have added more to the model, and it is much bigger. WebGL starts giving me this warning: [.WebGL-0x7fb8de02fe00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1. This warning happens 256 times before WebGL says WebGL: too many errors, no more errors will be reported to the console for this context.

Warnings in console

And with this warning, my model doesn't load completely. In Preview, I see the model as this, as expected:

Correct Model

But in Three.js, I see something different:

Incorrect Model in Three.js

Well, I'm not exactly sure what's wrong here:

  1. Maybe because I'm using OBJLoader CDN
  2. Maybe my model size is too large
  3. Maybe I have no idea what I'm doing

Any help is appreciated, thanks. Let me know if you need more detail.

9
  • Are you sure that obj file is correctly formatted? It sounds like it may be corrupt in someway.
    – Alex Wayne
    Nov 29 '21 at 0:20
  • Has your code changed between loading the model that works, and the one that doesn't? If you've made modifications to the code as well, then you might want to try loading the working model again, just to make sure a problem in a code update isn't causing the problem.
    – TheJim01
    Nov 29 '21 at 1:31
  • If your code hasn't changed, it's either a corrupt OBJ, or the model is too big. Rather than making it a monolithic model, you could break it up into smaller models. For example, the cells could be a single model, instanced 4 times, and positioned side-by-side.
    – TheJim01
    Nov 29 '21 at 1:31
  • 1
    @Anye Looks like you're going to have to dig through those children to find out which one has the out-of-range vertices. :-) I think setting visibility: false to each will help you narrow down the culprit, because the error should go away when you're not rendering it.
    – Marquizzo
    Dec 1 '21 at 23:20
  • 1
    @Anye I just added an answer with details. Hope it helps!
    – Marquizzo
    Dec 6 '21 at 19:01
0

This error is telling you that your geometry attributes count don't match up. For example, your geometry could have:

  • 100 vertex positions
  • 99 vertex normals
  • 99 vertex UVs

... or something of that nature. When looking up info on that 100th vertex, it says "attempt to access out-of-range vertices"

Ideally, you'd want to re-export the OBJ asset so you don't have to manually find the geometry that's causing the problem. However, in case you cannot get a new OBJ, you could either:

  • prevent the problem geometry from rendering with mesh.visibility = false
  • Fix the geometry attribute count. To fix it, you'll have to find which attribute is short:
// We assume you already found the mesh with the problem.
const problemGeometry = mesh.geometry;

// Now we dig through the console to see each attribute.
// Look up each attribute.count property to see which one is short. 
console.log(problemGeometry.attributes);

// Then you'll have to set the draw range to the lowest of these counts
// Here I assume the lowest is 99
problemGeometry.setDrawRange(0, 99);

Don't forget to also look at the geometry.index attribute, if your geometry has it. That should fix your geometry to render with the lowest common number of attributes. See here for info on setDrawRange

1
  • I'll try this, thanks! But a side question, how is this working in Preview then?
    – Anye
    Dec 7 '21 at 22:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.