微信小程序AR屏幕闪烁

  1. 描述

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

  1. 问题查找

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

.clear()方法

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

.clearColor()方法

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

.clearDepth()方法

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

.clearStencil()方法

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

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

  1. 解决办法

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

猜你喜欢

转载自blog.csdn.net/qq_26540577/article/details/129436565