Objects with big speed are flickering/jumping

问题

I have a container that contains three objects, when the container is moving with big speed it's children start to flicker and then jumping after some time, why is that so?

function init() {
    // ...
    geometry = new THREE.CubeGeometry(100, 100, 100);
    mesh = new THREE.Mesh(geometry, material);
    container.add(mesh);

    geometry = new THREE.CubeGeometry(50, 50, 50);
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 75;
    container.add(mesh);

    geometry = new THREE.CubeGeometry(25, 25, 50);
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 100;
    container.add(mesh);
    // ...
}

function render() {
    // The bigger the speed of object the more its jumping
    container.position.z += 1000000;
}

jsfiddle

EDIT: I did some investigation and found out that when I apply modelVIewMatrix on position of children and compare difference (distance) between those children, the difference is changing after some time and that is when the objects start to jump.

jsfiddle

回答1:

basically the problems are caused by floating point arithmetic errors..

the projection matrix used from camera looks like this - notice it contains non-integers

[1.7243168354034424, 0, 0, 0, 
0, 2.1445069313049316, 0, 0,
0, 0, -1.0002000331878662, -1,
0, 0, -2.000200033187866, 0]

javascript uses floating-point representation of numbers, while it to some degree works well with integers there are slight errors with real numbers generally

for instance if you type 0.1 + 0.2 into javascript console the output will not be 0.3 but 0.30000000000000004

when you set position of your cube thingy to a few millions these errors in the projection matrix that were on less significant places move up and become noticeable,

the bigger the number the worse it gets and that is why it starts out like a smal vibration and then becomes utter disaster

if you really need objects to move that way you will have to make changes to THREE library and represent its matrix numbers in more bits(in some bytearray) or hack around floating-point operations in some other way

来源：https://stackoverflow.com/questions/33582258/objects-with-big-speed-are-flickering-jumping

标签

three.js