一 前言
车展作为车市的风向标,代表着汽车发展的趋势,也是厂商展示自己、推广自己的舞台。WebGL作为一种新兴的技术,为Web端提供了交互式三维动画新体验,汽车之家的网上车展就是两者结合之后的一种新的产品形态。
到目前为止,汽车之家车展总共经历了五年的风雨发展,历经三大阶段,它们分别是全景实拍车展、步进式全景实拍车展和纯3D虚拟车展。
全景实拍车展:线下车展现场实拍全景图,以此为主要素材构建而成的线上车展。
步进式全景实拍车展:使用专业设备实地拍摄线下车展全景图,同时采集空间信息,实现全景场景的平滑切换,就像镜头在行走,这也是步进式这个名称在之家的由来。
纯3D虚拟车展:在Web端实现了展馆和汽车模型的加载展示,真正实现了第一人称逛展看车,源于现实而又超越现实,保证性能的同时尽可能的呈现高质量视觉效。
每一次的车展迭代更新都对业务有的极大的推进,而这背后都是WebGL技术不断成熟和生态的不断完整所造就的。
二 WebGL介绍
2.1 WebGL引擎现状
WebGL是近些年出现的一种3D绘图协议,这种绘图技术通过增加OpenGL ES 2.0的一个JavaScript绑定,为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里运行3D应用。随着移动互联网的崛起和发展,Web业务也随之拓展,有时需要在网页/H5/小程序中渲染3D模型,WebGL就有了用武之地。
WebGL引擎使用JavaScript语言编程,学习成本低,容易入门,发布部署方便灵活且无需安装下载, 但国内没有比较成熟的WebGL开发者生态,可使用的插件很少;因为是基于Web浏览器生态,可以非常方便的以外链方式对外进行社区裂变传播,同时引擎能力满足简单的3D需求,常见的WebGL引擎有three.js、BabylonJS和PlayCanvas等,它们都是最近几年才出现,积累相对于传统的虚幻(UE)或者Unity引擎要少很多。
2.2 WebGL的优点
跨平台:WebGL是H5标准之一,具有统一的、标准的、跨平台的OpenGL接口实现,通过JavaScript脚本实现了Web端的3D应用制作,无需任何浏览器插件支持,是浏览器级别的一次开发多处应用;
易传播:WebGL基于Web浏览器生态,基于它开发的应用可以像普通网页一样非常方便的以外链方式对外进行社区裂变传播;
入门难度低:如上所述,WebGL的开发语言是JavaScript,上手速度快,发布部署方便灵活且无需安装下载;
2.3 WebGL的缺点
图形绘制接口实现不完整:WebGL