通过应用于圆弧的透视变换产生的曲线

时间:2012-04-29 19:02:30

标签: graphics canvas transformation projection perspective

我正在尝试在canvas内生成一个3D球体的绘图,我想快速渲染:我的目标是iPad上一块小(300px方形)画布的实时性能。

任何复杂的HTML5渲染的大多数演示都使用WebGL(类似于three.js),这很精彩,但看到有限(目前没有,实际上,但Apple在技术上可以启用它)支持在iOS上。

然而,

canvas效果很好。

所以我更加努力地使用canvas构建一些基本的渲染功能,因为CSS3给了我HW变换,canvas可以用于基本的纹理。我可以通过绘制到画布来伪造照明!退一步,因为这甚至不是完整的HW T& L(DX7!...),但我仍然相信它可以构建仍然非常酷的东西。诀窍是尽可能减少几何体的数量(除其他外)。

回到手头的话题。我的实际问题非常具体。如果我想要绘制的球体距离相机足够远,我可以使用它的正交投影。在这种情况下,我似乎可以使用弧形路径构建线框球体,并且canvas可以使用旋转和缩放变换。这不允许我以任何方式纹理球体,但应该产生漂亮的平滑曲线并且看起来不错。

如果我想将透视投影投入图片怎么办?从这种转变中产生了什么样的曲线?是否有可能使用贝塞尔曲线或弧形路径绘制足够接近的近似曲线?

我知道球体的透视投影是椭圆形。通过缩放圆圈可以容易地产生椭圆。在给定投影参数的情况下,可能只是简单地计算出该椭圆的方程。有人可以帮我解决这个问题吗?

对我来说总是开放的一个选择是忘记弧线并用线条绘制我的线框(canvas将方便地为我做反对)我们一直以来的方式,并称之为一天。如果我想纹理我的球体,那么也无法避免这种情况。

1 个答案:

答案 0 :(得分:0)

寻找这条曲线的分析公式(然后尝试将其拟合到某种bezier)可能相当于挖掘更深更深的洞。

我也很确定使用内置曲线的性能会很可怕,因为它们可能是使用我将使用的线路功能的助手,所以我只会减少对渲染和性能的控制。