描述
我在开发微信小程序AR的时候发现了在苹果IPad上出现屏幕闪烁的问题,而在android和ios手机端正常(可能IOS部分机型也有问题)。并且是基于Three.js开发的。
问题查找
闪烁的情况是一下屏幕变白一下屏幕正常,猜测可能是渲染的问题,于是就找到Three.js的渲染器进行测试,后来发现是因为在renderer.render(scene,camera)前面写了renderer.clear()导致的。而renderer.clear()方法会把帧缓冲区颜色、深度、模板三个缓冲区中数据全部清除。可能ipad和手机端用不同的渲染背景,使用不同的函数调用顺序,微信在处理清除颜色缓存区的时候,调用clear()可能会干扰,从而导致闪烁。通过资料查找得到相关知识点如下:
.clear()方法
执行渲染器.clear()方法会把帧缓冲区颜色、深度、模板三个缓冲区中数据全部清除。
.clearColor()方法
执行渲染器.clearColor()方法清除颜色缓冲区中像素数据
.clearDepth()方法
执行渲染器.clearDepth()方法清除深度缓冲区中片元深度数据
.clearStencil()方法
执行渲染器.clearStencil()方法清除模板缓冲区中模板数据
在删除clear()方法屏幕正常后,我再依次测试了其他三个方法,为了确认是帧缓冲区具体哪一块数据导致的问题。进过测试发现其中只有clearColor()方法会再次发生屏幕闪烁的问题,所以就确认了在微信处理颜色缓冲区的时候被清空干扰了。
解决办法
找到了问题,那么有两个解决办法。一是直接把renderer.clear()删除,二是使用其他方法代替,比如 renderer.clearDepth(),renderer.clearStencil()。