在 openGL 中渲染 Photoshop 风格画笔

发布于 2024-09-29 03:01:25 字数 665 浏览 3 评论 0原文

我有一些由我的程序以编程方式定义的行。我想做的是沿着它们渲染笔触。

我认为我想要的画笔类型的工作方式是,它只是有一个纹理,大部分是透明的,你要做的就是,以路径中的每个像素为中心渲染这个纹理,然后将它们混合在一起以创建笔划。

现在假设这甚至有效,我打赌它会太贵(针对 ipad 和其他移动芯片,它们讨厌填充率和 alpha 混合)

那么,还有什么其他选择呢?

如果它可以实时完成(即路径样条更新每一帧)那就太理想了。但如果没有,在 ipad 上的几分之一秒内也很好(样条线连接节点,用户可以拖动节点,从而改变样条线,但在样条线恢复到更简单的填充时,这是可以接受的正在四处移动,然后在释放画笔后重新计算画笔)

对于那些想知道的人,我正在尝试让粗线看起来像是用铅笔制作的。它应该看起来尽可能真实。

我考虑过将拉丝样条线渲染为纹理,但由于样条线可以是任何长度、任何方向,专用整个矩形纹理来包含整个样条线将是昂贵的......

样条线不可避免地被分成四边形为了进行渲染,所以我想到首先将画笔渲染为纹理,然后生成优化的纹理,将每个四边形分开并尽可能整齐地打包到纹理中。

但是两个渲染到纹理...算法来创建优化的纹理,使得四边形仍然彼此无缝混合...听起来像一场噩梦,而这甚至不是实时的。

那么,关于如何在 openGL 的 ipad 上实时绘制沿着样条线的粗铅笔状线条,有什么想法吗?

I have lines that are programmatically defined by my program. what I want to do is render a brush stroke along them.

the way I think the type of brush I want works is, it simply has a texture, mostly transparent, and what you do is, render this texture centered on EVERY PIXEL in the path, and they blend together to create the stroke.

now assuming this even works, I'm going to make a bet that it will be WAY too expensive (targeting the ipad and other mobile chips, which HATE fillrate and alpha blending)

so, what other options are there?

if it could be done in realtime (that is, the path spline updating every frame) that would be ideal. but if not, within a fraction of a second on the ipad would be good too (the splines connect nodes, the user can drag nodes around thus transforming the spline, but it would be acceptable to revert to a simpler fill for the spline while it was moving around, then recalculate the brush once they release it)

for those wondering, I'm trying to get it so the thick lines look like they have been made with a pencil. it should look as real life as possible.

I considered just rendering the brushed spline to a texture, but as the spline can be any length, in any direction, dedicating a WHOLE rectangular texture to encompass the whole spline would be way to costly...

the spline is inevitably broken up into quads for rendering, so I thought of initially rendering the brush to a texture, then generating an optimized texture with each of the quads separated and packed as neatly as possible into the texture.

but two renders to texture... algorithm to create the optimized texture, making it so the quads still seamlessly blend with each other... sounds like a nightmare, and thats not even making it realtime.

so yeah, any ideas on how to draw thick, pencil like lines that follow a spline in real time on the ipad in openGL?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

何其悲哀 2024-10-06 03:01:25

从我的角度来看,您想要渲染一条线:

  • 有纹理
  • 边缘逐渐消失(即没有锐边)
  • 遵循样条线

为了实现这些目标,我首先将样条线分解为一系列非常接近曲线的线段(您可以根据您希望它的精确度与您希望它渲染的速度来使其或多或少细粒度化)。

一旦你有了这些,你将需要将每个线段分成 3 个四边形,一个穿过线段的中间,作为线的完全不透明部分,另一个线的每个边缘上将淡出为完全透明。

您需要使用一点数学知识来确保沿着等分 2 个线段的向量挤出四边形(即,使每个线段和挤出向量之间的角度相等)。这将确保连接的钝角部分没有间隙,锐角部分没有重叠。

完成所有这些之后,您只需使用顶点位置作为 UV 坐标(尽管可能已缩放)并允许纹理环绕。

使用这种方法,您最终应该得到一个网格,该网格具有一条穿过样条线中间的实心粗线,并带有逐渐变细至完全透明的“鳍”。这应该非常接近您想要的效果,同时仅渲染到相关像素(即没有完全透明像素的巨大区域)并且内存开销非常小。


我在这里有点含糊,因为很难仅用文本来解释,而不编写深入的教程。如果您需要更多信息,只需评论您所坚持的内容,我将进一步详细说明。

From my point of view, what you want is to render a line that:

  • is textured
  • has the edges fade off (i.e. no sharp edge to it)
  • follows a spline

To achieve these goals I would first of all break the spline up into a series of line segments that closely approximate the curve (you can make it more or less fine-grained depending on how accurate you want it to be versus how fast you want it to render).

Once you have these, you will need to make each segment into 3 quads, one that goes over the middle of the line segment that serves as the fully opaque part of the line and one on each edge of the line that will fade out to be totally transparent.

You will need to use a little bit of math to make sure that you extrude the quads along a vector that bisects 2 segments equally (i.e. so that the angle between the each segment and the extrusion vector are equal). This will ensure that you don't have gaps in the obtuse part of the join and overlaps in the acute parts.

After all of this, you just need to use the vertex positions as the UV co-ordinates (probably scaled though) and allow the texture to wrap around.

Using this method, you should end up with a mesh that has a solid thick line running through the middle of your spline with "fins" that taper off into complete transparency. This should approximate the effect you want quite closely while only rendering to relevant pixels (i.e. no giant areas of completely transparent pixels) and with very litter memory overhead.


I've been a little vague here as its kind of hard to explain with text alone and without writing an in depth tutorial. If you need more info, just comment on what your stuck on and I'll elaborate further.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文