Horizontal glitch lines bug

Question

In Voxel.js, a Three.js based project that I work on, we recently started seeing a weird rendering that shows up on Macbook Airs (Intel HD Graphics 3000) but it doesn't show up on other Macbooks like those with GeForce 320Ms.

Here are 4 screenshots from the Canary WebGL Profiler showing how the line appears http://imgur.com/a/2eRhO#0

The line itself is the same color as the three.js renderer fill color so it isn't visible until there are non-fill colored things being drawn to the canvas

To try and reproduce the glitch, here is a demo: http://maxogden.github.io/voxel-hello-world just look around a bit until the lines show up

Here is a video of the glitches showing up during gameplay http://www.youtube.com/watch?v=KfR8tJ36KuY

And another screenshot where the fill color is set to pink http://i.imgur.com/Ww6nMOA.png

The code that I believe introduced this glitch is here: https://github.com/shama/voxel-texture/blob/master/index.js

We used to use many .png textures, one for each texture, but now we use composite texture atlases that are packed and generated on the fly, e.g. http://imgur.com/qgSYSNf

Has anyone seen this behavior before? Any ideas on how I could track down the root cause?

Answer 1

Do those bugs also occur in Safari? If so, there is a good chance that they are caused by Apple's graphics drivers. Try running other WebGL applications on those MacBooks, and see if they exhibit the same problems.