Animation performance in browsers

Questions
1

Hello. I’m new in WebGl, but I dared to make logo animation for my client.
I checked performance in different browsers and computers. It works good everywhere, on my cell in Chrome for Android, even in old computer with graphic card build in processor!!! But unfortunally performance failed on my clients machine that disappointed my too much.

The logo was spinning with jerks.

The site is temporary at http://agropiter.com
The code (not arranged yet) https://github.com/davegahn/FORUM/blob/master/dev/js/logo.js

Client computer is quite good, it uses Windows7, Radeon7400. I checked preformance system monitor, there wasn’t any overloads of memory and CPU.

First I tested in Chrome(updated) and got errors:

  • WebGl_depth_texture extension not supported
  • OES_Texture_float_linear extension not supported

There are also some warnings in Chrome console (“texture image is not power of two” and “glDrawArrays: attempt to access out of range vertices in attribute 2”). I think they does not affect performance.

Are those errors critical?.. Rendering works, spinning fails only…I can tune some Chrome flags, but I’m not sure it can help.
After I tested anmation in chromium based browser Yandex browser. But got the error in alert - WebGL has blocked.

How to detect what can cause spinning jerks?
I would be happy to get any advices.

2

This one is problematic since it indicates that something with your geometry is not correct. Can you see the warning even if you remove the logo from the scene?

3

The error that Mugen87 is pointing out is caused by a difference in the count of the geometry attributes, in your case, two of your shapes have half as many UVs as needed. Best fix is to clean up your model file, but can do a temporary fix by replacing your loading function with the following code:

loader.load( 'https://raw.githubusercontent.com/davegahn/test2/master/F4.dae', function( collada ) {
  logo = collada.scene;
  mesh = logo.children[0].children[2];

  var children = [];
  mesh.traverse(function(child){
    if(child.geometry && child.geometry.attributes.uv){
      if(child.geometry.attributes.uv.count != child.geometry.attributes.position.count){
        children.push(child);  
      }
    }
  });

  for(var i = 0; i < children.length; i++){
    mesh.remove(children[i]);
  }

  console.log(children);
});