Problem attaching skeleton to mesh

[Pupix]

Hello everybody!

For the past few days I've been trying to create a 3D model viewer in babylon.js. The meshes, skeletons and animations are loaded from binary files. Everything seems to be importing as it should, but when I try to do bind the skeleton to the mesh, using mesh.skeleton = loadedSkeleton I receive the following errors:

BJS - [01:02:29]: Unable to compile effect: default babylon.1.12-beta.js:3

BJS - [01:02:29]: Defines: #define DIFFUSE

#define LIGHT0

#define HEMILIGHT0

#define UV1

#define BONES

#define BonesPerMesh 86

babylon.1.12-beta.js:3

BJS - [01:02:29]: Optional defines: #define LIGHT1,#define HEMILIGHT1,#define BONES4 babylon.1.12-beta.js:3

BJS - [01:02:29]: Error: ERROR: too many uniforms babylon.1.12-beta.js:3

and the mesh dissapears from my canvas.

[Temechon]

Hello Pupix ! Welcome !

 

It's not an easy task to debug your code when we have no way to reproduce this problem... Is it possible for you to create a simple scene reproducing this error ? (jsfiddle, babylon playground, dropbox, custom server, ...)

I don't know if I will be able to help you, but it will definitely help Deltakosh and others to help you.

 

Thanks

[Pupix]

Hello Pupix ! Welcome !

 

It's not an easy task to debug your code when we have no way to reproduce this problem... Is it possible for you to create a simple scene reproducing this error ? (jsfiddle, babylon playground, dropbox, custom server, ...)

I don't know if I will be able to help you, but it will definitely help Deltakosh and others to help you.

 

Thanks

Right, I should have made that first.

 

Mesh and skeleton loaded (proof that everything imports fine):

http://manolea.altervista.org/babylon/index.html

 

Version where I try to attach the skeleton to my mesh:

http://manolea.altervista.org/babylon/sindex.html

[Temechon]

Hey, it's Akali ! I'm a big LoL player ^^

 

Edit : After some investigations, I think I found your issue : you have "too many uniforms"

 

Some explainations : When a mesh is created and displayed, a basic shader is created by Babylon. This shader is not the same if the mesh has a skeleton ("bones") or not, that's why you have two differents behaviours here.

When your skeleton is linked to your mesh, the basic shaders creates an array called mBones : 

#ifdef BONESuniform mat4 mBones[BonesPerMesh];#endif

As you can see, its length is BonesPerMesh => it creates a new uniform variable for each value of this array.

The max number of uniform is managed by the browser, and has a different value for each one. If the number of uniform in your shader exceeds this max limit : the browser crashes.

 

You can go here : https://www.browserleaks.com/webgl and check the row Max Vertex Uniform Vectors.

 

For IE11, it's 512 and 254 for Chrome ==> Your scene should work in IE11 (and it works actually).

 

 

To fix this in Chrome, I think you should reduce the number of bones of your skeleton. Maybe a skeleton professionnal could help you here (maybe gryff?).

 

Hope this help !

 

Cheers, 

[Pupix]

What you said makes sense and I am boggled by it. How in the world can IE render 3D better than Chrome/Firefox but it's crap in every other aspect.

 

Is this a problem caused by the Babylon's shader or with webGL as a whole? If I were to use another framework, like Three.js or whatever, would I have the same problem?

[Temechon]

IE11 is far better than previous version of IE, and I know a lot of efforts have been made in WebGl compatibility. I don't know at all for others frameworks.

 

The number of max uniforms is limited by the browser as you can see it on the website I sent you, but maybe this issue is caused by Babylon and its way to handle a basic shader depending on the number of bones... You should poke Deltakosh (babylon creator) and see what he thinks about it.

[Pupix]

The number of max uniforms is limited by the browser as you can see it on the website I sent you caused by Babylon and its way to handle a basic shader depending on the number of bones... You should poke Deltakosh (babylon creator) and see what he thinks about it.

 

Yes, I know the limit is the browser but I asking if the problem was babylon's shader creating so many uniforms or if what I was trying to do was actually a WebGL limit.. Perhaps it didn't come out as clear as I thought it would.

 

After reading for a while and comparing different frameworks it indeed seems to be an implementation problem. For example Three.js only allows for 56 bones because it uses ANGLE, while PlayCanvas allows for 256 bones.

[reddozen]

I wonder what Babylon can borrow from PlayCanvas... especially if they can support that many bones effectively...

[GameMonetize]

babylon.js allows as many bones as your gfx card can support It only creates one matrix per bone using uniform. Perhaps we should think about using a buffer instead. Let's me add this idea to our backlog

[GameMonetize]

And BTW three.js does not use angle. There are like babylon.js a javascript framework

[reddozen]

ANGLE is built into the browser as far as I know. It's due to the limited number of users that know how / don't have openGL installed on their windows machines. I wish ANGLE would disable itself if you had openGL installed. I understand why they use it, but I wish it was a little more dynamic because it is a performance hit.

[GameMonetize]

I've just checked: PlayCanvas use EXACTLY the same technique as babylon.js: 

code += 'uniform mat4 matrix_pose[' + numBones + '];\n';