SkinnedMesh bug when far from scene root (0,0,0)

[qornflex]

I think I found a bug about your SkinnedMesh (tested on iPhone 6 & 8).

If this is already reported, I'm sorry, I didn't find it in the issue list :(

It seems the gpu skinning is not working correctly and getting crazy on mobile.
When a SkinnedMesh is moving or moved at high value positions (ex: x:0, y:0, z:1000), the skinning is not accurate anymore and starts spider dance.

The scale of the mesh is affecting the bug. Bigger the scale is, lesser the bug.

It seems the skeleton bones values are not calculated correctly at each frame and the bonesTexture/bonesMatrix on the skinning shader is pushing vertices at wrong place.
This is just my feeling of course.

I ran many tests before posting this... looking for a clue in my animated exports but I found the bug is happening with any kind of formats (GLTF, FBX, Collada, JSON, ...) and models from ThreeJS repo.

That's very annoying because that means we are unable to develop a simple runner game with an avatar running (avatar.position.z increasing then) without having this issue :((
I still don't know how I'll manage it as morphTargets is not an option :(

Hope you guys can help here.

I made clear examples with clean source to expose the problem. It's quite easy to verify it on a smart phone:

Appearing only on mobile (z=10000):
http://cornflex.org/webgl/skinning-bug.html

With floatVertexTextures set to false (z=10000):
http://cornflex.org/webgl/skinning-bug2.html

Getting worse with distance (z increasing):
http://cornflex.org/webgl/skinning-bug3.html

Very very far from center (z=70000000) > bug also appearing on desktop but certainly due to float precision issue:
http://cornflex.org/webgl/skinning-bug4.html

Video Preview in my game environment:
This is a realistic scale world (1.0m = 1.0 threejs unit).
Bug is appearing only after 50-60m from scene root and getting worse with distance:
http://cornflex.org/webgl/skin-bug.mp4

VERY IMPORTANT
The mesh used from the ThreeJS repo is way too big. It's like 20m tall.
That's why the z value has to be bigger to see the bug.
If this mesh is scaled down at realistic size, then the bug starts to appear even at 100m.

Three.js version

• Dev
• r89
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer
• Safari

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

iPhone 6, 8

[Mugen87]

Um, your demo looks good on my Pixel.

[donmccurdy]

Confirmed issues on my iPhone SE —

WebGL precision issues in iOS perhaps

[Mugen87]

But the iOS devices actually use the float texture based code path of the skinning implementation, right? Can you verify this with the following conformance test?

https://www.khronos.org/registry/webgl/conformance-suites/1.0.3/conformance/extensions/oes-texture-float.html

[donmccurdy]

iPhone SE has five failures on that page. 😕

[qornflex]

I made a small screencast to show you in my project:
http://cornflex.org/webgl/skin-bug.mp4

If the avatar goes too far from 0,0,0, the skin starts to get really buggy as you can see.
I made a deep profiling of the skeleton and bones. All seems fine except the geometry is "pulled back" in some way... I though about bad animation root but again, all seems fine in Threejs with that...

The prob is clearly linked to the Skeleton and the bonesTexture of the Skinning shader.
I also though about precision but as Mugen said, iOS device should support that with ease.

... why only on iphone then :/

I'm quite stuck... I'm reorienting to png sequences as backup plan ... :(

[titansoftime]

This is most likely due to the iphone 6 not supporting enough bones.

I had the exact same problem.

Check your bone limit here: https://virtulo.us/2/vr/test

[qornflex]

I don't think so.
If the skinnedmesh stays at 0,0,0, there is no prob at all :/
I'm even thinking about moving all the assets instead of the avatar... (this is my workaround #2) but I'd surely prefer to have the skeleton working as good as desktop of course.

A friend just reported the same bug on iPhone 8

[Mugen87]

What results do you get with the following conformance test?

https://www.khronos.org/registry/webgl/conformance-suites/1.0.1/conformance/misc/shader-precision-format.html

[qornflex]

After looking at the ThreeJS sources for 2 days... I think there is a prob when the bonesTexture is updated.
It looks like this texture doesn't udpate correctly and then push back the vertices to original positions... but I could be wrong of course.

[qornflex]

[qornflex]

Hmmm... here I have some FAILED, look:

[Mugen87]

Maybe the problem is related to these fails. My Pixel for instance passes all tests.

Let's try something out: Go to WebGLCapabilities and set the value of floatVertexTextures to false (this will prevent the usage of the float texture). Make a build and use this three.js version in your app. I'm curious what happens 😊.

three.js/src/renderers/webgl/WebGLCapabilities.js

Line 105 in 099e436

floatVertexTextures: floatVertexTextures

[qornflex]

Already tried floatVertexTextures = false on the renderer.
The skin stops going crazy but there is no animation anymore :/
I'll push a sample.

[qornflex]

Here you are:
http://cornflex.org/webgl/skinning-bug2.html

renderer.capabilities.floatVertexTextures = false;

=> No animation running anymore