Нечеткие объекты, когда друг перед другом (THREE.JS)

Question

Я возился с three.js, и у меня возникла проблема с объектами, которые находятся напротив друг друга. Объекты становятся все нечеткими, например this. Может ли кто-нибудь помочь мне в этом? Код (дрянной, хотя и рабочий):

////////////////////////////////// 
//  Init basic objects  // 
////////////////////////////////// 
var scene; 
var renderer; 
var camera; 

var backgroundScene; 
var backgroundCamera; 



////////////////////////////////// 
// Init supporting modules // 
////////////////////////////////// 
//Initialize the top-left stats screen 
var stats; 
//Initialize the axes. 
var axis; 
//Used for getting the camera option (inputed by user) 
var cameraMode = 1; //0 - follow, 1 - toXAxis, 2 - toCenter, 3 - followHorizontal 


////////////////////////////////// 
//  Time and acceleration // 
////////////////////////////////// 
var milis = 0; 
var scale = 170; 
var acceleration = 10000 * scale; 
var acceleratedTime; 


////////////////////////////////// 
// Init objects, def consts // 
////////////////////////////////// 
//Sun 
//Constants 
const SUN_ANGULAR_ROTAION = 2.865329607243705e-6; //in [rad/s] 
const SUN_RADIUS = 696342000 * scale; //in [m] 
const SUN_MERIDIANS_AND_PARALLELS = 80; //in [] 
//Objects 
var sunGeo; 
var sunMat; 
var sun; 

var sunLight; 


//Earth 
//Constants 
const EARTH_ANGULAR_ROTATION = 7.292115053925690e-5; //in [rad/s] 
const EARTH_RADIUS = 6368500 * scale; //in [m] 
const EARTH_MERIDIANS_AND_PARALLELS = 80; //in [] 
const EARTH_SEMI_MAJOR_AXIS = 1.4960e11; //in [m] 
const EARTH_ANGULAR_REVOLUTION = 1.99102128e-7; //in [rad/s] 
const EARTH_YEAR_LENGTH = 31.6e6; 
const EARTH_AXIAL_TILT = 0.13022222222 * Math.PI; //in [rad] 
//Objects 
var earthGeo; 
var earthMat; 
var earth; 


//Ecliptic Axis 
//Objects 
var eclipticAxisGeo; 
var eclipticAxisMat; 
var eclipticAxis; 



//Start the actual code 
function init() { //Initializes 
    ////////////////////////////////// 
    // Creating basic objects // 
    ////////////////////////////////// 
    //Create scene 
    scene = new THREE.Scene(); 

    //Init renderer 
    renderer = new THREE.WebGLRenderer({ 
     antialias: true 
    }); 
    renderer.setClearColor(new THREE.Color(0x000000, 1.0)); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    //Init camera 
    camera = new THREE.PerspectiveCamera(42, window.innerWidth/window.innerHeight, 0.1, EARTH_RADIUS * 100); 



    ////////////////////////////////// 
    // Create supporting modules // 
    ////////////////////////////////// 
    stats = new Stats(); 
    stats = initStats(); 

    axis = new THREE.AxisHelper(100000000000000); 
    scene.add(axis); 



    ////////////////////////////////// 
    // Creating the Background // 
    ////////////////////////////////// 
    //Material 
    var backgroundMaterial = new THREE.MeshBasicMaterial(); 
    backgroundMaterial.map = new THREE.TextureLoader().load("resources/textures/sky.jpg"); 

    //Mesh 
    var background = new THREE.Mesh(new THREE.PlaneGeometry(2, 2, 2), backgroundMaterial); 

    //Mesh position and rotation 
    background.rotation.z += Math.PI/2; 

    //Material editing 
    background.material.depthTest = false; 
    background.material.depthWrite = false; 

    //Scene 
    backgroundScene = new THREE.Scene(); 
    backgroundCamera = new THREE.Camera(); 

    //Add objects 
    backgroundScene.add(background); 
    backgroundScene.add(backgroundCamera); 

    ////////////////////////////////// 
    //  Creating the Sun  // 
    ////////////////////////////////// 
    //Geometry 
    sunGeo = new THREE.SphereGeometry(SUN_RADIUS, SUN_MERIDIANS_AND_PARALLELS, SUN_MERIDIANS_AND_PARALLELS); 

    //Material 
    sunMat = new THREE.MeshPhongMaterial(); 
    sunMat.emissive = new THREE.Color(0xffffff); 
    sunMat.emissiveMap = new THREE.TextureLoader().load("resources/textures/sun.jpg"); 

    //Mesh creation 
    sun = new THREE.Mesh(sunGeo, sunMat); 

    //Position of the Sun 
    sun.position.x = 0; 
    sun.position.y = 0; 
    sun.position.z = 0; 

    //Adding the sun 
    scene.add(sun); 

    //Adding light from sun 
    sunLight = new THREE.PointLight(0xFFFFFF, 1.0, 0); 
    sunLight.position.x = 0; 
    sunLight.position.y = 0; 
    sunLight.position.z = 0; 
    scene.add(sunLight); 



    ////////////////////////////////// 
    //  Creating the Earth  // 
    ////////////////////////////////// 
    //Geometry 
    earthGeo = new THREE.SphereGeometry(EARTH_RADIUS, EARTH_MERIDIANS_AND_PARALLELS, EARTH_MERIDIANS_AND_PARALLELS); 

    //Material 
    earthMat = new THREE.MeshPhongMaterial(); 
    earthMat.map = new THREE.TextureLoader().load("resources/textures/earth.jpg"); 

    //Mesh creation 
    earth = new THREE.Mesh(earthGeo, earthMat); 

    //Position of the Earth 
    earth.position.x = EARTH_SEMI_MAJOR_AXIS; 
    earth.position.y = 0; 
    earth.position.z = 0; 

    //Rotate the Earth properly 
    earth.rotation.y = Math.Pi/2; 
    earth.rotation.z += EARTH_AXIAL_TILT; 

    //Adding the Earth 
    scene.add(earth); 



    ////////////////////////////////// 
    // Creating the EclipticAxis // 
    ////////////////////////////////// 
    //Geometry 
    eclipticAxisGeo = new THREE.CircleGeometry(EARTH_SEMI_MAJOR_AXIS, 10000); 
    eclipticAxisGeo.vertices.shift(); 

    //Material 
    eclipticAxisMat = new THREE.LineBasicMaterial({ 
     color: 0xFF00FF 
    }); 


    //Mesh creation 
    eclipticAxis = new THREE.Line(eclipticAxisGeo, eclipticAxisMat); 

    //Rotate the Ecliptic properly 
    eclipticAxis.rotation.x = Math.PI/2; 

    //Adding the Ecliptic 
    scene.add(eclipticAxis); 



    ////////////////////////////////// 
    //  Camera positioning  // 
    ////////////////////////////////// 
    camera.position.set(earth.position.x, earth.position.y, earth.position.z); 
    camera.position.y += 1000000000 * scale; 
    camera.position.z += 1000000000 * scale; 
    camera.lookAt(earth.position); 



    ////////////////////////////////// 
    //  Appending to the DOM  // 
    ////////////////////////////////// 
    document.getElementById("WebGL-output").appendChild(renderer.domElement); 



    ////////////////////////////////// 
    // Creating interval functions // 
    ////////////////////////////////// 
    setInterval(function() { 
     ++milis; 
     acceleratedTime = milis * acceleration/1000; //TODO: Fix this bodge 
    }, 1); 



    ////////////////////////////////// 
    //Calling the actual renderScene// 
    ////////////////////////////////// 
    renderScene(); 
}; 



function renderScene() { //Does the rendering 
    stats.update(); 

    /*  COPE WITH ROTATION  */ 
    sun.rotation.y = SUN_ANGULAR_ROTAION * acceleratedTime; 

    earth.rotation.y = EARTH_ANGULAR_ROTATION * acceleratedTime; 



    /*  COPE WITH REVOLUTION */ 
    //The Sun doesn't move as its position is 0, 0, 0 

    earth.position.x = Math.cos(EARTH_ANGULAR_REVOLUTION * acceleratedTime) * EARTH_SEMI_MAJOR_AXIS; 
    earth.position.z = Math.sin(-EARTH_ANGULAR_REVOLUTION * acceleratedTime) * EARTH_SEMI_MAJOR_AXIS; 



    /*  COPE WITH CAMERA  */ 
    //TODO: Work with cameraMode0 and cameraMode3 
    if (cameraMode == 0) { 
     camera.position.x = earth.position.x + 10000000 * scale; 
     camera.position.y = earth.position.y + 10000000 * scale; 
     camera.position.z = earth.position.z + 10000000 * scale; 

     camera.lookAt(earth.position); 
    } else if (cameraMode == 1) { //To Starting Position 
     camera.position.x = EARTH_SEMI_MAJOR_AXIS; 
     camera.position.y = 1000000000 * scale; 
     camera.position.z = 1000000000 * scale; 

     camera.lookAt(new THREE.Vector3(EARTH_SEMI_MAJOR_AXIS, 0, 0)); 
    } else if (cameraMode == 2) { //To Center 
     camera.position.x = sun.position.x; 
     camera.position.y = sun.position.y + SUN_RADIUS * scale/50; 
     camera.position.z = sun.position.z; 

     camera.lookAt(sun.position); 
    } else { 
     camera.position.x = earth.position.x; 
     camera.position.y = 0; 
     camera.position.z = 0; 

     camera.lookAt(earth.position); 
    } 

    requestAnimationFrame(renderScene); //The ugly bits 

    renderer.autoClear = false; 
    renderer.clear(); 
    renderer.render(backgroundScene, backgroundCamera); 
    renderer.render(scene, camera); //The ugly bits 
}; 


////////////////////////////////// 
//Initiates the supporting stats// 
////////////////////////////////// 
function initStats() { 
    stats.setMode(0); 

    stats.domElement.style.position = 'absolute'; 
    stats.domElement.style.left = '0px'; 
    stats.domElement.style.top = '0px'; 

    document.getElementById("Stats-output").appendChild(stats.domElement); 

    return stats; 
}; 


////////////////////////////////// 
//Defines what happens on resize// 
////////////////////////////////// 
function onResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 

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

Answer 1

Это звучит так, как будто это проблема с буфером глубины. Существует отличный пример here различий между логарифмическим и линейным z-буферами. Они рекомендуют использовать логарифмический z-буфер для больших расстояний. Похоже, вы моделируете планеты, поэтому я думаю, что это может быть источником ваших печалей.

Посмотрите на этот пример и посмотрите, похож ли ваш вопрос на левый (обычный z-буфер) этого эскиза, и если это так, вам, вероятно, просто нужно использовать логарифмический z-буфер согласно моему связанному примеру выше , Надеюсь это поможет!