是否有任何本地方法来对浏览器中显示的有序点列表进行三角测量?

时间:2013-03-08 08:11:23

标签: javascript performance browser webgl

过去几个月我一直在涉足WebGL。 greggman的WebGL Fundamentals逐步创建了一个熟悉的像素空间。 (0, 0)是左上角,矩阵启用缩放,旋转和平移等。这让我想到的一件事是在gl上下文中创建更多的二维simple polygons - 不太相似来自canvas2dsvg

为了做到这一点,我已经将各种资源联机在一起,以对要在浏览器中呈现的点阵列进行三角测量。积分点遍历:

  1. Catmull Rom曲线计算获取点数组,并为每个点添加句柄坐标u, v属性。
  2. 自适应细分将曲线分解为直线段,同时仍然显得弯曲。
  3. 线段交点,用于检查带有循环的形状并将其分离为单独的简单多边形。
  4. Tessellation 最终应用于每个分离的形状。返回由WebGL呈现的最终三角形数组。
  5. 可以找到这些操作的工作示例here。 (需要启用WebGL的浏览器)

    svgcanvas2d中的相同示例。

    现在这一切都发生在JavaScript中,我同意你的想法,“这看起来和听起来真的很贵。”这么多,以便在更新循环上更改顶点时{ {1}}它的运行速度比requestAnimationFramecanvas2d慢得多。这部分与我转录高效算法的能力有关。但是,它必须与浏览器供应商通过编写我在较低级别概述的类似算法集创建可靠性和性能提升的能力有关。

    所以我的问题是:浏览器供应商是否有任何方法用于呈现svgcanvas2d以供开发人员使用?

    这可能听起来很天真,这可能是因为它。但是请听我说,如果WebGL要成为Web开发人员更多原生访问和控制的示例api,那么为什么其他一些方法与其可用并不相同呢?

1 个答案:

答案 0 :(得分:2)

如果您只对凸多边形感兴趣,那么WebGL中的简单TRIANGLE_FAN就足够了。如果要绘制凹多边形,可以在WebGL中使用stencil buffer trick。但是,你的一句话题目的答案是" no"。

有时JavaScript的速度会惊人地快。例如,有一个多边形曲面细分算法可以处理凹多边形here,它以交互速率运行。