抖动顶点

Question

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

我当前的渲染管线（WebGL with m4.js）

有一个场景对象、一个相机和一个网格。网格的位置 (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

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

抖动顶点

Jittering vertices

webgl

three.js

webgl2