Three.js: Weird jitter of objects with Mali GPU

[Evertvdw]

Description of the problem

Hello,

I have a strange problem which has been bugging me for quite a while now, the issue is best explained by a short video:

As you can see the objects in the scene have a jitter when you move the camera around but also a similar thing happens every now and then when the camera is not moving. It's been driving me crazy for a while now. This video has been taken on a Tinkerboard with TinkerOS, but the same issue is also there on a Tinkerboard with FlintOS.

On a regular laptop there is no issue and everything is moving smoothly. I'm not sure if this is a bug or if it is expected behaviour seeing the differences in hardware, so I was hoping somebody could shed some light on this.

Here is a WebGL report from the Tinkerboard:

Here a WebGL report from my laptop:

Obviously there are differences but I have no idea if any of these difference would explain this behaviour.

Can anyone clarify?

Thanks!

Three.js version

• [ ] Dev
• [x] r98
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome (Chromium v62)
• [ ] Firefox
• [ ] Internet Explorer

OS

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

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

[Mugen87]

Do you have the same issue with other WebGL demos and other browsers? If so, it seems to be a driver related issue. In this case, there is nothing we can do here. It might be better to report the bug to the GPU vendor.

[Mugen87]

Crossposting:

https://stackoverflow.com/questions/53395835/weird-jitter-of-objects-in-three-js-using-mali-gpu

[mrdoob]

What's the size of your scene and what did you set as near and far to your camera?

[Evertvdw]

Crossposting:

https://stackoverflow.com/questions/53395835/weird-jitter-of-objects-in-three-js-using-mali-gpu

I tried a question on stackoverflow as well indeed.

For near I use 200 and far 4000, that was one of the first things I tried to limit the gap between these values and keep the near as high as possible.

That white floor you see in the video has a z-dimension of 0 in my model, when I gave this plane some height this effect went away. But the question still is why that is a problem on this GPU and not on others.

[Mugen87]

But the question still is why that is a problem on this GPU and not on others.

Like I said before, you should report this problem to the GPU vendor. I don't think this space here is able to answer your question.

[mrdoob]

Can you share a screenshot of your scene in wireframe?

[Evertvdw]

Can you share a screenshot of your scene in wireframe?

How would I do that?

And I can't find a place where I can ask this question to the GPU vendor. My thought is that it somehow has to do with a buffer size or one of the max values in the Webglreport that causes this behaviour. Does Three.js use these in any way or is it up to the browser to take care of this?

[Mugen87]

How would I do that?

You render all materials with .wireframe set to true.

My thought is that it somehow has to do with a buffer size or one of the max values in the Webglreport that causes this behaviour.

Why do you think it's not a GPU driver issue? Or maybe it's related to the maximum floating point precision of the hardware. As far as I can see, this is also assumed at stackoverflow.

And I can't find a place where I can ask this question to the GPU vendor.

How about this community: https://community.arm.com/graphics/f/discussions

[Evertvdw]

You render all materials with .wireframe set to true.

Ok, here is a screenshot:

Why do you think it's not a GPU driver issue?

I also had this issue with a Rpi3, with a broadcom gpu. So that why I think that something else is going on. Floating point precision also is something that I thought of but I already have my renderer initiated with precision to highp, is there anything else I could do about that?

And thanks for the link! I'll try that as well. Thanks for the support so far!

[Mugen87]

but I already have my renderer initiated with precision to highp

The problem is that does not mean you actually get highp. On many older devices, you just get mediump.

[Evertvdw]

The problem is that does not mean you actually get highp. On many older devices, you just get mediump.

Can I then somehow account for this when constructing my model so that precision is not an issue?

[Mugen87]

What is the scale of you model? I mean the min/max range of your vertices?

[Evertvdw]

What is the scale of you model? I mean the min/max range of your vertices?

Here is the gltf file I exported from blender and use as input. Its readable in a text-editor, does that give information about the min/max range of vertices?

factorylayout.zip

[Mugen87]

Unfortunately no. I also need the respective bin file. The Blender file would be even better.

[Evertvdw]

I also have that of course:

blenderfile.zip

[Mugen87]

Um, some of your vertices have a y value of 0 and some of 0.05. Is there a special reason for this? Can you try to set all y values to 0 and then make a test?

[Evertvdw]

Um, some of your vertices have a y value of 0 and some of 0.05. Is there a special reason for this? Can you try to set all y values to 0 and then make a test?

Probably no, but where do you see that? I'm not a pro with blender, this is my first shot at it :)

[Mugen87]

I've exported the project as an OBJ. Not for asset delivery (of course not!) but just to inspect the geometry data.

[Mugen87]

Closing. This is clearly not a three.js issue. Please use the forum or stackoverflow for more help or feedback.

[mrdoob]

So I actually bought a Tinkerboard because of this issue back in 2018 but I didn't have time to test it until now.

TinkerOS-Debian doesn't seem to be very well supported and updating Chromium to the latest version makes Chromium crash at startup. Seems like ASUS is not doing a good job with support and software. Case in point.

Raspberry Pi 4 + Raspbian seems like a much better option.