0

让我介绍一下我的答案。

这是使用webgl呈现的 triagnle 。嗯,它是有点扩大... 在此处输入图像描述

这是三角形,我想要:在此处输入图像描述

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

我的想法是这样的:根据每个片段的3个顶点的位置计算,图元覆盖像素多少,然后根据计算的信息设置这个像素的透明度......

我可以从顶点着色器获取 2D 坐标并在片段着色器中使用它们。现在我可能想使用gl_FragCoord.xygl_PointCoord.xy计算 % 像素覆盖率,但我无法比较这些值(单位似乎不同,我用毫米计算英里,而且这些向量的“零点”在其他地方),所以我无法计算最终的透明度值。

任何人都可以帮助我吗?把我转正就行了。

4

2 回答 2

1

有很多方法可以实现这一目标

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

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

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

这是一个小提琴

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

我确定还有其他人。即使 GPU 不支持抗锯齿,大多数 Canvas2D 实现都是 gpu 加速和抗锯齿的,因此您可以尝试挖掘其中之一

于 2013-10-03T02:34:19.337 回答
0

你的计划的问题是 OpenGL 应用它自己的测试来决定首先绘制哪些像素 - 如果片段的中心位于几何边界内,则它被光栅化,如果它位于外部,那么它不是,如果它正好位于边界然后光栅化取决于它是在水平或垂直运行的开始还是结束。边界条件确保两个三角形恰好相交的地方,它们永远不会包含相同的片段。

因此,如果您计算每个片段的覆盖率,您几乎永远不会得到小于 50% 的数字(角落和其他非常薄的几何形状除外)。你不会得到你想要的完整的抗锯齿。您将获得被别名版本剪裁的抗锯齿版本。

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

说了这么多,你有没有试过antialiastrue打电话一样传球canvas.GetContext?这将使用硬件功能,取决于硬件和浏览器的支持。

于 2013-10-02T15:35:36.027 回答