如何在WebGL中创建矢量画笔工具? (例如Clip Studio或Concepts)

问题描述 投票:0回答:1

我正在使用WebGL在浏览器上创建绘图工具。我希望能够编辑和修改笔触。因此,它具有Clip Studio或Concepts之类的东西。我认为他们使用某种矢量画笔,但很难分辨,因为它看起来很像“邮票”画笔。

[目前,我正在使用经典的“印记”方法,该方法使用DeCasteljau算法将贝塞尔曲线切成线,然后使用布雷森纳姆的线算法获取将构成我的线的点坐标。然后,将这些点渲染为顶点,并在缓冲区和渲染器中以gl_POINTS的形式传递,并使用自定义着色器来应用纹理和所需的效果。

这很好用,但效率不高,因为前2种算法是由CPU完成的。另外,我在不透明度方面遇到了麻烦,但这是另一回事。因此,如果我将所有这些笔触保持为可编辑状态,那么它将更新数百万个点,这将浪费渲染时间。因此,绝对不是正确的方法。

谢谢!

javascript vector drawing webgl brush
1个回答
0
投票

[我的猜测是,那些应用会缓存所有笔画的结果,但当前正在编辑的笔画,以便在编辑特定笔画时,它们仅(1)绘制纹理,使所有在要编辑的笔画后面可见(2)绘制正在编辑的描边(3)绘制要编辑的描边前面的所有内容的纹理(4)绘制描边小部件。这些应用中的大多数最终也会变得太慢,并且具有在场景变得过于复杂时不渲染笔画的选项(轮廓模式)

关于绘制方式,如果不查看要实现的确切功能的示例,就很难知道。有各种笔触。我想到的是

((1)抚摸看起来像笔迹(1种颜色,锋利或模糊的椭圆形笔刷)]

我的猜测是他们建立了代表笔触轮廓的多边形网格。给定笔触线下方的顶点具有1.0的额外参数,边缘顶点具有0.0的额外参数(或类似的参数),似乎似乎比较容易编写使用各种参数对多边形进行着色以使其模糊的着色器。] >

更难的部分是处理角。大多数结构化的绘图程序都有如何处理拐角的选项。

((2)通过在图像上冲压来抚摸(如沿着笔触放置树叶)

这听起来像是您选择的方法,但是通常这些笔触类型具有用于选择标记频率的选项(例如,每单位的标记数量)以及用于诸如方向,与样条线偏移甚至是多个不同标记之类的随机性的选项。

((3)通过重复刷来抚摸(例如图案中的丝带或链中的链节)

[这又一次感觉像是根据笔触生成一个多边形并将纹理设置为重复,尽管我敢肯定,如果您真的想制作链条,因为链条只能在链节处弯曲,这并不是那么简单。

无论如何,可能有一些相关的参考文献

© www.soinside.com 2019 - 2024. All rights reserved.