I’m developing an OpenGL engine and I spent some time last year porting parts of it to WebGL. One piece of the engine is a skinnable 2D Gui that is constructed from quads. I render it using a perspective camera with a 90 degree field of view. This has been working quite well for some time, but in the Chrome browser I get something that looks like the window on the left, while in my standalone engine and in Firefox I get something that looks correct (right).
Any ideas as to why this is happening?
NOTE: I do realize that I could be using orthographic projection and I may switch at some point, but what I have really should be working.
Aha! Looks like someone noticed this and fixed it! Sweet!
Now if I could just figure out why I’m getting 60+ fps in Chrome and @25 fps in Firefox.
Spoke too soon. It seems that whether or not it works properly depends on how the document is opened, though I haven’t determined the exact conditions. This is very odd.
EDIT: Ah, so I forgot I had changed an anti-alias setting. Evidently, it doesn’t work the same way in Firefox. Interesting…
And with other browsers except Firefox what happens?
I originally thought the problem above was caused by the perspective camera, but it turned out to be the anti-alias setting, which works in Chrome, but not in Firefox. So even though it looked correct in Firefox, it was only because the anti-alias setting is not implemented and was having no effect. The solution was to simply change the anti-alias flag, which of course means I’ll have to implement anti-aliasing myself, if I want it.
Incidentally, I was also having a big problem with frame rate in Firefox. I learned that the alpha flag, set to false, was the cause. I don’t know why I had it set to false, but toggling it made a huge difference. Now my engine runs smoothly in both browsers.