我正在研究直接使用WebGL的体素引擎。纹理在voxel-engine游戏（使用three.js）中看起来很棒，但在我的引擎中看起来很糟糕。
这是一个在平面上具有简单草纹理的示例。
http://greaterscope.net/ugly-textures/
如果您单击画布并授予其隐藏鼠标光标的权限，您可以看到纹理在您移动时会撕裂和扭曲（使用WASD键）。关于为什么的任何想法？
我已经阅读过在某处使用0.5像素偏移，但我不确定这是否与我的问题有关。
答案 0 :(得分：0)
您的纹理扭曲主要是因为渲染分辨率太低。当我把窗户放大一整堆时，你的例子对我来说很好。
请注意，当您通过CSS调整画布大小时，它不会更改画布中的像素数量，它只会缩放画布。 default size of an HTML canvas is 150x300，这是您的演示当前渲染的分辨率。相当低分辨率的全屏演示！要使画布的分辨率更高，您需要设置canvas元素本身的width和height属性，而不是通过CSS。
如果在使用JavaScript设置画布宽度和高度属性以匹配窗口大小后仍然感觉太锯齿，则可以设置画布＆＃39;高度和宽度属性为窗口大小的2倍或4倍。这将有效地消除场景的混淆，并将删除更多的锯齿状边缘。
有关使用JavaScript让画布动态调整大小以适合您的网页的详情，请参阅以下答案：Resize HTML5 canvas to fit window