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 “深度学习让照片动起来”