Render error with edges helper and semi transparent object

问题

I am trying to create an earth with three js like this example which is an upgrade from this one. The problem i have is that even thought in the code i add to the scene first the sky, after the earth and at the end the atmosphere the render seams not to understand this order a respondes with this

Now when i zoom in and get near the earth object the render is working correct giving this responce.

The problem as you can see is also with the THREE.EdgesHelper when in long zoom level it gets rendered in some parts even thought it is behind the earth, but in short zoom level it works perfect. Any ideas how to overcome this? This is the all the code to create the spheres:

function earthView(){
if (!scene){
    main();//here i create the controls,camera,scene,renderer etc
}

// create the geometry sphere stars
var geometry  = new THREE.SphereGeometry(6371000000, 36, 36)
// create the material, using a texture of startfield
var material  = new THREE.MeshBasicMaterial()
material.map   = THREE.ImageUtils.loadTexture('images/earthView/ESO_-_Milky_Way.jpg')
material.side  = THREE.BackSide
// create the mesh based on geometry and material
var mesh  = new THREE.Mesh(geometry, material)
mesh.position.set(0,0,-6371000)

scene.add(mesh)


//earth
var geometry   = new THREE.SphereGeometry(6371000, 36, 36)
var material  = new THREE.MeshPhongMaterial()
var earthMesh = new THREE.Mesh(geometry, material)
//earthMesh.position.set(0,-6371000,0)
//earthMesh.rotation.set(0,-Math.PI/2,0)
helper = new THREE.EdgesHelper( earthMesh );
helper.material.color.set( 0xffffff );


material.map    = THREE.ImageUtils.loadTexture('images/earthView/earthmap1k.jpg')
material.bumpMap    = THREE.ImageUtils.loadTexture('images/earthView/earthbump1k.jpg')
material.bumpScale = 100


material.specularMap = THREE.ImageUtils.loadTexture('images/earthView/earthspec1k.jpg')

scene.add(earthMesh);
scene.add( helper );


//atmosphere
var geometry   = new THREE.SphereGeometry(7365000, 36, 36)
var material  = new createAtmosphereMaterial()
material.uniforms.glowColor.value.set(0x00b3ff)
material.uniforms.coeficient.value  = 0.1
material.uniforms.power.value       = 2.0
//material.side = THREE.BackSide
var earthAtmo = new THREE.Mesh(geometry, material)
//earthAtmo.position.set(0,0,-6371000)

scene.add(earthAtmo);


/**
 * from http://stemkoski.blogspot.fr/2013/07/shaders-in-threejs-glow-and-    halo.html
 * @return {[type]} [description]
  */ 

function createAtmosphereMaterial(){
  var vertexShader  = [
    'varying vec3 vNormal;',
    'void main(){',
    '   // compute intensity',
    '   vNormal     = normalize( normalMatrix * normal );',
    '   // set gl_Position',
    '   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
    '}',
].join('\n')
var fragmentShader  = [
    'uniform float coeficient;',
    'uniform float power;',
    'uniform vec3  glowColor;',

    'varying vec3  vNormal;',

    'void main(){',
    '   float intensity = pow( coeficient - dot(vNormal, vec3(0.0, 0.0, 1.0)), power );',
    '   gl_FragColor    = vec4( glowColor * intensity, 1.0 );',
    '}',
].join('\n')

// create custom material from the shader code above
//   that is within specially labeled script tags
var material    = new THREE.ShaderMaterial({
    uniforms: { 
        coeficient  : {
            type    : "f", 
            value   : 1.0
        },
        power       : {
            type    : "f",
            value   : 2
        },
        glowColor   : {
            type    : "c",
            value   : new THREE.Color('blue')
        },
    },
    vertexShader    : vertexShader,
    fragmentShader  : fragmentShader,
    side        : THREE.FrontSide,
    blending    : THREE.AdditiveBlending,
    transparent : true,
    depthWrite  : false,
});
return material
}

}

I use renderer.sortObjects = false when i define the renderer so the objects get rendered by the order they are added in the scene.

Brief summary: get the helper and the atmosphere rendered like pic 2 in all zoom levels.

Update Hint : 1.might this be a problem of the graphic card?2.might the long distance i am using in pixels be the problem?

回答1:

This question has already been answered at this post.So setting the logarithmicDepthBuffer: true did the job!

来源：https://stackoverflow.com/questions/34643323/render-error-with-edges-helper-and-semi-transparent-object

标签

javascript

three.js

render