- 发布文章
Web3D开发学习路线
- 作者
- 作者
- Jack Chen @懒人码农
前言
随着3D技术在Web领域的应用，带来了用户体验质的飞跃。前端作为业务的主力军，3D技术的进步也在不断塑造前端业务新形态。精细的3D仿真模型展示让用户不在现场也能了解产品细节，AR/VR 技术在住房家装乃至医疗诊断的广泛应用，使得虚拟试衣、远程诊断成为我们日常使用的功能。
Web3D简介
正是因为Web图形API的发展，才让我们在Web端就有了操纵图形的能力，才能做出这么多有趣新奇的互动产品。
传统的HTML和CSS可以说是应用最广泛的图形技术了，但是对于复杂图形来说，它维护成本很高，性能开销大。
SVG放大缩小不降低质量，一定程度上弥补了HTML+CSS不足，但它的最小单元是图形，而非像素，细节处理能力不足。
canvas2D就是我们今天所熟知的canvas标签，它调用绘图指令直接在页面上绘制图形，并且表现力深入到了像素级。但到这里还只在二维的世界里，直到2011年发布的WebGL的1.0标准规范。
相对于canvas2D，WebGL不仅仅是只增加了一个z轴，而是更加底层的图形编程技术。WebGL是基于openGL在浏览器实现，利用了GPU并行处理的特性，可以渲染各种复杂的 2D 和 3D 图形。这也让它在处理大量数据展现的时候，性能大大优于之前。
今年我们可能多多少少听说过 WebGPU，它可以看作是下一代 WebGL。WebGL是基于openGL在浏览器中实现。而openGL在GPU届可是一个老古董了，现代GPU硬件技术的飞速进步无法在它身上反应。
简单回顾后我们可以看到，与传统游戏类图形开发相比，Web端更多的是技术栈的不同，图形底端接口和实现技术是相同的。
有了这些图形 API，前端已经具备了操纵图形的能力。可能大家看过《WebGL 编程指南》，翻开第一章发现绘制一个三角形居然要写180多行代码。这说明普通的开发人员直接通过图形库进行开发是非常困难，这时候就需要借助引擎了。就像我们前端会调用的各种库一样，可以把引擎看作一种对于图形的库，它提供各种工具，让图形呈现的更好、效率更高，为上层的开发团队提供了开发平台。
常见引擎
目前市面上流行的引擎可以分为Native端和Web端两大类。
在Native端，Unity是我们比较熟悉的老牌游戏引擎；Cocos 2D-3D主要用于小游戏，可以说是国内2D小游戏的首选；Laya 则主打3D类小游戏。目前微信小游戏的游戏引擎以Laya、Cocos为主。
在Web端比较常见是three.js。它面向前端，最早微信小游戏中的跳一跳就是借助于three.js。但它缺乏应对复杂游戏场景的能力，更接近一个3D渲染框架。2D方面有pixi.js，是一个轻量的渲染框架。
技术栈
Three.js
Three.js是最流行的JavaScript库之一，用于使用WebGL在Web浏览器中创建和动画化3D计算机图形。
A. 优点：
- 易于学习：非常容易上手，同样适合新手
- 大型社区：示例多，用户多，社区丰富
- 好的文档：强大的文档通常是一个强大的库的一个很好的指标，而Three.js具有出色的文档
- 性能优势：出色的性能，能很好地执行复杂的渲染功能
- PBR渲染：具有内置的 PBR 渲染，这使得渲染图形更加准确
B. 不足：
- 不算是游戏引擎：渲染以外的功能很少
- 面向新手：由于API面向新手，因此隐藏了许多高级功能
Babylon.js
Babylon.js是一个强大的、简单的、开放的游戏和渲染引擎。
A. 优点：
- 出色的测试工具：Playground是在进行全面开发之前对事物进行测试的出色工具，并且具有出色的启动文档
- 强大的社区支持：社区活跃和丰富
- 更新迭代频繁：该框架拥有频繁更新的代码库，并且第三方工具正在积极开发中
- PBR 渲染：对PBR渲染的支持非常出色
- 大牌支持：Babylon得到Adobe，Microsoft等大型品牌的使用和支持
- 问题修复：BUG修复很快，问题很快能得到解决
B. 不足：
- 成熟度：2013 年的第一个版本，与许多竞争对手相比，它还算年轻
- 文档：API 文档部分参数字段描述不够清晰
- 规模：不适合较小的项目