近半年来团队来了不少小伙伴，大多在Web3D渲染领域并没有什么经验，再加上也有其他朋友表示对3D渲染感兴趣，所以梳理梳理这几年来自己的学习历程，给大家一个入门资料的集锦～
如果你是项目上需要快速搭建一个有3D元素的活动页，或者是想先小试牛刀看看自己对这个领域是否感兴趣，那可以跳过【计算机图形学】，直接到【渲染引擎】的Three.js部分，Three的功能比较完善，接口设计也比较简单易懂，在不用了解底层原理的情况下也可以快速上手做项目。
如果你是做渲染这方面的工作，需要在这个领域持续深入研究的话，那我非常建议你从【计算机图形学】开始学习，或者在WebGL入门之后能再补一下课，能帮助你把很多问题想透彻。
计算机图形学
GAMES101-现代计算机图形学入门
类型：在线课程
推荐度：🌟🌟🌟🌟🌟
GAMES101是我最喜欢的课程没有之一，是GAMES（计算机图形学与混合现实研讨会）推出的系列在线课程之首，授课的闫令琪老师是UCSB的助理教授，图形学大佬，各种成就数不过来的那种，不光专业知识过硬，而且讲起课来生动有趣，听他讲课是能跟上他的逻辑的，能全程跟下来保证你受益匪浅。（刚发现闫老师也是清华校友，而且是2013年毕业的，也就比我大两岁，可太牛了，不能望其项背）
在这门课里你可以学习到，也是你必须熟练掌握的是
- 数学基础知识：向量和矩阵、二三维图形变换、三大基础空间和空间之间的坐标转换（模型、视图、投影矩阵）
- 光栅化：显示器和片元、深度测试、走样和反走样，光栅化是连接几何和着色的重要桥梁，也是图形管线的核心部分
- 着色：光照基本模型、纹理映射，这部分是在片元着色中常用到的光照计算和贴纹理图的基本原理
几何部分用不怎么上。光线追踪这部分我个人认为目前阶段看看就行，并不需要完全理解。
补充一句：GAMES是一个国内的图形学、虚拟现实学习研究平台，除了图形学还有几何建模、物理引擎等等课程，都是业内大佬中文授课，不用担心听不懂。闫老师今年还推出了202课程，主讲高质量实时渲染技术，进阶也靠他了！
渲染引擎
以下按封装度从低到高来介绍Web3D渲染中我比较推荐的几个API以及它们的学习资料。
希望你先从WebGL开始，这部分并不是说你需要去跟查字典一样学习WebGL API，而是要了解WebGL的工作原理，其实也就是了解OpenGL的工作原理。虽然OpenGL已经迈入暮年，新一批的现代图形API（Vulkan/Metal/DirectX）已经得到了广泛应用，但在WebGPU正式推出以及被各个浏览器广泛支持之前，我们别无选择。
WebGL 理论基础
类型：在线文档
推荐度：🌟🌟🌟🌟
非常推荐的一个系列，分为WebGL1和WebGL2两个版本。这个系列的内容比较全面，从基础知识到常见应用技术都有涉及，最关键的是文档中内嵌了很多demo，可以实时编码体验，作为前期学习资料非常不错。
LearnOpenGL
类型：在线文档
推荐度：🌟🌟🌟🌟🌟
是我最常查阅和反复学习的文档之一。和上面的WebGL理论基础有一些内容上的交叉，相对来说讲得更深入细致一些，但一些技术实现和示例代码都是基于OpenGL的，直接从这个入手会有一些误差。所以比较推荐用这个进行一些知识补充。而且在进阶内容上这个讲得比较成体系，推荐的章节有：光照、高级OpenGL、高级光照。虽然带了“高级”，但也是常用的技术哦，并不那么复杂。
WebGL编程指南
类型：纸质书籍
推荐度：🌟🌟
偶尔查一下接口的用法，前期会用，后期吃灰。内容上有不少错误。不建议作为教程直接啃这本书，作为工具书还可以。
各类封装库的官方指南和文档
类型：在线文档
推荐度：🌟🌟🌟🌟
在了解了WebGL的工作原理之后再去看API就不会那么生涩难懂了。但原生API使用起来还是非常麻烦的，所以一般都会做一些上层封装，有能力的团队或许会自己做封装，也可以用一些成熟的封装库。建议按自己的需求来选择封装库。
除了Three这种广泛应用的API会衍生出各种学习网站、博客，其他API还是建议跟着他家的官方网站来进行学习。一般先看使用指南、功能示例再看参考手册，使用指南让你了解他家API的设计理念和核心概念，示例让你能直观了解到他家API能干什么事情、干起来难不难，而参考手册是API使用过程中进行查阅的字典，你需要用到什么再查什么。
| WebGL封装库 | 简介 | 适用项目 |
|---|---|---|
| TWGL.js | 最轻量级的封装，简化原生API调用复杂度，没有抽象概念 | WebGL学习实践、完全定制化的开发 |
| luma.gl | 轻量级封装，是Uber为自家数据可视化API做的底层库，引入了一些抽象概念，比如Model/Geometry，以及更丰富的工具库 | 较定制化的开发，不关心底层接口，在材质库、光照、特效上有自己独特的需求或没有需求 |
| Three.js | 重量级封装，提供不需要学习WebGL原理就能理解的抽象概念，比如Camera/Scene/Material/Geometry，有完善的材质库、几何库、后处理库、数据解析库 | 快速上手出成果，依赖美术对模型、材质、光影特效有较多需求的项目，有一定定制化需求的项目 |
| Babylon.js | 面向游戏的重量级封装，提供不需要学习WebGL原理就能理解的抽象概念，以及游戏领域的常见概念，有完善的材质库、几何库、后处理库、数据解析库 | 快速上手出成果，依赖美术的项目，对模型、材质、光影特效有较多需求的项目 |
Three.js零基础入门教程
类型：在线文档
推荐度：🌟🌟🌟
比较完善的Three入门教程，对于想直接上手快速出项目的同学可以看看这个，而那些从图形学、OpenGL学起到现在的就大可不必了，这时候的你要想用Three的话已经可以直接阅读它的源码而不用再借助其他资料了。
