边缘助手和半透明对象的渲染错误 [英] Render error with edges helper and semi transparent object

问题描述

我正在尝试用三个 js 创建一个地球，例如

I am trying to create an earth with three js like

现在，当我放大并靠近地球对象时，渲染工作正常，给出了这个响应.

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

你所看到的问题也出在 THREE.EdgesHelper 上，当在长缩放级别时，它会在某些部分渲染，甚至认为它在地球后面，但简而言之，它工作完美.任何想法如何克服这个?这是创建球体的所有代码:

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
}

}

我在定义渲染器时使用 renderer.sortObjects = false 以便对象按照它们在场景中添加的顺序进行渲染.

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

简要总结:在所有缩放级别中获得像图 2 一样渲染的助手和氛围.

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

更新提示:1.这可能是显卡的问题吗?2.可能是我使用的长距离(以像素为单位)有问题吗?

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?

推荐答案

这个问题已经在 这篇文章.所以设置 logarithmicDepthBuffer: true 做到了！

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

这篇关于边缘助手和半透明对象的渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！