带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(10) https://developer.aliyun.com/article/1243469?groupCode=taobaotech
这是在 3D 图形处理中与图像处理领域的 Lena 图齐名的斯坦福兔子。随着三角形数量的增加,它的表面将会越来越平滑。
物体有两个基础的属性,一个是形状(Geometry),另一个是材质(Material)。通俗来说,Geometry 就好像是骨架,材质则类似于皮肤。
1.形状(Geometry)在程序中是通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。有立方体、平面、球体、圆形、圆柱、圆台等许多基本形状。也可以通过自己定义每个点的位置来构造形
状;
2.材质(Material) 是物体表面除了形状以为所有可视属性的集合,例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。
基于 Three.js 实现全景渲染
在 Web 上实现 3D 的渲染,通常使用到 WebGL 技术。WebGL 是一个JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形。
但 WebGL 门槛相对较高,需要相对较多的图形学和数学知识。而 Three.js 则对 WebGL 提供的接口进行了非常好的封装,掩盖了 3D 渲染的细节,大大降低了学习成本,并且几乎没有损失 WebGL 的灵活性。因此我们选择了Three.js 来实现全景视频的渲染。
EAC 全景图片渲染
我们知道,视频是由一张张图像组成的动态画面。因此需要渲染视频,可以先从渲染一张全景照片开始。
前面讲到过,全景视频的投影方式有 ERP 和 EAC 两种,其中 EAC 的的渲染相对易于实现和理解。因此我们从 EAC 投影方式开始实现。EAC 投影的全景图片如下:
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(12) https://developer.aliyun.com/article/1243467?groupCode=taobaotech