javascript - WebGL textures distort as I move around them -

i'm working on voxel engine uses webgl directly. textures great within voxel-engine game (which uses three.js), horrible in engine.

here's example simple grass texture on plane.

http://greaterscope.net/ugly-textures/

if click on canvas , grant permission hide mouse cursor, can see texture tears , distorts move around (using wasd keys). ideas why?

i've read using 0.5 pixel offsets somewhere, i'm not whether pertains problem.

your textures distorting because rendering resolution low. example looks fine me when size down window whole bunch.

note when size canvas via css, doesn't change amount of pixels in canvas, scales canvas. default size of html canvas 150x300, resolution demo rendering at. pretty low-res full screen demo! make canvas higher resolution, need set width , height attributes of canvas element itself, rather through css.

if still feels jaggy after using javascript set canvas width , height attributes match window size, can set canvas' height , width attributes 2x or 4x size of window. anti-alias scene, , remove more of jagged edges.

for details on using javascript canvas dynamically resize fit page, please see answer: resize html5 canvas fit window