我正在尝试在canvas
内生成一个3D球体的绘图,我想快速渲染:我的目标是iPad上一块小(300px方形)画布的实时性能。
任何复杂的HTML5渲染的大多数演示都使用WebGL(类似于three.js),这很精彩,但看到有限(目前没有,实际上,但Apple在技术上可以启用它)支持在iOS上。
然而, canvas
效果很好。
所以我更加努力地使用canvas
构建一些基本的渲染功能,因为CSS3给了我HW变换,canvas
可以用于基本的纹理。我可以通过绘制到画布来伪造照明!退一步,因为这甚至不是完整的HW T& L(DX7!...),但我仍然相信它可以构建仍然非常酷的东西。诀窍是尽可能减少几何体的数量(除其他外)。
回到手头的话题。我的实际问题非常具体。如果我想要绘制的球体距离相机足够远,我可以使用它的正交投影。在这种情况下,我似乎可以使用弧形路径构建线框球体,并且canvas
可以使用旋转和缩放变换。这不允许我以任何方式纹理球体,但应该产生漂亮的平滑曲线并且看起来不错。
如果我想将透视投影投入图片怎么办?从这种转变中产生了什么样的曲线?是否有可能使用贝塞尔曲线或弧形路径绘制足够接近的近似曲线?
我知道球体的透视投影是椭圆形。通过缩放圆圈可以容易地产生椭圆。在给定投影参数的情况下,可能只是简单地计算出该椭圆的方程。有人可以帮我解决这个问题吗?
对我来说总是开放的一个选择是忘记弧线并用线条绘制我的线框(canvas
将方便地为我做反对)我们一直以来的方式,并称之为一天。如果我想纹理我的球体,那么也无法避免这种情况。
答案 0 :(得分:0)
寻找这条曲线的分析公式(然后尝试将其拟合到某种bezier)可能相当于挖掘更深更深的洞。
我也很确定使用内置曲线的性能会很可怕,因为它们可能是使用我将使用的线路功能的助手,所以我只会减少对渲染和性能的控制。