模拟 3D“卡片”仅正交渲染
我正在从正交角度渲染纹理四边形，并希望通过修改 UV 和四边形四个点（左上、右上、左下、右下）的顶点位置来模拟“深度”。
我发现，如果我使左上角和右下角 y 位置相同，我不会得到线性“倾斜”，而是会出现扭曲，其中覆盖顶部三角形（组成四边形）的纹理似乎被压扁，而底部三角形纹理看起来正常。
我可以更改 UV、四边形上的任何四个点（但仅限于 2D 空间，无论如何它都是正交投影，因此 3D 空间并不重要）。所以基本上我正在尝试在正交投影中模拟二维四边形的透视，有什么想法吗？它在数学上是否可能/可行？
理想情况下，我想要的是这样一种情况，我可以通过函数设置 x/y 旋转以及虚拟 z“位置”（模拟 z 深度），并查看它在内部计算位置/uv 以创建 3D 效果。看起来这应该都是数学的，其中可以将一组 2D 变换应用于四边形的每个角来模拟深度，我只是不知道如何实现它。我猜这需要三角学或其他东西，我正在尝试计算数学，但没有取得太大进展。
这就是我的意思：
左上角只是卡片，中心是 y 旋转 X 度和右侧的卡片most 是一张具有不同角度 x 和 y 旋转的卡片。
I am rendering textured quads from an orthographic perspective and would like to simulate 'depth' by modifying UVs and the vertex positions of the quads four points (top left, top right, bottom left, bottom right).
I've found if I make the top left and bottom right corners y position be the same I don't get a linear 'skew' but rather a warped one where the texture covering the top triangle (which makes up the quad) seems to get squashed while the bottom triangles texture looks normal.
I can change UVs, any of the four points on the quad (but only in 2D space, it's orthographic projection anyway so 3D space won't matter much). So basically I'm trying to simulate perspective on a two dimensional quad in orthographic projection, any ideas? Is it even mathematically possible/feasible?
ideally what I'd like is a situation where I can set an x/y rotation as well as a virtual z 'position' (which simulates z depth) through a function and see it internally calclate the positions/uvs to create the 3D effect. It seems like this should all be mathematical where a set of 2D transforms can be applied to each corner of the quad to simulate depth, I just don't know how to make it happen. I'd guess it requires trigonometry or something, I'm trying to crunch the math but not making much progress.
here's what I mean:
Top left is just the card, center is the card with a y rotation of X degrees and right most is a card with an x and y rotation of different degrees.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要计算角的 2D 坐标，只需选择 3D 坐标并应用 3D 透视方程：
原始卡片角 (x,y,z)
应用旋转（通过矩阵乘法），得到 ( x',y',z ')
应用透视投影（选择一些相机原点、方向和视野）
对于最简单的情况，它是：
现在更大的问题是用于从像素坐标获取纹理坐标的纹理：
正确的方法是使用单应性形式的变换：
其中事实上是透视方程应用于平面的结果。
a,b,c,d,e,f,g,h 的计算使得 ( U,V in [0..1] ) :
但是你的 2D渲染框架可能使用双线性插值：
在这种情况下，你会得到一个看起来很糟糕的结果。
如果渲染器将四边形分成两个三角形，情况会更糟！
所以我只看到两个选择：
To compute the 2D coordinates of the corners, just choose the coordinates in 3D and apply the 3D perspective equations :
Original card corner (x,y,z)
Apply a rotation ( by matrix multiplication ) you get ( x',y',z')
Apply a perspective projection ( choose some camera origin, direction and field of view )
For the most simple case it's :
The bigger problem now is the texturing used to get the texture coordinates from pixel coordinates :
The correct way for you is to use an homographic transformation of the form :
Which is fact is the result of the perpective equations applied to a plane.
a,b,c,d,e,f,g,h are computed so that ( with U,V in [0..1] ) :
But your 2D rendering framework probably uses instead a bilinear interpolation :
In that case you get a bad looking result.
And it is even worse if the renderer splits the quad in two triangles !
So I see only two options :