绘制具有硬边的三角形

Question

我正在尝试绘制一个三角形，没有任何类型的抗锯齿或“平滑”边缘。我想要有硬边，因为最终目标是渲染一条硬线。

我创建了一个 10x10px 的画布并画了一个小三角形。我缩放了画布以更好地查看像素的颜色。

我在创建画布时禁用了抗锯齿配置。

gl = canvas.getContext('webgl2', { antialias: false })

然而，三角形仍然是用“平滑”边缘绘制的。如果我激活抗锯齿，平滑效果会更强，这让我认为问题出在其他地方。

我想这可能是颜色的插值，但由于每个顶点都有相同的颜色，所以这不可能是问题。

我在想的另一件事是，在光栅化过程中，覆盖的像素没有完全绘制，如果没有完全覆盖，则只是半绘制。如果是这样，如何改变？

我真的很感谢这里的一些帮助。

Answer 1

缩放元素时，浏览器双线性插值图形元素（画布、图像、视频），将

image-rendering: pixelated;

添加到画布 CSS 样式将应用最接近的过滤而不是线性过滤，类似于渲染的实际输出。