Metal 透视投影

引言

Hi,大家好,我是一牛。在上一篇博客中,我们学习了如何在Metal 中使用MVP变换实现正交投影。正交投影常用于工程制图,它可以保持物体的比例不变,但是如果我们想要模拟人眼中的现实世界(近大远小),我们需要使用透视投影。今天,让我们一起学习下透视投影是如何实现的。

视椎体

透视投影矩阵

和正交投影使用长方体不同的是,在透视投影中我们使用了视椎体,经过模型变换、视图变换后,为了得到透视投影矩阵,我们只需要将是椎体压缩成长方体,之后再进行一次正交投影,我们就能够得到透视矩阵。

那么我们是如何通过挤压视椎体得到正交投影需要要的长方体?

假设我们从+x 方向观察,看向-x

根据相似三角形我们可以得到

<math xmlns="http://www.w3.org/1998/Math/MathML"> y ′ = n y z y' = \frac{ny}{z} </math>y′=zny

同理,我们可以得到

<math xmlns="http://www.w3.org/1998/Math/MathML"> x ′ = n x z x' = \frac{nx}{z} </math>x′=znx

对于空间中的任何一点 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( x y z 1 ) \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} </math> xyz1

经过挤压得到 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( n x z n y z u n k n o w n 1 ) \begin{pmatrix} \frac{nx}{z} \\ \frac{ny}{z} \\ unknown \\ 1 \end{pmatrix} </math> znxznyunknown1

由于是齐次坐标,我们可以将乘z 得到 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( n x n y u n k n o w n z ) \begin{pmatrix} nx \\ ny \\ unknown \\ z \end{pmatrix} </math> nxnyunknownz

我们可以初步得到这个矩阵

<math xmlns="http://www.w3.org/1998/Math/MathML"> ( n 0 0 0 0 n 0 0 A B C D 0 0 1 0 ) \begin{pmatrix} n & 0 & 0 & 0 \\ 0 & n & 0 & 0 \\ A & B & C & D \\ 0 & 0 & 1 & 0\end{pmatrix} </math> n0A00nB000C100D0

接下来我们只需要求出待定系数 A,B,C,D

我们知道,近平面上的点经过挤压保持不变。也就是说对于近平面任意一点 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( x y n 1 ) \begin{pmatrix} x \\ y \\ n \\ 1 \end{pmatrix} </math> xyn1

由于它是齐次坐标,我们可以乘上n,得到 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( n x n y n 2 n ) \begin{pmatrix} nx \\ ny \\ n^2 \\ n \end{pmatrix} </math> nxnyn2n

我们观察待求矩阵的第三方,可得 A=0,B=0,即

<math xmlns="http://www.w3.org/1998/Math/MathML"> [ 0 0 A B ] \begin{bmatrix} 0 & 0 & A & B \end{bmatrix} </math>[00AB] <math xmlns="http://www.w3.org/1998/Math/MathML"> ( x y n 1 ) \begin{pmatrix} x \\ y \\ n \\ 1 \end{pmatrix} </math> xyn1 = <math xmlns="http://www.w3.org/1998/Math/MathML"> n 2 n^2 </math>n2

-> <math xmlns="http://www.w3.org/1998/Math/MathML"> A ∗ n + B = n 2 A * n + B = n^2 </math>A∗n+B=n2 (1)

又因为远平面的中心经过挤压保持不变,所以对应远平面中心点 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( 0 0 f 1 ) \begin{pmatrix} 0 \\ 0 \\ f \\ 1 \end{pmatrix} </math> 00f1

由于它是齐次坐标,我们可以乘上f,得到 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( 0 0 f 2 f ) \begin{pmatrix} 0 \\ 0 \\ f^2 \\ f \end{pmatrix} </math> 00f2f

-> <math xmlns="http://www.w3.org/1998/Math/MathML"> [ 0 0 A B ] \begin{bmatrix} 0 & 0 & A & B \end{bmatrix} </math>[00AB] <math xmlns="http://www.w3.org/1998/Math/MathML"> ( 0 0 f 1 ) \begin{pmatrix} 0 \\ 0 \\ f \\ 1 \end{pmatrix} </math> 00f1 = <math xmlns="http://www.w3.org/1998/Math/MathML"> f 2 f^2 </math>f2

-> <math xmlns="http://www.w3.org/1998/Math/MathML"> A ∗ f + B = f 2 A * f + B = f^2 </math>A∗f+B=f2 (2)

联立(1)(2)解一元二次方程组

得 <math xmlns="http://www.w3.org/1998/Math/MathML"> A = n + f A = n + f </math>A=n+f 、 <math xmlns="http://www.w3.org/1998/Math/MathML"> B = − n ∗ f B = -n*f </math>B=−n∗f

带人A,B,C,D 系数,得到挤压矩阵 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( n 0 0 0 0 n 0 0 0 0 n + f − n ∗ f 0 0 1 0 ) \begin{pmatrix} n & 0 & 0 & 0 \\ 0 & n & 0 & 0 \\ 0 & 0 & n + f & -n*f \\ 0 & 0 & 1 & 0\end{pmatrix} </math> n0000n0000n+f100−n∗f0

将挤压矩阵左乘正交投影矩阵 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( 2 r − l 0 0 − r + l r − l 0 2 t − b 0 − t + b t − b 0 0 1 f − n − n f − n 0 0 1 0 ) \begin{pmatrix} \frac{2}{r-l} & 0 & 0 & -\frac{r+l}{r-l} \\ 0 & \frac{2}{t-b} & 0 & -\frac{t+b}{t-b} \\ 0 & 0 & \frac{1}{f-n} & -\frac{n}{f-n} \\ 0 & 0 & 1 & 0\end{pmatrix} </math> r−l20000t−b20000f−n11−r−lr+l−t−bt+b−f−nn0

最终透视投影矩阵是

<math xmlns="http://www.w3.org/1998/Math/MathML"> ( 2 n r − l 0 − r + l r − l 0 0 2 n t − b − t + b t − b 0 0 0 f f − n − n ∗ f f − n 0 0 1 0 ) \begin{pmatrix} \frac{2n}{r-l} & 0 & -\frac{r+l}{r-l} & 0 \\ 0 & \frac{2n}{t-b} & -\frac{t+b}{t-b} & 0 \\ 0 & 0 & \frac{f}{f-n} & -\frac{n*f}{f-n} \\ 0 & 0 & 1 & 0\end{pmatrix} </math> r−l2n0000t−b2n00−r−lr+l−t−bt+bf−nf100−f−nn∗f0

在图形学中我们一般用视场角fovY,和近平面宽高比来定义透视投影矩阵。假定视椎体是对称物体, <math xmlns="http://www.w3.org/1998/Math/MathML"> b = − t b=-t </math>b=−t 且 <math xmlns="http://www.w3.org/1998/Math/MathML"> l = − r l=-r </math>l=−r

<math xmlns="http://www.w3.org/1998/Math/MathML"> t a n f o v Y / 2 = t / n tan fovY / 2 = t / n </math>tanfovY/2=t/n 且 <math xmlns="http://www.w3.org/1998/Math/MathML"> a s p e c t R a t i o = r / t aspectRatio = r / t </math>aspectRatio=r/t

我们可以得到透视投影矩阵

swift 复制代码
    func createPerspectiveMatrix(fov: Float, aspectRatio: Float, nearPlane: Float, farPlane: Float) -> simd_float4x4 {
        let tanHalfFov = tan(fov / 2.0);
        var matrix = simd_float4x4(0.0);
        matrix[0][0] = 1.0 / (aspectRatio * tanHalfFov);
        matrix[1][1] = 1.0 / (tanHalfFov);
        matrix[2][2] = farPlane / (farPlane - nearPlane);
        matrix[2][3] = 1.0;
        matrix[3][2] = -(farPlane * nearPlane) / (farPlane - nearPlane);
        return matrix;
    }

效果

仔细观察,与正交投影变换不同的是,图片的比例在转动的过程中会发生改变,这是因为转动过程中图片的深度值在发生改变,对应不同的深度值,透视投影会产生近大远小的效果!

结语

掌握好透视投影是我们打开3D世界的钥匙,而掌握好透视投影的关键是了解透视投影的矩阵推导过程。 谢谢大家,欢迎大家点赞、收藏!

本项目已开源

相关推荐
九丝城主3 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
芳草萋萋鹦鹉洲哦9 小时前
【vue3+tauri+rust】如何实现下载文件mac+windows
windows·macos·rust
恋猫de小郭16 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
点金石游戏出海1 天前
每周资讯 | Krafton斥资750亿日元收购日本动画公司ADK;《崩坏:星穹铁道》新版本首日登顶iOS畅销榜
游戏·ios·业界资讯·apple·崩坏星穹铁道
旷世奇才李先生1 天前
Swift 安装使用教程
开发语言·ios·swift
90后的晨仔1 天前
Xcode16报错: SDK does not contain 'libarclite' at the path '/Applicati
ios
finger244801 天前
谈一谈iOS线程管理
ios·objective-c
Digitally1 天前
如何将大型视频文件从 iPhone 传输到 PC
ios·iphone
梅名智1 天前
IOS 蓝牙连接
macos·ios·cocoa
美狐美颜sdk1 天前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk