在过去的几个月里,我一直在涉足 WebGL。greggman 的WebGL Fundamentals一步一步地创建了一个熟悉的像素空间。(0, 0)
是左上角,矩阵支持缩放、旋转和平移等。这让我想到的一件事是在 gl 上下文中创建更多的二维简单多边形canvas2d
——与or不太相似svg
。
为了做到这一点,我在网上收集了各种资源来对要在浏览器中呈现的点数组进行三角测量。点数组经过:
- Catmull Rom 曲线计算采用点数组并将句柄坐标
u, v
属性添加到每个点。 - 自适应细分可将曲线分成直线段,同时肉眼看起来仍然是弯曲的。
- Line Segment Intersection用于检查带有环的形状并将其分离为单独的简单多边形。
- 细分最终应用于每个分离的形状。返回一个最终的三角形数组以由 WebGL 渲染。
可以在此处找到这些操作的工作示例。(需要启用 WebGL 的浏览器)
svg
和中的相同示例canvas2d
。
现在这一切都发生在 JavaScript 中,我同意你的想法,“这看起来和听起来都非常昂贵。” 如此之多,以至于在更新循环上更改顶点时,requestAnimationFrame
它的运行速度比canvas2d
or慢得多svg
。这部分与我转录高效算法的能力有关。但是,它必须与浏览器供应商通过编写我在较低级别概述的一组类似算法来创建可供性和性能提升的能力有关。
所以我的问题是:浏览器供应商是否有任何方法用于渲染canvas2d
并svg
公开给开发人员使用?
这可能听起来很幼稚,这可能是因为它是。但是请听我说,如果 WebGL 要成为 Web 开发人员更多本机访问和控制的示例 api,为什么其他一些与它齐头并进的方法不可用呢?