GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

[QuinTRON]

Hi community, 

I have been using Pixi js for some time now, absolutely love it.
I am using their latest version 4.3.4 and notice in Google Chromes Console there is 256+ Warnings looking like this:

Quote

[.Offscreen-For-WebGL-08F99C68]GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

My world is currently 2000x2000px, with roughly 200 sprite objects in it (pretty tiny really)

I have tried:

• removing all of my pixi Graphics objects, the warnings still show
• commenting out all of my world sprites, the warnings still show
• commenting out all of my player sprites, the warnings still show

There is a performance degradation if the browser loads the game loop prior to the warnings finished, probably because of a race condition with the Web Socket requests.

Any help would greatly be appreciated!

 

[QuinTRON]

A suggestion was to try and make the app() dimensions smaller; so I tried 500x500 and I still have the same warnings. 

[xerver]

Please share a running example that reproduces the bug, as well as your browser/os information.

[QuinTRON]

Dev/Test server:

https://hookem.herokuapp.com/

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Win 7, 64-bit

[QuinTRON]

I noticed Chrome's Developer Tools allows you to break on specific Event Listeners; such as WebGL Errors or Warnings. 
To do this go to: Chrome's F12 (Dev Tools) => Sources (tab) => Event Listener Breakpoints (right panel, accordion) => WebGL.
This has allowed me to dive into the specific area where my warning messages are appearing.

Unfortunately I require Pixi.js developers to help articulate this problem more.
The obvious question is, why would this cause a warning considering all of my assets have already been loaded into memory?

[xerver]

Do you think you can build a more constrained example? I'm having a hard time tracking through this since it is minified, and has a lot of irrelevant stuff. Just something that is purely pixi and only renders enough to get the error would be very helpful.

[ivan.popelyshev]

I'd like to help too

[QuinTRON]

Ok guys, I have an update on this issue.

As I kept populating sprites into my world -I was happily grouping sprites into their own Containers, and some times Particle Containers.
Having done lots of testing I was getting very strange behaviours, mainly the groups of sprites not rendering. 

After taking the time to restructure my stage child structure I have condensed all of my Particle Containers into 1 and converted some of the other ones into standard Containers.
Now everything is consistently rendering as per my expectations.

I am no longer getting the below browser warning with this implementation. (coincidence?)

For-WebGL-08F99C68]GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer

However I am now getting a different browser warning:

[Violation] Long running JavaScript task took 754ms

I am not able to pin point what resource is causing this, but for now I am happy the GL errors are gone. 

 

Cheers

[user123456789]

I just had the same problem with latest pixi.js.

It happened because I had a method which I used to create more than one particle container as e.g. 

var stars = new PIXI.particles.ParticleContainer(count, { alpha: true });

The count varied between 50 - 200 during method calls, I ended up replacing count variable with hard-coded value: 1500 .. and error disappeared.