typescript ThreeJS混合透视图与正交矩阵

beq87vna  于 6个月前  发布在  TypeScript
关注(0)|答案(1)|浏览(88)

我想让一个透视相机和一个正交相机彼此对齐。它们处于相同的位置、方向,并且zfar平面完全相同。问题是,即使远近值相同,我也会得到不同的z值,并且遮挡是错误的。想要我失踪吗?

const perspective_camera = new PerspectiveCamera(55, canvas.width / canvas.height, near, far);
const half_width = perspective_camera.far * Math.tan(perspective_camera.fov * 0.5 * (Math.PI / 180));
const half_height = half_width / perspective_camera.aspect;
const ortho_camera = new OrthographicCamera(-half_width, half_width, half_height, -half_height, near, far);
// Here one example of the problem in the Z
const aux1 = new Vector3(0, 0, 1);
const aux2 = new Vector3(0, 0, 1);
console.log(aux1.project(ortho_camera), aux2.project(half_height));
// Object { x: -0.00003130777409465268, y: -0.000001186705638256526, z: -0.999202652754963 }
// Object { x: -0.07660902355148393, y: -0.0029038270148180447, z: 0.9510807024824749 }

字符串

gdx19jrr

gdx19jrr1#

透视投影的Z坐标不是线性的。参见How to render depth linearly in modern OpenGL with gl_FragCoord.z in fragment shader?。为了补偿这一点,必须计算一个坐标,在正交投影后,该坐标的z分量与透视投影变换后的坐标相同。基本上,你必须投影透视和取消投影正交。参见转置z-在three.js中从透视到正交相机的位置。由于正交和透视投影矩阵不同地投影场景,不幸的是,坐标在世界空间和视图空间中都不相同。因此,没有简单的解决方案来解决您的问题。我能看到的唯一可能性是在顶点着色器中执行特殊的转换。然而,在这种情况下,你将不得不用你自己的特殊材质来渲染场景。

相关问题