微信小程序AR屏幕闪烁

1. 描述

我在开发微信小程序AR的时候发现了在苹果IPad上出现屏幕闪烁的问题，而在android和ios手机端正常(可能IOS部分机型也有问题)。并且是基于Three.js开发的。

2. 问题查找

闪烁的情况是一下屏幕变白一下屏幕正常，猜测可能是渲染的问题，于是就找到Three.js的渲染器进行测试，后来发现是因为在renderer.render(scene,camera)前面写了renderer.clear()导致的。而renderer.clear()方法会把帧缓冲区颜色、深度、模板三个缓冲区中数据全部清除。可能ipad和手机端用不同的渲染背景，使用不同的函数调用顺序，微信在处理清除颜色缓存区的时候，调用clear()可能会干扰，从而导致闪烁。通过资料查找得到相关知识点如下：

.clear()方法

执行渲染器.clear()方法会把帧缓冲区颜色、深度、模板三个缓冲区中数据全部清除。

.clearColor()方法

执行渲染器.clearColor()方法清除颜色缓冲区中像素数据

.clearDepth()方法

执行渲染器.clearDepth()方法清除深度缓冲区中片元深度数据

.clearStencil()方法

执行渲染器.clearStencil()方法清除模板缓冲区中模板数据

在删除clear()方法屏幕正常后，我再依次测试了其他三个方法，为了确认是帧缓冲区具体哪一块数据导致的问题。进过测试发现其中只有clearColor()方法会再次发生屏幕闪烁的问题，所以就确认了在微信处理颜色缓冲区的时候被清空干扰了。

3. 解决办法

找到了问题，那么有两个解决办法。一是直接把renderer.clear()删除，二是使用其他方法代替，比如 renderer.clearDepth()，renderer.clearStencil()。