题 如何使用OpenGL在2D场景中绘制平滑线而不使用GL_LINE_SMOOTH?


由于GL_LINE_SMOOTH不是硬件加速,并且在所有GFX卡上都不支持,如何在2D模式下绘制平滑线,这看起来与GL_LINE_SMOOTH一样好?

EDIT2: 我目前的解决方案是从2个四边形绘制一条线,从边缘渐变到零透明度,这两个四边形之间的颜色将是线条颜色。它对于基本的平滑线渲染效果不错,并且不使用纹理,因此渲染速度非常快。


11
2018-04-27 14:51


起源


您是否排除了使用纹理四边形或带有颜色渐变的四边形?这对我来说似乎是一个可能的解决方案,尽管像Edvard这样的声音已经涵盖了这个领域。 - Tim
@Tim,嗯,我不确定只有彩色四边形是否会像光滑的线条一样工作,它可能会变得太尖锐......好吧,我要测试它。 - Rookie
@Tim,现在测试它,正如我所料,它太尖锐(或太模糊),但对于我目前的用途它工作正常!线条厚度1.7似乎与我目前1.1厚的平滑线相匹配。 - Rookie
“我也不想使用全屏抗锯齿。对于这个,性能最明智的解决方案是什么?”所以,你不想使用抗锯齿技术 旨在完全按照您的意愿行事。而且你不想使用着色器。到底是什么 做 你要? - Nicol Bolas
@NicolBolas,我不想要全屏抗锯齿,因为据我所知,它的速度很慢。目前它适用于带有颜色的四边形。 - Rookie


答案:


所以,你想要平滑的线条,而不是:

  • 线平滑。
  • 全屏抗锯齿。
  • 着色器。

好的。

你最好的选择是使用Valve 经过Alpha测试的放大技术。根据您的需要,基本思想是创建一个纹理,表示距离线的距离,纹理的中心距离为1.0。这可能是一维纹理。

然后使用本文中描述的技术(其中许多使用固定功能,包括抗锯齿版本),绘制一个代表您的线条的四边形。显然你需要alpha混合(因此它不是与顺序无关的)。您可以使用线宽来控制它变为合适颜色的距离,从而可以制作窄线或宽线。


使用着色器执行此操作几乎与上面相同,除了没有纹理。不是访问距离纹理,而是从顶点着色器传递和插值距离。对于四边形的左边缘,顶点着色器通过0.对于右边缘,它通过1.将此乘以2,减去1,并取绝对值。

这是你离线的距离(线是四边形的中心)。然后就像Valve的算法一样使用那个距离。


10
2018-05-12 00:10



我知道这种技术,但它并不是我想要的东西,并且会占用更多的内存。我目前的解决方案与四边形颜色很快,并没有占用任何额外的纹理内存。 - Rookie
我现在愿意接受GLSL解决方案。 - Rookie
@Rookie:“更多内存”是指4KB(可能是GPU的最小可能分配)。每行不需要一个纹理,只需要一个纹理周期。如上所述,它可能是一维纹理;它也不一定特别大。一个16x1 GL_LUMINANCE8 纹理会很好。不知何故,我不认为你会错过4K的RAM。 - Nicol Bolas
@Rookie:至于着色器,请参阅我的编辑。 - Nicol Bolas


打开全屏抗锯齿并使用四边形将是我的首选。


3
2018-04-27 16:25



我认为全屏抗锯齿对于一个游戏来说有点太过分了,因为除了这些游戏外,其他任何东西都没有反锯齿,这些游戏只是游戏的一小部分。顺便说一句,为什么你需要纹理四边形和全屏AA?纹理四边形是不够的? - Rookie
你需要两者,因为四边形不会消除锯齿,除非你对其进行消除锯齿,如果内存服务(它不能),一些FSAA算法不喜欢抗锯齿线。至于FSAA,它最有可能比没有硬件加速它的卡上使用GL_LINE_SMOOTH便宜。 - Edvard Pedersen
但是,如果使用具有1像素全不透明且相邻2像素完全透明的纹理,四边形看起来不像平滑线?尚未测试,但我不知道为什么不...因为在我的纹理测试中,我在纹理中绘制了一条直线,然后旋转纹理四边形顶点,当它旋转时,线看起来确实看起来像平滑线,就像它有抗锯齿一样。 - Rookie
问题在于宽度超过3个像素的四边形将需要另一个纹理以避免线看起来“更平滑”,以及1像素问题。 - Edvard Pedersen
但是FSAA只有我渲染的四边形才有可能吗?否则它将变得非常密集,因为我需要至少8倍的抗锯齿,可能需要16倍才能使线看起来像它们一样 GL_LINE_SMOOTH。 - Rookie


目前我使用2或3个四边形来做这个,这是最简单的方法。

  • 如果线厚度<= 1px,那么您只需要2个四边形。
  • 如果线宽> 1px,则需要在中间添加第三个四边形。
  • 如果线宽> = 1px,则渐变边缘四边形厚度不得改变。

在下图中,您可以看到带有蓝色边框的四边形。白色表示完全不透明,黑色表示零不透明度(=完全透明)。

enter image description here


1
2017-08-20 10:09