深度学习让照片动起来

December 7, 2018 Facebook最近推出了“3D照片”功能,让普通的照片能有3D显示效果:可以随着手机姿态的变化显示照片的不同视角,打开链接即可体验 (手机上陀螺仪控制,PC上鼠标控制) 可以看到虽然视角变化被限制在较小的范围,但是确实有3D的感觉,其实这样结合陀螺仪的简单3D效果也挺常见的,比如王者荣耀的启动界面: 晃动手机,前后景会随着手机姿态位移变化;一些H5页面也有这种效果,实现就更简单了,前后景两张或多张图片层叠,根据陀螺仪数据改变图片相对位置即可 可以看出,产生3D效果的关键在于z轴,即深度(depth),当图层或像素的深度有差别时,就可以在不同视角下计算出图层或像素新的位置,渲染出当前视角对应的图像。我们把每个像素的深度值记录下来,就可以产生与原图同尺寸的“深度图”(Depth Map) 如上左右分别是原图和深度图(实际上是视差图,这里先简单看做深度),用灰度值的差异来表现深度的差异,当然灰度值0~255精度有限,也可以采用彩色的方式。 实时渲染 我们先探讨在已有深度图的情况下,如何实现Facebook 3D照片的效果,即实时地响应陀螺仪或鼠标事件,渲染出不同视角的图像。如前文所述,视角变化需要限制在较小的范围,才能达到可接受的效果,因为我们的输入只有一张图片,缺少原始信息,比如物体的背面(当然用深度学习也是能猜一些出来的)。假设我们的视线沿x轴相对中心点移动d,我们可以粗略地计算像素点的移动D: D = d * depth * s 其中depth为该像素的深度值,s是一个固定的比例因子,这样来看,就非常适合使用shader来实现,实现简单,又能满足实时的效果。 varying vec2 v_texCoord; uniform sampler2D u_diffuseTexture; // 输入照片 uniform sampler2D u_depthTexture; // 深度图 uniform vec2 u_offset; // 视角偏移 void main(void) { float scale = 0.05; float focus = 0.5; // 相对中心点 float map =Continue reading “深度学习让照片动起来”