javascript - 三.js/WebGL : Large spheres appear broken at intersection

Question

让我先声明我对 3D 图形非常缺乏经验。

问题

我正在使用 Three.js。我有两个球体(故意)在我的 WebGL 模型中发生碰撞。当我的球体非常大时，重叠的球体在它们相交的地方显得“ splinter ”，但较小的球体渲染得非常好。

我对某些对象使用如此大的单位有一个非常具体的原因，缩小对象并不是一个真正的选择。

例子

这是一个更大球体的 fiddle :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 near plane 设置得更远

改变

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

哪个可能更合理一些？这基本上是说当距离相机较远时，相差小于 ~728 个单位的 2 个点可能会被错误排序。或者从积极的 Angular 来看，只要 2 个点在距离相机的距离上彼此至少相距 728 个单位，它们就会被正确排序。

所有这些都是为了指出您必须为您的应用程序适本地设置您的近距和远距裁剪平面。

我可能应该注意到，所应用的数学只是最常见的数学，并且可能与 three.js 默认使用的数学相同。使用您自己的顶点着色器，您可以让 zbuffer 做其他事情。 Here's a good article on it .