2

I'm working on a voxel engine that uses WebGL directly. The textures look great within a voxel-engine game (which uses three.js), but look horrible in my engine.

Here's an example with a simple grass texture on a plane.

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

If you click on the canvas and grant it permission to hide your mouse cursor, you can see that the texture tears and distorts as you move around (using WASD keys). Any ideas as to why?

I've read about using 0.5 pixel offsets somewhere, but I'm not certain whether that pertains to my problem.

Alan Szlosek
  • 3,221
  • 3
  • 20
  • 12

1 Answers1

0

Your textures are distorting mainly because the rendering resolution is so low. Your example looks fine to me when I size down the window a whole bunch.

Note that when you size a canvas via CSS, it doesn't change the amount of pixels in the canvas, it only scales the canvas. The default size of an HTML canvas is 150x300, so that is the resolution your demo is currently rendering at. Pretty low-res for a full screen demo! To make your canvas higher resolution, you will need to set the width and height attributes of the canvas element itself, rather than through CSS.

If it still feels too jaggy after using JavaScript to set the canvas width and height attributes to match the window size, you can set the canvas' height and width attributes to 2x or 4x the size of the window. This will effectively anti-alias your scene, and will remove even more of the jagged edges.

For details on using JavaScript to get your canvas to dynamically resize to fit your page, please see this answer: Resize HTML5 canvas to fit window

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78