其他分享
首页 > 其他分享> > three.js 模型重合相交部分闪烁 Z-Fighting

three.js 模型重合相交部分闪烁 Z-Fighting

作者:互联网

Z-Fighting
当场景中两个模型在同一个位置时,渲染器会根据它们的深度值来显示前面的模型,隐藏背后的部分。而当他们的位置及深度值相同时,渲染器则不确定哪个将被绘制到颜色缓冲区中,相机旋转时,情况会变得更糟,于是就出现了闪烁现象,这就是“Z-Fighting”

想要解決这个问题,就是要让他们有不同的深度值(下面的主要说这种方法如何实现。)。

或者是手动设置渲染顺序,这样即使在同一位置同一个深度值当中也会将后渲染的覆盖之前的,这种出来的效果类似于设置了css当中的z-index,这种方法不太适用于我的场景,这里暂不做解释,需要的可以自行搜索相关文章。

如何让他们的深度值不同?
渲染器对深度等级的划分和相机的near和far两个参数是相关的,由于深度级别的个数是有限的,当far/near值太大时,深度等级划分的跨度就可能越大,物体之间更容易被视为同一个深度值,z-buffer准确度就会降低。另外深度缓冲其实是非线性的,靠近相机的地方精度更高,远离相机的地方精度低,也就是说,靠近相机的地方可能一个单位就被划分为一个深度等级,而远离相机的位置可能一百个单位才被划分为一个等级。

所以我们有了两种方法:

1. 增加深度等级数量,使用更高精度的z缓冲,缓冲的级别越多,冲突的概率相应的也就越低,开启这个会影响一定的性能。
renderer = new THREE.WebGLRenderer( { logarithmicDepthBuffer: true } );
//logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用。 默认是false。
2. 将near值调大,比如将0.1改为1改为10等;也可以尝试将far平面调小一些,但是由于非线性的影响,更改near值可能显得更有效。
var zNear = 0.1;//改为10
camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, zNear, 4000);
3. 设置多边形偏移(polygon offset)
WebGL为Z-Fighting问题提供了一个简单的解决方案:多边形偏移。它能够调整模型的深度值,以便可以清楚地确定哪个位于前面(或后面)。在Three.js中,可以在材质中修改这三个参数:

    polygonOffset : Boolean 是否使用多边形偏移,默认值为false

    polygonOffsetFactor : Integer 设置多边形偏移系数,默认值为0

    polygonOffsetUnits : Integer 设置多边形偏移单位,默认值为0

当这两个参数都为负时(深度减小),网格将被拉向摄影机(位于前面)。 当两个参数都为正(增加深度)时,网格会被推离摄影机(会落在后面)。

如何设置这两个参数?

对于平行于近裁剪平面和远裁剪平面的多边形,深度斜率为零。对于场景中深度斜率接近零的多边形,只需要一个小的偏移单位即可,可以设置polygonOffsetFactor=0, polygonOffsetUnits=1.0
当面和近平面(near)、远平面(far)有一个明显的角度时,这时候就需要一个较大的偏移量和一个较小但非零的偏移单位(例如0.75或1.0),可能足以生成不同的深度值并消除令人不快的视觉伪像。可以设置如polygonOffsetFactor=0.75, polygonOffsetUnits=4.0
参考:https://sites.google.com/site/threejstuts/home/polygon_offset

图源: https://sites.google.com/site/threejstuts/home/polygon_offset
var mesh1 = new THREE.Mesh(new THREE.BoxGeometry(40, 50, 50),
    new THREE.MeshBasicMaterial({
        color: 0xff0000,
    }));
var mesh0 = new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50),
    new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        polygonOffset: true,
        polygonOffsetFactor: 1.0,
        polygonOffsetUnits: 4.0
    }));
this.scene.add(mesh1);
this.scene.add(mesh0);


注:我在使用过程中,使用这个需要把logarithmicDepthBuffer关闭才有效。

另外,在使用多边形偏移这个方法时,虽然效果显著,但可能会涉及到一个问题:鼠标点击得到的对象数组中第一个,和我们在视图上显示出来的不一样。这个解决办法详见:https://blog.csdn.net/sinat_35823840/article/details/112840465

 

4. 实例化网格模型中,实例之间相交部分闪烁
下图中所有几何体都属于一个InstanceMesh中的实例,他们相交部分当颜色不相同时也会出现闪烁问题

这个我暂时没有发现比较好的解决办法,因为我的场景是只有在点击某个实例之后才会改变他们的颜色,在常态下他们的颜色是相同的;

所以我可以在点击时隐藏了这个实例,单独创建一个与该实例大小位置相同的Mesh,使用多边形偏移的材质,与原本的InstanceMesh有了偏移,视觉上就不会出现闪烁了;

详情可见我的这篇文章:https://blog.csdn.net/sinat_35823840/article/details/112884138

而如果你的实例在常态下就是颜色不尽相同,那么我建议你不要将他们都作为一个InstanceMesh渲来染,InstanceMesh本身就是在材质相同、几何体相同的情况下使用的

 
————————————————
版权声明:本文为CSDN博主「Felicia_1001101」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_35823840/article/details/112800900

标签:多边形,THREE,Fighting,three,实例,偏移,深度,new,js
来源: https://blog.csdn.net/biyusr/article/details/116266937