Moving the camera model will shake if the coordinates are large

Questions
1

Moving the camera model will shake if the coordinates are large

var position = new THREE.Vector3( 1000000, 0, - 100000 );

  1. Geometry coordinates are large, model will shake
    var box = new THREE.BoxBufferGeometry( 5, 5, 5 );
    box.translate( position.x, 0, position.z );
    var mesh = new THREE.Mesh( box );
    scene.add( mesh );
  2. But it’s ok, if you move the coordinates of the Mesh
    var box = new THREE.BoxBufferGeometry( 5, 5, 5 );
    var mesh = new THREE.Mesh( box );
    mesh.position.x = position.x;
    mesh.position.z = position.z;
    scene.add( mesh );

I feel like only the modelViewMatrix is different.

My application needs to generate geometry on a large number of coordinates, and the origin of the model is keep at 0,0,0

I do a gis big data visualization, I use InstancedBufferAttribute to generate a lot of coordinate points, InstancedBuffer is a very important optimization

2

Original issue from github: https://github.com/mrdoob/three.js/issues/16324

3

I don’t think this information is relevant to your problem. You have to ensure that your camera is centered around the origin and avoids large values like 1000000. When moving around in space, you should try to translate the world instead of the camera. Or you try to work with relative coordinates like mentioned here. Both are best practises for large open-world games or planetary applications. Also try to work in a lower scale which will also mitigate floating point precision issues.

5

var mesh = new THREE.Mesh( box );
mesh.position.x = 100000;
mesh.position.z = -100000;

Why is it ok, moving mesh? This happens because of floating point inaccuracies ？

6

I think the stuttering of your example from github happens because of the camera position. However, even if your camera is at the origin you need a large view frustum in order to see objects that far away. This will lead to depth precision issue which can be mitigated by using a logarithmic depth buffer. The following example shows how you can use this technique in your app:

https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer

7

webgl.zip (1.3 KB)

I’m setting logarithmicDepthBuffer，did not improve.

if annotation box.translate( position.x, 0, position.z )，
reduction //mesh.position.x = position.x; //mesh.position.z = position.z;
the model is fine

I don’t understand where the calculation is different

8

I did an experiment.

var box = new THREE.BoxBufferGeometry( 5, 5, 5 );
var mesh = new THREE.Mesh( box );
mesh.position.x = 1000000;
mesh.position.z = -1000000;
scene.add( mesh );

Model don’t shake.

  1. I computed the modelViewMatrix in shader.
    vec4 mvPosition = viewMatrix * modelMatrix * vec4( transformed, 1.0 );
    gl_Position = projectionMatrix * mvPosition;

Model will shake.

These two calculations are different ?

9

Thank you. It’s really a question of precision. I solved this problem with 64-bit precision.

Constructing a 64-bit matrix on the outside, shader use 64-bit computing on the inside