当我在它们周围移动时，WebGL 纹理会扭曲
WebGL textures distort as I move around them
我正在开发直接使用 WebGL 的体素引擎。纹理在 voxel-engine 游戏（使用 three.js）中看起来很棒，但在我的引擎中看起来很糟糕。
下面是一个简单的平面草纹理示例。
http://greaterscope.net/ugly-textures/
如果您单击 canvas 并授予它隐藏鼠标光标的权限，您会看到纹理在您四处移动时撕裂和扭曲（使用 WASD 键）。关于原因有什么想法吗？
我读到过在某处使用 0.5 像素偏移，但我不确定这是否与我的问题有关。
您的纹理变形主要是因为渲染分辨率太低。当我缩小 window 一大堆时，你的例子对我来说看起来不错。
请注意，当您通过 CSS 调整 canvas 大小时，它不会改变 canvas 中的像素数量，它只会缩放 canvas。 default size of an HTML canvas is 150x300，这就是您的演示当前呈现的分辨率。全屏演示的分辨率非常低！要使 canvas 分辨率更高，您需要设置 canvas 元素本身的 width 和 height 属性，而不是通过 CSS.
如果使用JavaScript设置canvas宽高属性匹配window尺寸后还是觉得太锯齿，可以设置canvas'高度和宽度属性为 window 大小的 2 倍或 4 倍。这将有效地消除场景的锯齿，并消除更多的锯齿状边缘。
有关使用 JavaScript 让您的 canvas 动态调整大小以适合您的页面的详细信息，请参阅此答案：Resize HTML5 canvas to fit window
我正在开发直接使用 WebGL 的体素引擎。纹理在 voxel-engine 游戏（使用 three.js）中看起来很棒，但在我的引擎中看起来很糟糕。
下面是一个简单的平面草纹理示例。
http://greaterscope.net/ugly-textures/
如果您单击 canvas 并授予它隐藏鼠标光标的权限，您会看到纹理在您四处移动时撕裂和扭曲（使用 WASD 键）。关于原因有什么想法吗？
我读到过在某处使用 0.5 像素偏移，但我不确定这是否与我的问题有关。
您的纹理变形主要是因为渲染分辨率太低。当我缩小 window 一大堆时，你的例子对我来说看起来不错。
请注意，当您通过 CSS 调整 canvas 大小时，它不会改变 canvas 中的像素数量，它只会缩放 canvas。 default size of an HTML canvas is 150x300，这就是您的演示当前呈现的分辨率。全屏演示的分辨率非常低！要使 canvas 分辨率更高，您需要设置 canvas 元素本身的 width 和 height 属性，而不是通过 CSS.
如果使用JavaScript设置canvas宽高属性匹配window尺寸后还是觉得太锯齿，可以设置canvas'高度和宽度属性为 window 大小的 2 倍或 4 倍。这将有效地消除场景的锯齿，并消除更多的锯齿状边缘。
有关使用 JavaScript 让您的 canvas 动态调整大小以适合您的页面的详细信息，请参阅此答案：Resize HTML5 canvas to fit window