微信小程序中提供了一个实现简单照片AR的示例,直接使用文档提供的很简洁的代码就能实现简单的照片AR效果
大概意思是创建了一个图片Marker,然后如果识别到这个图片,就把指定的视频投射到这个Marker上去(其实是创建了一个mesh,然后mesh的材质设置为视频,识别到Marker就把这个mesh盖到Marker上去)
但是这个代码是比较粗糙的,如果按照示例代码,我们发现视频不会很好的贴合到图片上,图片上部和下部会有一些地方覆盖不到
并且,如果我换一张和示例张片不同比例的照片,效果会更差
猜测可能是底层代码里面对于视频的大小渲染写死了,因此好像没办法来改动渲染视频的大小,让它来和Marker贴合,但是别忘了前面说过视频是通过作为mesh的材质,再将mesh盖到图片上。因此我们虽然动不了渲染视频的大小,但是我们可以改动mesh的大小
这时又有一个新的问题,mesh是通过scale(scale可以控制mesh在空间中xyz三个方向的比例,比如设置mesh的scale为2 2 2,那么mesh就会被放大为两倍)来改变大小的,而不是width和height参数,但是我们仔细观察示例代码的ar效果,发现渲染视频是一个类似正方形的,可以大胆猜测底层代码对于视频的渲染部分,应该是视频宽度设置为图片的宽度,然后高度和宽度一样,因此我们可以在组件渲染完成的时候(也可以换成别的周期),获取图片的高宽比例,然后调整mesh的scale,这样视频就能基本贴合Marker图片了
放一下最后的效果,用的Marker图片和上面的效果图中的Marker是一样的,可以看到修改前图片上部和下部有很大部分没覆盖到,但是修改scale后,视频就能基本贴合Marker图片了