如何消除UV贴图三角形之间的接缝（HTML5 Canvas）？
我在 http://jsfiddle.net/pB5A9/1/< 处设置了一个简单的 UV 映射演示/a> .它基于 使用 HTML5 Canvas 进行图像处理和纹理映射？ 。
该算法本身运行得很好。不过，有一个问题。三角形之间似乎有一条微弱的接缝。我在 Chrome (14.something) 和 Safari (5.1) 上对此进行了测试。它可能在其他浏览器中正常工作，尽管我不能确定这一点。
我猜这个问题与剪辑有关。问题是我不知道如何调整坐标以使问题消失。也许它缺少一些填充（+1）或其他东西。欢迎提出想法。 :)
I've set up a simple demo of UV mapping at http://jsfiddle.net/pB5A9/1/ . It's based on Image manipulation and texture mapping using HTML5 Canvas? .
The algorithm itself works pretty well. There's one issue, though. There appears to be a faint seam between the triangles. I tested this both on Chrome (14.something) and Safari (5.1). It's possible it works correctly in other browsers though I cannot be sure of that.
I'm guessing the issue has something to do with clipping. The thing is I'm not sure how to tweak the coordinates so that the issue disappears. Perhaps it's missing some padding (+1) or something. Ideas are welcome. :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
它与不同浏览器选择采用（或不采用）抗锯齿的方式有关。
它在 Chrome 15 上看起来不错。
减少剪辑应该可以解决您的问题。我建议您尝试将每个对象的剪切区域扩大 0.5 或 1 像素，看看效果如何。 （或者，您可以尝试将所有内容移动 0.5 像素，看看抗锯齿是否发生变化，您可能会感到惊讶）
It has to do with the way different browsers choose to take on anti-aliasing (or not).
It looks good on Chrome 15.
Clipping less should solve your problem. I'd suggest you try expanding your clipping region for each object by 0.5 or 1 pixel and see how it does. (alternatively you could try shifting everything by 0.5 pixels and seeing if the anti-aliasing changes, you might be surprised)