1

在过去的几个月里,我一直在涉足 WebGL。greggman 的WebGL Fundamentals一步一步地创建了一个熟悉的像素空间。(0, 0)是左上角,矩阵支持缩放、旋转和平移等。这让我想到的一件事是在 gl 上下文中创建更多的二维简单多边形canvas2d——与or不太相似svg

为了做到这一点,我在网上收集了各种资源来对要在浏览器中呈现的点数组进行三角测量。点数组经过:

  1. Catmull Rom 曲线计算采用点数组并将句柄坐标u, v属性添加到每个点。
  2. 自适应细分可将曲线分成直线段,同时肉眼看起来仍然是弯曲的。
  3. Line Segment Intersection用于检查带有环的形状并将其分离为单独的简单多边形。
  4. 细分最终应用于每个分离的形状。返回一个最终的三角形数组以由 WebGL 渲染。

可以在此处找到这些操作的工作示例。(需要启用 WebGL 的浏览器)

svg和中的相同示例canvas2d

现在这一切都发生在 JavaScript 中,我同意你的想法,“这看起来和听起来都非常昂贵。” 如此之多,以至于在更新循环上更改顶点时,requestAnimationFrame它的运行速度比canvas2dor慢得多svg。这部分与我转录高效算法的能力有关。但是,它必须与浏览器供应商通过编写我在较低级别概述的一组类似算法来创建可供性和性能提升的能力有关。

所以我的问题是:浏览器供应商是否有任何方法用于渲染canvas2dsvg公开给开发人员使用?

这可能听起来很幼稚,这可能是因为它是。但是请听我说,如果 WebGL 要成为 Web 开发人员更多本机访问和控制的示例 api,为什么其他一些与它齐头并进的方法不可用呢?

4

1 回答 1

2

如果你只对凸多边形感兴趣,一个简单TRIANGLE_FAN的 WebGL 就足够了。如果要绘制凹多边形,可以使用 WebGL 中的模板缓冲区技巧。但是,您的一句话问题标题的答案是“否”。

有时 JavaScript 的速度会出奇的快。例如,这里有一个可以处理凹多边形的多边形镶嵌算法,以交互速率运行。

于 2013-03-08T16:24:27.250 回答