GLTF Model doesn't move with skeleton when using datGUI on mobile only.

[rihardse]

GLTF Model doesn't move with skeleton when using datGUI on mobile only.

Describe the bug or feature request in detail. I have used GLTFLoader to load the model that was exported from blender with gltf-IO and datGUI to control the skeleton. It works flawlessly on desktop, but not on mobile. This for sure is true for Chrome 80 on Android 8. With SkeletonHealper I can see that bones are in fact moving, just not the mesh. Also, the light controls work.

    function render() {
        spotLight.position.x = guiControls.lightX;
        spotLight.position.y = guiControls.lightY;
        spotLight.position.z = guiControls.lightZ;

        scene.traverse(function(child){
            if (child instanceof THREE.SkinnedMesh){

                 child.skeleton.bones[123].rotation.x = guiControls.head_x;
                 child.skeleton.bones[123].rotation.y = guiControls.head_y;

            }
            //Seems to only produce errors
            // else if  (child instanceof THREE.SkeletonHelper){
            //     child.update();
            // }
        });

    }

Please also include a live example if possible. You can start from these templates:

• jsfiddle (latest release branch)
• jsfiddle (dev branch)

Three.js version

• [ ] Dev
• [ ] r115
• [x] 110 fron cdnjs

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [x] Android
• [ ] iOS

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

Huawei P9 Lite 2017

[Mugen87]

Can you please demonstrate the issue with an editable live example? Or at least share your code as a GitHub repository?

So far, you have not demonstrated a bug. It could also be an issue in your application.

[rihardse]

Sure. http://cardscompany.area.lv/example/page-example.html Only head_x is hooked up to the model and the controls are hard use on mobile but it does produce the issue.

[Mugen87]

but it does produce the issue.

I'm not able to reproduce the issue on my Pixel 1. Changing head_x has the same effect (lean head forward/backward) like on desktop. What smartphone are you using?

[rihardse]

Huawei P9 Lite 2017

in the process of checking other phones now...

Tested two other Huawei phones - P Smart & P30 Lite and they have the same issue. Checked one Sony phone and it worked

[Mugen87]

Can your phone display the following examples correctly?

https://threejs.org/examples/webgl_animation_skinning_blending https://threejs.org/examples/webgl_animation_skinning_morph

Besides, can you share a screenshot of the following website opened with your Huawei?

https://webglreport.com/?v=1

[rihardse]

Both of the examples seem to work.

From webgl report: Platform: Linux armv7l Browser User Agent: Mozilla/5.0 (Linux; Android 8.0.0; PRA-LX1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36 Context Name: webgl GL Version: WebGL 1.0 (OpenGL ES 2.0 Chromium) Shading Language Version: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit Renderer: WebKit WebGL Unmasked Vendor: ARM Unmasked Renderer: Mali-T830 Antialiasing: Available ANGLE: No Major Performance Caveat: No

[rihardse]

Both of the examples seem to work.

Screenshots here: https://imgur.com/a/oaPu7pb

Did you need the graphs, device info or extension list?

[Mugen87]

The extension list would be great.

[rihardse]

`Supported Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_float_blend EXT_sRGB OES_element_index_uint OES_fbo_render_mipmap OES_standard_derivatives OES_vertex_array_object WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBKIT_WEBGL_depth_texture WEBGL_lose_context WEBKIT_WEBGL_lose_context WEBGL_multi_draw WEBGL_video_texture

/****WEBGL2**/

Supported Extensions: EXT_color_buffer_float EXT_float_blend WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context WEBGL_multi_draw WEBGL_video_texture

To see draft extensions in Chrome, browse to about:flags, enable the "Enable WebGL Draft Extensions" option, and relaunch.

WebGL 2 Functions Implementation Status: 88 of 88 new functions implemented.

copyBufferSubData getBufferSubData blitFramebuffer framebufferTextureLayer getInternalformatParameter invalidateFramebuffer invalidateSubFramebuffer readBuffer renderbufferStorageMultisample texStorage2D texStorage3D texImage3D texSubImage3D copyTexSubImage3D compressedTexImage3D compressedTexSubImage3D getFragDataLocation uniform1ui uniform2ui uniform3ui uniform4ui uniform1uiv uniform2uiv uniform3uiv uniform4uiv uniformMatrix2x3fv uniformMatrix3x2fv uniformMatrix2x4fv uniformMatrix4x2fv uniformMatrix3x4fv uniformMatrix4x3fv vertexAttribI4i vertexAttribI4iv vertexAttribI4ui vertexAttribI4uiv vertexAttribIPointer vertexAttribDivisor drawArraysInstanced drawElementsInstanced drawRangeElements drawBuffers clearBufferiv clearBufferuiv clearBufferfv clearBufferfi createQuery deleteQuery isQuery beginQuery endQuery getQuery getQueryParameter createSampler deleteSampler isSampler bindSampler samplerParameteri samplerParameterf getSamplerParameter fenceSync isSync deleteSync clientWaitSync waitSync getSyncParameter createTransformFeedback deleteTransformFeedback isTransformFeedback bindTransformFeedback beginTransformFeedback endTransformFeedback transformFeedbackVaryings getTransformFeedbackVarying pauseTransformFeedback resumeTransformFeedback bindBufferBase bindBufferRange getIndexedParameter getUniformIndices getActiveUniforms getUniformBlockIndex getActiveUniformBlockParameter getActiveUniformBlockName uniformBlockBinding createVertexArray deleteVertexArray isVertexArray bindVertexArray`

[Mugen87]

It seems floating point textures are not supported. Depending on the amount of available vertex uniforms, complex skeletons won't work on your device.

Your model has 556 bones which is noticeable more than the models from the official examples (e.g. the soldier has just 51 bones).

I suggest you use WebGL 2 if possible or simplify our model. In any event, it seems unlikely that this can be fixed on engine level.

[rihardse]

Confirmed - working with 200 bones