Render looks blurry and pixelated, even with antialias: true, why?

When rendering on my machine, the result looks very blurry and pixelated (see picture). While, mostly, the same code looks fine on web (https://fantasmaenlamaquina.com/exp/01/). In that site looks nice even in my machine, so it may be something to do with my code, which is stupidly simple?

I’m running on a simple laptop that only has an Intel 4000 integrated card.

My HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <style>

    body {

        margin: 0;

        padding: 0;

        background: #010101;

        width: 100%;

        overflow: hidden;

    }

    canvas {

        width: 100%;

        height: 100%;

        cursor: grab;

    }

</style>

  <title>Experiment</title>

</head>

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"

    integrity="sha256-gSh8eotzb/CVvCREGPUNgIWuDnTYnZvVOQnRrP1eDjI=" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>

  <script src="js/exp3.js" ></script>

</body>

</html>

My JS:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({

  alpha: true,

  antialias: true

});

renderer.setClearColor(0x010101, 0);

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

window.addEventListener('resize', function () {

  var width = window.innerWidth;

  var height = window.innerHeight;

  renderer.setSize(width, height);

  camera.aspect = width / height;

  camera.updateProjectionMatrix();

});

controls = new THREE.OrbitControls(camera, renderer.domElement);

// figura

var geometry = new THREE.SphereGeometry(10, 32, 32);

var geometry1 = new THREE.SphereGeometry(0.5, 32, 32);

var geometry2 = new THREE.SphereGeometry(1, 32, 32);

var geometry3 = new THREE.SphereGeometry(2, 32, 32);

var material1 = new THREE.MeshBasicMaterial({

  color: 0xcc1c1c,

  wireframe: true

});

var material2 = new THREE.MeshBasicMaterial({

  color: 0xcc1c8e,

  wireframe: true

});

var material3 = new THREE.MeshBasicMaterial({

  color: 0x8c15db,

  wireframe: true

});

var material4 = new THREE.MeshBasicMaterial({

  color: 0x2c15d8,

  wireframe: true

});

var material5 = new THREE.MeshBasicMaterial({

  color: 0x1555d6,

  wireframe: true

});

var figura1 = new THREE.Mesh(geometry1, material1);

var figura2 = new THREE.Mesh(geometry2, material2);

var figura3 = new THREE.Mesh(geometry3, material3);

var figura4 = new THREE.Mesh(geometry, material4);

var figura5 = new THREE.Mesh(geometry, material5);

var figura6 = new THREE.Mesh(geometry, material1);

scene.add(figura1, figura2);

camera.position.z = 3;

// lógica del programa

var update = function () {

  figura1.rotation.x += 0.00100;

  figura1.rotation.y += 0.00010;

  figura1.rotation.z += 0.00001;

  figura2.rotation.x -= 0.00001;

  figura2.rotation.y -= 0.00010;

  figura2.rotation.z -= 0.00100;

  figura2.rotation.z -= 0.00100;

  figura2.rotation.x -= 0.00001;

  figura2.rotation.y -= 0.00010;

  // figura2.rotation.y += 0.00015;

  // figura3.rotation.y += 0.00020;

  // figura3.rotation.z += 0.00020;

  // figura4.rotation.x -= 0.00010;

  // figura5.rotation.x -= 0.00015;

  // figura6.rotation.x -= 0.00020;

};

// dibujar escena

var render = function () {

  renderer.render(scene, camera);

};

// correr loop

var GameLoop = function () {

  requestAnimationFrame(GameLoop);

  update();

  render();

}

GameLoop();

What is the resolution of your device?

TBH, I’m still not sure I get the issue. Do you mean the linked application renders nicely on your device but not your shared code?

I’ve created a live example with your code. It renders crystal clear on my iMac:

https://jsfiddle.net/8u6mc0q7/

I’ve just added renderer.setPixelRatio(window.devicePixelRatio); so the app utilizes the full resolution of my retina display.

1 Like

Hmm, interesting. Adding that piece of code renderer.setPixelRatio(window.devicePixelRatio);makes it look perfect.

I’m using a 1920 x 1080 monitor with a 1366 x 768 laptop screen.

Is it convenient? In other computers I don’t have that issue.

Well, it’s normal that using window.devicePixelRatio is required to achieve the highest possible resolution on devices with a value greater than 1. Read the following article for detailed information about this topic.

1 Like