CODEWITHSUNDEEP
performancefirefoxthree.jswebglmotion
user2483894
user2483894

Reputation: 31

Webgl and three.js running great on chrome but HORRIBLE on firefox

Basically I am downloading a zip file and extracting a collada file to load in the browser. This works freaking awesome in chrome but is REALLY slow with model movement from the mouse in Firefox. I cant seem to figure this out or if there's a setting I'm missing to speed up Firefox or what. The file is loaded up here

http://moneybagsnetwork.com/3d/test.htm

Its using jsunzip and three.js to load everything. I've bypassed the jsunzip and that's not the issue. I've also dumbed down the model to not use any event listeners and no lights and that didn't help one bit. Completely stumped here and the model really isn't that big :/

Here is a link to a zip of the files I'm using

http://moneybagsnetwork.com/3d/good.zip

Sorry about the multiple commented lines. I might turn things back on if this gets fixed.

Upvotes: 1

Views: 6435

Answers (2)

yaku
yaku

Reputation: 3101

I have noticed that Chrome is usually way faster and more responsive with Three.js applications than Firefox. The difference is not so much on the WebGL side, but at the plain Javascript supporting code.

Looking at your code, it seems you do some very heavy javascript stuff on your onmousemove function. This could very well cause much of the performance gap between the browsers. Mousemove is executed many many times during each and every mousemovement, so it quickly adds up to slow performance. It could also be that Firefox actually creates more mousemove events for similat cursor movements (not sure).

You could either move most of the raycasting and other stuff from mousemove to mouseclick. Alternatively, you could implement a delayed mousemove so that the function is called only maximum of X times per second, or only when the mouse has stopped. Something like this (untested but should work):

var mousemovetimer = null; 

function onmousemove(event){     
  if (mousemovetimer) {
    window.clearTimeout(mousemovetimer);
  }
  mousemovetimer = window.setTimeout(delayedmousemove, 100);
}
function delayedmousemove(event) {
  // your original mousemove code here
}

Upvotes: 3

Mike Ratcliffe
Mike Ratcliffe

Reputation: 1025

Maybe your graphics card is in our blacklist. There is usually a note about this towards the bottom of about:support.

Cards can be blacklisted for various reasons, missing drivers / features, occasional crashes ... see: http://www.sitepoint.com/firefox-enable-webgl-blacklisted-graphics-card/

  • To enable WebGL, set webgl.force-enabled to true.
  • To enable Layers Acceleration, set layers.acceleration.force-enabled to true
  • To enable Direct2D in Windows Vista/7, set gfx.direct2d.force-enabled to true

Upvotes: 1

Related Questions