ios - 金属顶点着色器扩展单个三角形
问题描述
我正在开发一个 2d 绘图应用程序。我想在线条扩展的地方产生效果,如下所示:
这是一个动画,其中线条像气球一样展开和弹出。
这些线被绘制为三角形条带。我的想法是通过使顶点着色器中的每个三角形更大来使它们扩展。每个顶点都应该被推离三角形中的其他顶点。
为此,我需要访问三角形中的其他顶点。这在金属中可能吗?
vertex Vertex vertex_expand(device float2 *vertices [[buffer(0)]],
constant VertexUniforms *uniforms [[buffer(1)]],
uint vid [[vertex_id]]) {
// is vertices[vid - 1] and vertices[vid + 1] the previous and next vertices?
// is vid=0 the first vertex?
}
解决方案
是的,您可以访问其他顶点,具体取决于您如何进行绘制。如果您进行索引绘图,则顶点 ID 和三角形之间的关系由您的索引缓冲区控制。但是,问题在于您不知道用于给定调用顶点着色器的索引(如果这些索引都引用同一个顶点,则可能会为多个索引调用一次)。
因此,您将不得不避免索引绘图。
在这种情况下,是的,vertices[vid - 1]
并且vertices[vid + 1]
是上一个和下一个顶点。
但是,请注意,对于三角形带,每个顶点都是多个三角形的成员。因此,对于每个远离其中心的顶点,没有一个唯一的三角形,您可以移动该顶点以扩展它。我希望您希望两个顶点沿条带的同一边缘与您正在处理的顶点相邻,使用它们计算包含当前顶点的线段的法线,并沿该线移动顶点。
由于您正在制作动画并因此将重复执行此操作,因此您可能希望提前计算一次这些法线并将它们作为每个顶点数据传递。您可以使用计算着色器进行此计算,尽管在 CPU 上执行此操作可能足够快。如果您以这种方式预先计算法线,顶点着色器将不需要引用任何相邻顶点。
推荐阅读
- reactjs - React Native - 设置状态后状态返回null
- c# - 无法将自定义组件中的自定义属性保存到 DTSX 文件中
- python - 在 xarray 中打开多个具有相同维度和数据变量的 netcdf 文件
- javascript - 请求返回错误时如何从网站上抓取数据
- google-sheets - 谷歌表multible ImportXMLfails
- html - 如何下载上传到谷歌云存储上的文件而不是查看它?
- javascript - 如何从本地存储中获取存储的对象数组并使用java脚本在浏览器中显示
- firebase - E/MethodChannel#plugins.flutter.io/firebase_database(6299):处理方法调用失败
- java - 掷骰子直到一个值被掷出 1 000 000 次
- laravel - beforeCreate 挂钩中的错误:“TypeError:无法设置属性 $store of #
它只有一个吸气剂 laravel