问题

我正在使用Three.js。我有两个领域（故意）在我的WebGL模型中碰撞。当我的球体非常大时，重叠的球体在它们相交的地方显得“破碎”，但是较小的球体呈现完美的状态。

我有一个非常具体的理由为某些对象使用这么大的单位，缩小对象并不是一个真正的选择。

实施例

enter image description here

这是较大球体的小提琴：http://jsfiddle.net/YSX7h/

和较小的：http://jsfiddle.net/7Lca2/

代码

var radiusUnits = 1790; // 179000000
var container;
var camera, scene, renderer;
var clock = new THREE.Clock();
var cross;
var plane;
var controls;
var cube;
var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );
init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 3500000);
    controls = new THREE.OrbitControls(camera);
    camera.position.set(2000, 2000, 2000);
    camera.position.z = 500;
    scene = new THREE.Scene();

    var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/qDAEVoo.jpg');
    var material = new THREE.MeshBasicMaterial({
        color: 0xFFFFFF,
        map: texture,
        opacity:1
    });

    var material1 = new THREE.MeshBasicMaterial({ color: 0xFF0000, wireframe: true, opacity:1 });
    var geometry = new THREE.SphereGeometry(radiusUnits, 32, 32);
    var geometry1 = new THREE.SphereGeometry(radiusUnits, 32, 32);
    var mesh = new THREE.Mesh(geometry, material);
    var mesh1 = new THREE.Mesh(geometry1, material1);
    mesh1.position.set(0, 1000, 0);
    mesh.position.set(0, -1000, 0);

    scene.add(mesh);
    scene.add(mesh1);

    renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );

    document.body.appendChild(renderer.domElement);
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function onWindowResize() {
    renderer.setSize( window.innerWidth, window.innerHeight );
    render();
}

function animate() {
    controls.update();
    requestAnimationFrame( animate );
}

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.oRequestAnimationFrame      ||
                window.msRequestAnimationFrame     ||
                function( callback ){
                  window.setTimeout(callback, 1000 / 60);
                };
})();

(function animloop(){
    requestAnimFrame(animloop);
    render();
})();

function render() {
    var delta = clock.getDelta(); 
    renderer.render( scene, camera );
}

为什么这确实发生了？有什么办法可以解决这个问题吗？

提前致谢。

Answer 1

简短的回答，让你的z靠近飞机

更改

camera = new THREE.PerspectiveCamera(
    100, window.innerWidth / window.innerHeight, 0.1, 3500000);

到

var zNear = 1000;
var zFar = 3500000;
camera = new THREE.PerspectiveCamera(
    100, window.innerWidth / window.innerHeight, zNear, zFar);

注意：我不知道1000是否会起作用，如果它没有尝试10000。

zBuffer，曾经能够分辨出哪些像素在其他先前绘制的像素前面，具有有限的分辨率。在WebGL中它可能是16位，24位或32位。我猜测24是最常见的。为了说明这一点，我们假设它只是4位。这意味着对于给定的z范围，只有16个可能的值。给定用于3D投影的标准数学，在4位zbuffer上，如果范围为zNear = 0.1和zFar = 3500000，则16个可能的值类似于

0 = 0.100
1 = 0.107         range: 0.007
2 = 0.115         range: 0.008
3 = 0.125         range: 0.010
4 = 0.136         range: 0.011
5 = 0.150         range: 0.014
6 = 0.167         range: 0.017
7 = 0.187         range: 0.021
8 = 0.214         range: 0.027
9 = 0.250         range: 0.036
10 = 0.300        range: 0.050
11 = 0.375        range: 0.075
12 = 0.500        range: 0.125
13 = 0.750        range: 0.250
14 = 1.500        range: 0.750
15 = 3499999.993  range: 3499998.493

正如您所看到的，值之间的范围呈指数增长，这意味着远离相机几乎没有分辨率。

如果我们将zNear增加到1000，我们就会

0 = 1000.000
1 = 1071.407       range: 71.407
2 = 1153.795       range: 82.389
3 = 1249.911       range: 96.115
4 = 1363.495       range: 113.584
5 = 1499.786       range: 136.291
6 = 1666.349       range: 166.564
7 = 1874.531       range: 208.182
8 = 2142.158       range: 267.626
9 = 2498.929       range: 356.771
10 = 2998.287      range: 499.358
11 = 3747.056      range: 748.769
12 = 4994.292      range: 1247.236
13 = 7486.097      range: 2491.805
14 = 14940.239     range: 7454.142
15 = 3500000.000   range: 3485059.761

你可以看到它开始分散一点。在zNear为0.1且zFar为3500000的24位深度缓冲区中，最后15个单位之间的范围为

16777201 = 115869.957       range: 7485.454
16777202 = 124466.066       range: 8596.109
16777203 = 134439.829       range: 9973.763
16777204 = 146151.280       range: 11711.451
16777205 = 160097.879       range: 13946.599
16777206 = 176987.000       range: 16889.122
16777207 = 197859.711       range: 20872.711
16777208 = 224313.847       range: 26454.135
16777209 = 258933.659       range: 34619.812
16777210 = 306189.940       range: 47256.281
16777211 = 374545.842       range: 68355.902
16777212 = 482194.095       range: 107648.253
16777213 = 676678.248       range: 194484.154
16777214 = 1134094.478       range: 457416.229
16777215 = 3499999.993       range: 2365905.515

与zNear在1000的位置相同，

16777201 = 3489810.475       range: 725.553
16777202 = 3490536.330       range: 725.855
16777203 = 3491262.487       range: 726.157
16777204 = 3491988.947       range: 726.459
16777205 = 3492715.709       range: 726.762
16777206 = 3493442.773       range: 727.064
16777207 = 3494170.140       range: 727.367
16777208 = 3494897.810       range: 727.670
16777209 = 3495625.784       range: 727.973
16777210 = 3496354.060       range: 728.277
16777211 = 3497082.640       range: 728.580
16777212 = 3497811.524       range: 728.884
16777213 = 3498540.712       range: 729.188
16777214 = 3499270.204       range: 729.492
16777215 = 3500000.000       range: 729.796

哪个可能更合理？它基本上是说远离相机的2个点小于~728个单位可能被错误地排序。或者将它置于正面光线下，只要距离相机2个点至少相距728个单位，它们就会被正确分类。

所有这一切都是为了指出你必须为你的应用适当地设置你的近和远剪裁平面。

我应该注意到，应用的数学运算只是最常见的数学运算，可能与three.js默认使用的数学相同。使用您自己的顶点着色器，您可以使zbuffer执行其他操作。 Here's a good article on it

Answer 2

您在深度缓冲区中遇到精度问题。场景的比例越大，这就越明显 - 特别是对于跨越大距离的物体。深度缓冲区只有32位（我相信浮点）可以使用。当您增加相机的Z范围时，精度会下降。标准相机往往在“近”平面附近具有更高的精度，并且缩小到距离（虽然我对实际使用的矩阵three.js不是肯定的。）

要么减小场景尺寸，要么将近处平面移离相机。如果搜索深度缓冲区和精度的主题，您可以找到有关此主题的大量信息。请参阅通用的OpenGL信息，而不仅仅是three.js或WebGL。

注意：为了澄清，两个场景不同的原因是因为您没有相同地缩放相机的设置。在简单的场景中，将近平面设置为“0.00001”，您将看到同样的问题。

Answer 3

您也可以尝试使用logarithmic depth buffer：

renderer = new THREE.WebGLRenderer( { logarithmicDepthBuffer: true } );

Three.js / WebGL：大球体在交叉处出现断裂

问题

实施例

代码

3 个答案: