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

Getting WebGLTexture by texture pointer

I'm working on a project using unity WebGL.
What I need to do is to display the game scene in another browser window.
So what I tried was I rendered the scene to RenderTexture, and send the texture pointer (from GetNativeTexturePtr()) to the browser side.
When I send the texture pointer I used this jsdll function like:
ExtractWindow: function (windowId, w, h, texturePtr) {
ViewerManager.OnExtractWindow(windowId, w, h, GLctx, GL.textures[texturePtr]);
}
I used GL.textures[texturePtr] because I saw it in https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html.
I think it's supposed to return the WebGLTexture object, but it's returning null.
This is the only way I know to get WebGLTexture (I'm pretty much beginner in WebGL and Javascript). I'm not even sure if GL.texutre[] is a unity method or WebGL method.
Anybody know how the "GL.texture[]" works? Or is there another way to get a WebGLTexture by texture pointer?
Thanks for reading my question.

Answer to my own question.
The reason why "GL.textures[texturePtr]" was returning null was because the texturePtr was 0. I found that GetNativeTexturePtr() sometimes works and sometimes just returns 0, I'm not sure why it's working like that. But the workaround I found is to call "colorBuffer" property of the render texture before calling GetNativeTexturePtr(), then it returns the proper ptr.
var cb = _renderTexture.colorBuffer;
var texId = _renderTexture.GetNativeTexturePtr().ToInt64();
// texId is not 0 anymore.

The constructor alone for a RenderTexture doesn't create the underlying hardware object, so the underlying native ptr will be null until something forces it to be created.
Check out https://docs.unity3d.com/ScriptReference/RenderTexture.Create.html
Try calling _renderTexture.Create() before _renderTexture.GetNativeTexturePtr().
I'm not certain, but trying to access the color buffer on a render texture that hasn't been created yet might create it under the hood.
Cheers

How to implement basic LOD mechanism on a 3D json asset

I am not able to implement LOD to a 3d Object with json data.
Here is my implementation:
loader.load('models/robot-threejs/robot.json', function(object){
var lod = new THREE.LOD(object);
for (var i=1; i<=3;i++) {
console.log("this"+i);
lod.addLevel(object,i);
}
lod.updateMatrix();
lod.matrixAutoUpdate = false;
// lod.updateMatrix();
// lod.matrixAutoUpdate = false;
scene.add(lod);
//scene.add(object);
// object.position.set(30, 30, 30);
})

You're implementing THREE.LOD wrong.
The constructor does not take any parameters, so when you do this: new THREE.LOD(object);, it does nothing. You just have to use new THREE.LOD();
You're adding the same mesh to LOD 3 times, so you're not gonna see any difference. You need to create separate meshes with different geometries if you want to see any change in detail. Keep in mind that you have to generate these geometries yourself. Three.js doesn't automatically change the geometry for you. But you could use the SimplifyModifier for this.
Not sure why you're playing with matrix updates. There's no reason for this here.
You also need to call lod.update(camera) on your render loop if you want to see the change in detail.
I strongly recommend you read the documentation for LOD and read through the code in this example to better understand how it works.

Three.js flipSided property

I can't seem to find the flipSided property in the documentation for material.
I have a mesh that has 2 sides but I would like to flip it's sides.
Does anyone know where that property went?
Edit: To clarify I meant to flip the sides of a two sided object.

See the Migration Guide for help upgrading to the current version. There you will find the following:
doubleSided / flipSided properties moved from Object3D to Material's side property (THREE.FrontSide, THREE.BackSide and THREE.DoubleSide).
For example,
material.side = THREE.BackSide;
three.js r.62 - r.109

Making a rotation around a point

I'm using THREE API in order to realize some animations in my app. Now i have a real problem : i'd like making spherical rotation around a specific point. The "rotate" method included in mesh objects allow me to make them, but the center of the rotation is (by default i guess) the center of the mesh.
Then, i only rotate my objects around themself...
I have already found some examples, but they don't solve my problem. I tried to create objects 3D parents like groups, and tried to make the rotation around this groups after having translated them, but this still does not work...
Can you please give me a hand about that ?

I'm so sorry, i found my problem... Making a jsfiddle made me realize i forgot to instanciate my parent as " a new Object 3D() ", that was why i didn't see any objects in my scene when i used animation on my parent... i give you a short part of my code anyway dedicated to interested people finding any help :
// mesh
mesh = new THREE.Mesh( geometry, material );
parent = new THREE.Object3D();
parent.add(mesh);
// if i want my rotation point situated at (300;0;0)
parent.position.set(300,0,0);
mesh.position.set(-300, 0, 0);
scene.add(parent);
http://jsfiddle.net/KqTg8/6/
Thank you