使用 OpenGL ES 2.0 着色器的平滑纹理线答案

【问题标题】：Smooth textured line with OpenGL ES 2.0 shaders使用 OpenGL ES 2.0 着色器的平滑纹理线
【发布时间】：2012-07-07 12:13:46
【问题描述】：

我们有一个 iOS 绘图应用程序。目前，绘图是使用 OpenGL ES 1.1 实现的。我们使用一些算法来平滑线条，例如贝塞尔曲线。因此，当触摸事件发生时，我们从触摸事件点中获取一些点（基于算法）并绘制这些点。我们还为点使用画笔纹理以使外观更自然。

我想知道是否可以在 OpenGL ES 2.0 着色器中实现这些算法。类似于调用 OpenGL 函数来绘制由触摸点组成的线条并在输出时呈现平滑的画笔纹理曲线。

这里的点 P0, P1, ... P4 是触摸事件和红色曲线上的点 - 输出点，对于 T 有这样的步长，使得曲线上两个相邻点之间的距离不大于 1 个像素。

这里是贝塞尔算法解释的链接： Bézier curve - Wikipedia, the free encyclopedia

非常感谢任何帮助。谢谢。

【问题讨论】：

你能说得更具体点吗？如果我们不知道算法是什么，我们无法告诉您是否可以在着色器中实现特定算法！
我们使用什么算法并不重要。这里的要点是着色器应该在输出上产生比输入点更多的点。我已经编辑了我的问题并添加了一个使用贝塞尔算法的示例。

标签： ios opengl-es drawing opengl-es-2.0 shader

【解决方案1】：

您不能在顶点着色器中生成新顶点（您可以在几何着色器中生成，而 ES 没有）。输出顶点的数量始终与输入顶点的数量相同，您只能更改它们的位置（当然还有其他属性）。

因此，您必须绘制由足够多的顶点组成的线带，以确保曲线足够平滑。您可以做的是始终放入相同的线带，将曲线参数值 T 作为 1D 顶点位置。然后在着色器中，您使用此输入位置（参数值）使用 DeCasteljau 算法（或其他算法）计算曲线上的实际 2D/3D 位置，并将点 P0 到 P4 作为常量（统一变量）放入着色器中用 GLSL 术语）。

但我不确定这是否真的会给你带来任何好处，而不是仅仅计算 CPU 上的这些点并将它们放入动态 VBO。您节省的是将曲线点从 CPU 复制到 GPU 以及在 CPU 上进行计算，但另一方面，您的顶点着色器要复杂得多。需要评估哪种方法更好。如果您需要计算每帧的曲线点（因为控制点每帧都会改变）并且曲线的细节相当高，那么这可能不是一个坏主意。但除此之外，我认为它并不真正值得。而且您的着色器也不会那么容易地适应运行时不断变化的控制点/曲线度数。

但是再一次，你不能在 GPU 上放入 5 个控制点并生成 N 个曲线点。顶点着色器总是作用于单个顶点并产生单个顶点，就像片段着色器总是作用于单个片段（比如像素，尽管它还不是一个）并产生单个（或没有）片段.

【讨论】：

感谢您提供非常全面的回答！我一直在寻找一种使代码更清晰并获得一些性能的方法。但是，正如我所见，情况并非如此。顺便说一句，您提出了非常有趣的方法，通过代表 T 的一维线。我会考虑一下。