为什么 Three.js 几何会因大量数字而失去精度？答案

【问题标题】：Why are Three.js Geometries losing precision with large numbers?为什么 Three.js 几何会因大量数字而失去精度？
【发布时间】：2019-02-15 08:11:01
【问题描述】：

我正在尝试在 Three.js 中绘制这个六边形。如果我使用小数字，它会画得很好。但是如果我使用大数字（似乎适合双精度而不会丢失精度），Three.js 似乎在精确绘制它时存在问题。我已经在code pen here 中证明了这一点。它的代码如下。请注意，如果您将offsetX 和offsetY 更改为非常大的数字，则绘制结果不会相同。我不太明白为什么，想知道是否有人可以为我阐明这一点。看起来这些数字都适合 double 类型...

var scene = new THREE.Scene();

const offsetX = 0;
const offsetY = 0;
// comment the previous two lines or following two lines to see the difference 
// const offsetX = 3031034;
// const offsetY = 4647776;

var camera = new THREE.OrthographicCamera(offsetX-3,offsetX+3,offsetY-3,offsetY+3,1,100);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 400);
document.body.appendChild( renderer.domElement );

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(offsetX + 1.039688, offsetY + 0.850723, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.913957, offsetY + 1.068813, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.661409, offsetY + 1.069356, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.534591, offsetY + 0.851991, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.660321, offsetY + 0.633721, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 0.91287, offsetY + 0.633178, 0));
geometry.vertices.push(new THREE.Vector3(offsetX + 1.039688, offsetY + 0.850723, 0));

var material = new THREE.LineBasicMaterial({ linewidth: 1, color: 0x00ff00 });

var line = new THREE.Line( geometry, material );
scene.add( line );

camera.position.z = 5;

renderer.render(scene, camera);

【问题讨论】：

标签： three.js floating-point precision

【解决方案1】：

虽然您显示的数字可以以double 格式以足够的精度表示，以呈现没有可见失真的六边形，但似乎 WebGL 在其整个操作过程中并未使用double 格式。

three.js uses WebGL 和 WebGL uses OpenGL ES。 WebGL 和 OpenGL ES 的文档中有关浮点格式或算术的信息参差不齐或缺失。我们只能从文档中的倾斜引用和观察到的行为中非正式地推断出使用的格式。

很可能，软件中的某些组件使用 IEEE-754 基本 32 位二进制浮点格式。在这种格式中，有效位¹ 有 24 位。

对于您显示的偏移量，例如 4,647,776，必须设置浮点格式的指数，以便有效数字的最高位表示 4,194,304，即 2²²。那么最低位是 2^-1，即 ½.

这意味着六边形顶点的所有坐标 .661409、.851991、.633721 等都将四舍五入到最接近的 ½。显然，这会扭曲绘图。修改偏移量的其他值显示与 32 位二进制浮点精度一致的效果。

脚注

¹ 一个浮点数由一个符号位s、一个有效位f和一个指数e组成em>，表示值 (−1)^s • f • b^e，其中 b 是格式的基数或基数（2 表示二进制）。有效数字也称为浮点表示的小数部分，因此 f 表示有效数字。

【讨论】：