Webgl 如何使用着色器生成混合边

让我介绍一下我的答案

这是使用webgl渲染的triagnle。嗯，它放大了一点

这是三角形，我想要：

所以我在寻找一些着色器，它将能够混合原始三角形的边。我有一个想法如何实现一个，但我可能还不够好写它

我的想法是： 根据每个片段的3个顶点的位置计算，基本体覆盖像素多少，然后根据计算的信息设置该像素的透明度

我可以从顶点着色器获得2D坐标，并在片段着色器中使用它们。现在我可能想使用

gl_FragCoord.xy

或

gl_PointCoord.xy

并计算%像素覆盖率，但我无法比较这些值（似乎单位不同，我用毫米计算英里，而且这些向量的“零点”在其他地方），所以我无法计算最终的透明度值

---

有人能帮我吗？把我转到正确的方向

您的计划存在的问题是OpenGL应用自己的测试来决定首先绘制哪些像素-如果碎片的中心位于几何体边界内，则将其光栅化，如果碎片位于几何体边界外，则不会，如果它正好位于边界上，则光栅化取决于它是位于水平或垂直运行的起点还是终点。边界条件确保两个三角形完全相交的地方，它们永远不会包含相同的碎片

因此，如果你计算每个片段的覆盖率，你几乎永远不会得到一个小于50%的数字（角落和其他非常薄的几何体是例外）。您将无法获得所需的完整反走样。您将获得由别名版本剪裁的抗锯齿版本

硬件通过对每个输出像素采样多个片段来实现这一点。通过以输出大小的倍数渲染到纹理，然后缩小比例，可以模拟这种情况。mip贴图生成将过滤输入图像

---

话虽如此，在调用

canvas.GetContext

时，您是否尝试将

antialas

作为

true

传递？这将使用硬件功能，取决于硬件和浏览器支持。

实现这一点的方法很多

可以以更高的分辨率渲染。使画布大于其显示的大小，浏览器几乎肯定会对结果进行双线性插值。例如：

<canvas width="400" height="400" style="width: 200px; height 200px" />

声明具有400x400后台存储的画布，该画布在显示时缩放为200x200

另一种技术是在着色器中计算alpha值，以便沿着多边形的边缘获得所需的混合

---

我肯定还有其他人。大多数Canvas2D实现都是gpu加速和抗锯齿的，即使gpu不支持抗锯齿，也是如此。

抗锯齿的默认设置不是真的吗？不，你刚刚节省了我很多时间！问题是，我用集成图形卡在计算机上测试了所有这些，这可能无法进行抗锯齿。非常感谢，现在我对着色器和卡片了解更多：）