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();