Three.js antialiasing, box geometry still very unsharp

user_2924076 0
Viewed 1688

im trying to create a simple 3d game with boxgeometries in three.js. Everything works good but im not getting sharp edges on those boxes, no matter on mobile browser (safari) or on chrome on my macbook. See the screenshot below. Blurry Edges on Meshes

What i tried so far: set antialias on renderer to true (helps but still no straight lines from rotated cubes), set renderer pixel ratio (touch click intersects dont work then, and still pixelated lines.) Also tried the FXAA shader but result was not better. Using perspective camera, Boxgeometry with Basic Material.

My Question is, is it with three.js even possible to have sharp edges on those cubes ? especially when they are pretty small (like 30 equal sized on mobile screen).

Using three.js version 87, chrome 68, newest mobile safari.

Update: This is my renderer settings:

renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
   });
  renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setPixelRatio(window.devicePixelRatio); // doesnt do the trick and messes up the threex domevent touch inputs
  document.body.appendChild(renderer.domElement);


  canvas = document.getElementsByTagName('canvas')[0];
  window.onresize = resizeCanvas;
  resizeCanvas();

  function resizeCanvas() {
    canvas.style.width = '100%';
    canvas.style.height = '100%';

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
  }

in my css i only have canvas { height: 100%; width: 100%; }

update2: demo link here https://jsfiddle.net/roxanfc4/11/

three.js antialiasing
2 Answers

Somehow this snippet did the trick and the edges are clearly softer now:

renderer.setPixelRatio(window.devicePixelRatio * 1.5);
user_29240760

Just renderer.setPixelRatio(window.devicePixelRatio) should be fine. I dont think you need the x 1.5 part. Reference

user_15449370
Related