three中模型材质闪烁问题
模型材质闪烁问题 Z-Fighting
主要原因分析:
一、可能模型有重叠面,或着跟其他模型离的太近。
有些模型在建模时处理不慎,会导致在几乎重叠的位置有多个面。渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight
二、材质过于锐利。(可能是因为没有开启纹理过滤,或者关闭了MipMap)
由于绘制像素屏幕坐标与纹理采样uv之间的比率(偏导数)很大,导致相邻屏幕像素采样的纹理颜色跳跃很大,看起来材质上面出现了锐利的条纹和光点,尤其是摄像机或者模型移动的时候,模型表面材质闪烁严重
three中加载模型遇到闪烁严重的问题,相机拉得越远模型闪烁越厉害,出现此问题的原因是因为出现了深度问题,以下记录解决办法
解决方法:
一、WebGLRenderer开启logarithmicDepthBuffer
logarithmicDepthBuffer 的定义:
logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用。 默 认是false。
1 | renderer.logarithmicDepthBuffer = true ; |
二、强制设置相机的渲染范围,越小越好
三、将加载的模型等比例的缩小
四、对模型的材质进行偏移
五、使用对数深度缓存(如果要在单个场景中处理巨大的比例差异,就有必要使用, 默认是false。 使用了会带来额外的开销, 但是效果会变好)
1 2 3 4 | renderer = new THREE.WebGLRnderer({ antialias: true , logarithmicDepthBuffer: true }) |
如果有不理解的,请加qq群讨论:854184700
分类:
threeJS项目中出现的问题
标签:
相关学习群910316886
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!