深度缓冲区
在three中,使用深度缓冲区(z-buffer)实现场景的可见性计算,大概就是一个二维数组,每个元素存放的是一个像素点。而每个元素也就是像素点可以使用不同的数据类型来存储,数据类型的精度越高,产生深度冲突的可能性就越低。
默认情况下,Three.js可能使用16-bit或24-bit深度缓冲。
如果要渲染的大深度范围的场景,可以将webgl中的LogarithmicDepthBuffer属性设置为true,这是一个特殊的深度缓冲扩展,使用更高的精度来缓冲像素。
闪烁产生原因
在深度缓冲区中当两个模型的同一个像素点的渲染结果对应到一个相同的位深时,渲染器就不知道用哪个了,这个时候就会出现闪烁。
解决办法
1:提高缓冲区 精度,LogarithmicDepthBuffer设为true
2:将模型之间的距离调大一点
3:手动设置渲染顺序,three的object3d基类有一个renderorder属性,可以手动设置渲染的顺序
4:设置多边形偏移,当两个面深度相同时,设置了偏移的面会自动向前或者向后便宜一点,three的material类有三个属性用于设置多边形偏移
- polygonOffset 是否开启多边形偏移
- polygonOffsetFactor 多边形偏移因子
- polygonOffsetUnits 多边形偏移单位