We Keep Coding

GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1, three.js

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.
And with this warning, my model doesn't load completely. In Preview, I see the model as this, as expected:
But in Three.js, I see something different:
Well, I'm not exactly sure what's wrong here:
Maybe because I'm using OBJLoader CDN
Maybe my model size is too large
Maybe I have no idea what I'm doing
Any help is appreciated, thanks. Let me know if you need more detail.

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

Shadow map in Babylon JS

Im somewhat new to Babylon JS but I created a scene and filled it with some cubes, added a light and a shadow map using:
new BABYLON.ShadowGenerator(4096, light);
Im getting really aliased shadow edges. I would like to know how I can get the aliasing to be smaller without bumping up the shadow map size.
Its already at 4096 which is already fairly large. Am I missing something? Thanks!

you can try using one of the soft shadows flag, while reducing the shadow map size, because as you say - 4096 is way too large.
You can read more about it here, and try the following
shadowGenerator.useExponentialShadowMap = true;
// or!
shadowGenerator.usePoissonSampling = true;

It turns out that how spread out shadow casting objects are makes a difference in the shadow quality. For example, go here and change the "distance_range" var to 10:
https://playground.babylonjs.com/#ZSB485#3
I ended up just using shadowGenerator.useBlurExponentialShadowMap = true and that seemed to be good enough for me.

Add and remove THREE.Points from scene in three.r84

I recently switched from three.js revision 71 to revision 84.
When using the THREE.PointCloud it was very easy to update (adding and removing) points from the scene like this:
function updatePoints(newData) {
geometry.dispose();
geometry.vertices = [];
geometry.vertices.push(...);
scene.add(newPoints);
render();
}
Now in revision 84 THREE.PointCloud is replaced by THREE.Points and this pattern doesn't work anymore and I'm clueless why this is.
My actual code works perfectly fine in r71 but in r84 only some points get removed. The raycaster does not work on the points that should be removed neither can they be animated but they do not disappear from the scene.
I tried multiple things by adding scene.remove(oldPoints);and geometry.verticesNeedUpdate = true;to the function as well as adding different setTimeout before rendering and adding the points to the scene. None of this worked.
Any help would be highly appreciated.
Thank you,
k

Since you already need to recreate the vertices, it's not that much more work to recreate the whole cloud:
geometry.dispose();
geometry = new THREE.Geometry();
geometry.vertices.push(...);
scene.remove(pointCloud);
pointCloud = new THREE.Points(geometry, material);
scene.add(pointCloud);
https://codepen.io/Sphinxxxx/pen/zwqvmP

3D PointCloud Particle System does not show any particles, unless the camera can see the coordinate origin. Math or JS error?

Thank you for having a look at my problem. Currently I am working on a university project and have reached a problem that I can't seem to solve. I narrowed down where the mistake most likely occurs, but I am still a little clueless. I'm going to explain my situation below:
This is a 3D space ship shooter, that we are building using three.js. I am trying to create a ray of particles, that I want to use as an afterburner effect for the space ship.
The first step was to write a particle renderer. The particle renderer has an update function that periodically updates the particles themselves, as well as the start and end point of the particle ray. So in each update call, after a possible movement of the spaceship, I want to calculate the new start and end point of the particle ray.
The particle renderer itself works perfectly fine in a test environment, however using it in the real program I encountered a weird bug: The particle ray works just fine, as long as the coordinate origin is visible for the camera. If the camera cannot see the origin, the particles appear to be invisible. One possible error might be, that the system actually works but the particles are rendered in a different position? Seems very unlikely though, since for the most part the program logic is fine.
I am going to post the code below, that updates the position of the ship. In case more code is needed, please feel free to comment below or ask me directly. I can send you the link to the git repository, however, since it is a public repository of my university group I am not comfortable posting the whole code publically. Thank you for understanding.
// this is the update function that is called in each frame
function update() {
// get the ship position and it's direction vector
var pos = ship.position;
// default direction vector
var dirVector = new THREE.Vector3(0,0,1);
// apply rotation of ship
dirVector.applyQuaternion(ship.quaternion);
// center of the ship has relative coordinates (0,0,0)
// start position of the ray. relative coords: (0,0,6)
var startScale = 6;
startVector = new THREE.Vector3(
pos.x+startScale*dirVector.x,
pos.y+startScale*dirVector.y,
pos.z+startScale*dirVector.z
);
// end position of the ray. relative coords: (0,0,8)
var endScale = 8;
endVector = new THREE.Vector3(
pos.x+endScale*dirVector.x,
pos.y+endScale*dirVector.y,
pos.z+endScale*dirVector.z
);
// update the start- and endpoint of the particle spawner
particleRay.updateStartAndEndpoint(startVector, endVector);
// update particles
particleRay.update();
}
Here you'll find two screenshots, one showing the correct particle ray and one showing the error.
I think the most likely cause of this problem might be a math error or an error while handling the vectors, however neither me, my tutor and anyone in my group can figure it out. I would really appreciate any kind of input on this matter. Thanks a lot!

GLGE API setRot/setRotX doesn't work

I'm trying to make a little scene for viewing 3D models.
I modified the GLGE Collada example to add a .dae model from code.
http://goleztrol.nl/SO/GLGE/01/
What I've got
So far it works. The camera is rotated using an animation.
Using the buttons 'Add' and 'Remove' the model is added and removed from the scene, using the following code (Don't mind 'duck'. It was a duck in the original example.)
var duck = null;
function addDuck()
{
if (duck) return;
duck = new GLGE.Collada();
doc.getElement("mainscene").addCollada(duck);
duck.setId("duck");
duck.setDocument("amyrose.dae");
duck.setLocY(-15);
duck.setRotX(1);
duck.setScale(2);
}
function removeDuck()
{
if (!duck) return;
doc.getElement("mainscene").removeChild(duck);
duck = null;
}
Problem
Now the model is lying down, while it should stand up. The various methods of the element seem to work. The location is set, and the scale is set, but the call to setRotX seems to be ignored. I tried various others methods from the api, but setRotY, setRot, setQuatX and setDRotX all seem to fail. I don't get any errors (well not about this method). I tried values of 1.57 (which should be about 90 degrees), but other values as well, ranging from 1 to 180.
I can't find out what I'm doing wrong. Of course I could rotate the model itself in Blender, but I'd like to do it using the GLGE API.
Update
When I load the demo-model, seymourplane_triangulate.dae, the rotation works. Apparently my model differs in that it cannot be rotated. I just don't understand why. I figured it may be because the model is built of various separate meshes, but I don't understand why scaling and moving does work.
Does anyone know what's wrong with this model, and what I could do to fix it (maybe using Blender)?
Setting an initial rotation in the XML file that contains the scene does work. Setting rotation on another element (like the whole scene) works as well.

You need to rotate it after it has been loaded.
You can do this in the callback to setDocument
duck.setDocument("amyrose.dae", null, function() {
duck.setLocY(-15);
duck.setScale(2);
duck.setRotX(0);
duck.setRotY(0);
duck.setRotZ(3);
});