前端如何开发3D网页?(前端如何开发3d网页版)

前端如何开发3D网页?(前端如何开发3d网页版)

前言

不论是电脑桌面应用,还是 Web 应用,想要渲染 3D 模型,都需要显卡的支持。显卡越好,渲染的速度就会越快。质量就会越高。

而桌面应用因为直接跟电脑显卡通信对接,使用操作系统提供的图形语言 GL,再加上代码优化,可以写出高质量,高性能的 3D 应用。但它也有它的缺点,比如开发难度高,需要高水平的 C 开发人员;应用不易扩展,针对不同平台需要不同平台的软件安装包。

而 Web 端渲染 3D 模型是由于浏览器厂商封装了浏览器与显卡的通信规范,暴露出 JavaScript API,供前端开发人员调用,而这个规范就叫 WebGL。通过 WebGL 开发的 Web 程序由于接口的封装性,性能肯定不足桌面端应用的水平,但也有可取之处:比如开发相较而言简单,开发人员上手难度低,很容易培养大量的人员;应用扩展性高,手机、平板、支持现代浏览器的电脑都可以直接通过网址打开。

小结

技术的选择取决于业务需求,业务要求性能第一,首先原生开发;业务要求快速敏捷,肯定选难度最低,出效果最快的。

正如现在移动端开发一样,Android 和 iOS 原生开发效率低,难度大,针对不同平台需要专门的开发人员,所以现在除了重要的应用如微信、支付宝,追逐性能的手机游戏外,都会优先考虑跨平台框架,也就是 H5 技术去开发 App。

Three.js

使用 JavaScript 写纯 WebGL 的代码去操作显卡处理3维数据是很辛苦的,所以一般开发而言都会使用 WebGL 的封装库去开发,封装库的意义就在于开发效率高,上手成本低,性能也能满足大部分业务的需求。Three.js 是一款比较成熟的 JavaScript 3D库,适用于各种3D 场景,采用 MIT 许可证开源,GitHub Star 也有 7万多。Three.js 和 WebGL 的关系就很像 JQuery 和 JavaScript。

AutoDesk Forge

Forge 是 Autodesk 公司推出的一款开发 Web 端 3D 应用的云平台,它拥有模型格式云端转换,使用 Revit 开发的 模型可以很方便地通过它转换,再使用 Forge 提供的 JavaScript 封装库,可以很轻松地在网页上渲染,而且提供了很多常用的工具。

它底层封装了 Three.js 的 API。所以它属于业务层的封装库。

缺点是:它的服务器在美国,上传的模型文件都是上传到美国的服务器,虽说官网强调不会侵犯用户的数据隐私,但谁能保证呢。数据服务访问速度不快,渲染速度还行。

BIMFACE

BIMFACE 是一款国产的云平台,拥有跟 Forge 一样的能力,而且针对国内常见的需求,提供了快捷服务,可以很方便地集成进自己的项目。缺点也有:二次封装的库都会存在一定的性能问题,因为加了一层封装就意味着加了一层代码,而 JavaScript 引擎就会多执行一层代码,会影响执行效率;扩展性差,针对业务的封装库都是这样,后期如果有新的业务,或者老业务上新的功能,封装库一般不会提供现成的解决方案,这时候就需要深入研究它的 API 甚至源码。这样的话上手成本就会高了很多。所以这种基于业务的封装库适用于短期高效开发,业务不复杂的场景。

拓展

还有一种开发 Web 端 3D 应用的方式,如 虚幻引擎4就有将项目通过打包成 WebAssembly 格式,从而开发 3D 游戏或应用网页。优点是性能上超过使用上述办法开发的 3D Web 应用,性能高的原因就是 WebAssembly 格式可以充分发挥浏览器端 JavaScript 引擎的执行效率,使其接近操作系统原生应用的效率。而上述方法其实也可以打包成 WebAssembly 格式从而达到性能优化,只不过需要学习和时间成本。

这种方式也有它的缺点:UE4 的项目打包成 Web 应用这种方式,存在的意义就是扩展应用的使用范围而已,因为它开发完成之后就已经可以作为桌命端应用交付使用了,它的开发周期和成本还是受到桌面端开发的限制。

总结

其实不同的库都有优缺点,但都有可取之处,归根究底还是靠业务来选型。如果业务大场景、重交互、需要优质体验,首选游戏引擎原生开发;如果业务简单,需要拓展 Web 平台,使用 Three.js 和其他封装库的意义就存在。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年5月17日 下午2:24
下一篇 2023年5月17日 下午2:40

相关推荐