让我先说明我对3D图形缺乏经验.
我正在使用Three.js.我有两个领域(故意)在我的WebGL模型中碰撞.当我的球体非常大时,重叠的球体在它们相交的地方看起来"破碎",但是较小的球体呈现完美的细微.
我有一个非常具体的理由将这些大型单元用于某些对象,缩小对象并不是一个真正的选择.
这是一个更大的领域的小提琴: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 ); }
确切地说,为什么会发生这种情况?除了缩小这些对象之外,还有什么办法可以解决这个问题吗?
提前致谢.
简短的回答,让你的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
你可以看到它开始分散一点.在一个24位深度缓冲区,最小值zNear
为0.1和zFar
350000,最后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执行其他操作.这是一篇很好的文章.