抖动顶点

Question

我正在尝试摆脱spatial jitter。更准确地说，我正在尝试复制与矩阵操作有关的Three.js行为。

我当前的渲染管道（带有m4.js的WebGL）

有一个场景对象，一个照相机和一个网格。网格的位置（mesh.position）设置为position，并且相机漂浮在网格附近。

顶点相对于mesh.position的位置：

new Float32Array([
    -5, 0, -5,
    5, 0, -5,
    0, 0, 5
])

渲染循环的重要部分：

const position = {x: 6428439.8443510765, y: 0, z: 4039717.5286310893}; // mesh is located there

camera.updateMatrixWorld();
camera.updateMatrixWorldInverse();

let modelViewMatrix = m4.multiply(camera.matrixWorldInverse, mesh.matrixWorld);

material.uniforms.projectionMatrix = {type: 'Matrix4fv', value: camera.projectionMatrix};
material.uniforms.modelViewMatrix = {type: 'Matrix4fv', value: modelViewMatrix};
material.use();
mesh.draw(material);

顶点着色器：

#version 300 es
precision highp float;
in vec3 position;
in vec3 color;
out vec3 vColor;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

void main() {
    vColor = color;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器：

#version 300 es
precision highp float;
out vec4 FragColor;
in vec3 vColor;
uniform float uSample;

void main() {
  FragColor = vec4(vColor * uSample, 1);
}

结果：

在网格周围移动或旋转相机时，会观察到空间抖动效应，这不是预期的行为。

我已经使用Three.js实现了相同的场景，并且可以预期，在移动顶点或摄影机时，Codepen link不会出现抖动。 Three.js必须与我的实现完全相同，但是显然我缺少了一些东西。

Answer 1

事实证明，在webgl2fundamentals.org上使用的webgl-3d-math库的一部分m4.js利用Float32Array对象存储矩阵。也许这种方法会对性能产生积极影响，但是由于JavaScript的Number使用64位浮点数，因此也会引起一些混乱。