美文网首页
如何解决THREEJS物体重叠问题(物体闪烁问题)

如何解决THREEJS物体重叠问题(物体闪烁问题)

作者: 心淡然如水 | 来源:发表于2019-07-19 09:01 被阅读0次

Three在使用绘制墙面得时候发现里面得物体从墙外面溢出重合了,如图:

要解决这个问题我们需要了解什么是Z-Buffer、Z-Fighting

Z-Buffer

在threejs中,使用深度缓冲(Z-Buffer)来完成场景可见性计算,即确定场景哪部分可见,哪部分不可见。深度缓冲(Z-Buffer)是一个二维数组,其中的每一个元素对应屏幕上的一个像素,如果场景中的两个模型在同一个像素生成渲染结果,那么图形处理卡就会比较二者的深度,并且保留距离观察者较近的物体在该像素点的渲染结果,这样就形成了近的模型遮挡远的模型的结果。

上面说到,深度缓冲(Z-Buffer)是一个二维数组,但是数组的元素类型却可以不同,不同的元素类型代表着不同的精度。这和颜色的精度很像,比如GIF图像最多用8bit保存一个颜色,也即GIF最多支持256种色彩。以此类推,如果深度缓冲的也用8bit来保存一个像素的深度,那就是说该深度缓存只有256个深度级别。在threejs中只实现了一种深度缓冲,但是在例子中,又实现了一个精度更高的深度缓冲——logarithmicdepthbuffer,可以看示例webgl_camera_logarithmicdepthbuffer

Z-Fighting

当场景中的两个模型在同一个像素生成的渲染结果对应到一个相同的深度值时,渲染器就不知道该使用哪个模型的渲染结果了,或者说,不知道哪个面在前,哪个面在后,于是便开始“胡作非为”,这次让这个面在前面,下次让那个面在前面,于是模型的重叠部位便不停的闪烁起来。这便是Z-Fighting问题。

解决 Z-Fighting

要解决Z-Fighting问题,有两个思路:

1、让各模型渲染结果不要在同一个像素出现相同深度值

2、人为设置渲染顺序,这样即使出现相同深度值,也能正确渲染

这里说一下第二种方法为什么也能解决Z-Fighting,比如有两个模型A和B,A的渲染顺序是0,B的渲染顺序是1,既是先渲染A,再渲染B,所以,如果A和B在某个地方出现了相同的深度值,那么后渲染的B会覆盖掉先渲染的A。下面是按照这两个思路提出的一些解决办法。

3、设置合适的near和far值

在创建相机的时候,会有near和far两个参数,用来设置相机的近平面和远平面。这个两个参数其实和深度缓冲(Z-Buffer)也密切相关,深度缓冲其实是非线性的,靠近相机的地方精度更高。什么意思呢?假如你的深度缓冲只有10个深度级别,你的相机的near=1,far=100,那么你的深度缓冲可能是这样的:

4、使用 logarithmicDepthBuffer 缓冲(这个最简单了)

缓冲的级别越多,冲突的概率相应的也就越低,所以,我们可以使用一个精度更高的z缓冲,来代替原有的Z缓冲。对于这个方法,threejs官网已经提供了一个例子webgl_camera_logarithmicdepthbuffer。不过,官网的例子为了演示效果,写得比较复杂,实际上只需要将logarithmicDepthBuffer参数设为true即可:

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


参考文档

1、解释如什么是z-fighting及何用polygon offset

Z fighting & polygon offset

2、讲到了near far 设置的问题

(1)Three.js/WebGL: Large spheres appear broken at intersection

(2)Z-Fighting

3、解释了depth write的使用

How to use polygonOffset solving Z-fighting poblems

4、讲到了解决透明问题的方法,比较全面

Transparent objects in Threejs

相关文章

  • 如何解决THREEJS物体重叠问题(物体闪烁问题)

    Three在使用绘制墙面得时候发现里面得物体从墙外面溢出重合了,如图: 要解决这个问题我们需要了解什么是Z-Buf...

  • threejs - 4 - 物体

    :) 简介 在三维空间中的物体是由点、线、面组成的 点: 三维空间中的一个点(包含x , y ,z) 线:两个点就...

  • 重叠的物体

    作业是画两个重叠的网球,我就用两个鸡蛋代替了

  • 从0开始的OpenGL学习(七)-转换

    本章主要解决这个问题: 如何对物体进行位置变换? 想要操作物体的位置,我们就要使用数学工具对其位置进行计算。先来看...

  • Unity物体自转中心轴有误解决方法

    问题: 想要使物体随自己的中心轴自转,但是发现物体的pivot在物体外部,无法达成自转的效果。 解决方法: htt...

  • 背包问题

    0-1背包问题 问题 n个物体,它们各自有重量和价值,给定一个有容量的背包,如何让背包里装入的物体价值总和最大? ...

  • unity 笔记

    unity 问题及解决方法 常用快捷键 Tool 定位游戏物体 方法【1】直接在左侧面板双击游戏物体方法【2】在左...

  • 小白学画画(四)

    重叠的球体 阴影的调和还是掌握不来。 物体画的较大,表示物体看上去较近。 物体画的较小,表示物体看上去较远。 把一...

  • 寒假试卷(一)的易错题分析

    一、单项选择题 第4题是涉及两个物体的静态平衡问题,解决这些问题的基本方法就是对各个物体进行受力分析,当然这题是从...

  • OpenCV with Python Blueprints读书笔

    MeanShift: 如果仅仅使用特征检测来跟踪物体会丢失对应物体的信息。为了解决对应性问题,我们可以使用之前学过...

网友评论

      本文标题:如何解决THREEJS物体重叠问题(物体闪烁问题)

      本文链接:https://www.haomeiwen.com/subject/inwdlctx.html