如何学习 WebGL 和 Three.js

当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能，也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚WebGL和Three.js是什么，个人建议是不要做过多思考，先看看相关的具体技术教程，随着时间的推移你自然会明白Canvas、WebGl、Three.js等关键词指什么。

要不要学习WebGl？

Three.js是基于原生WebGl API和着色器封装得到的3D引擎，也就是一个.js库。通过原生WebGL直接编写程序，会比较麻烦，一般开发项目直接使用Three.js引擎。简单的项目一般也用不到底层WebGL知识，不过学习WebGl有助于深入理解Three.js，如果使用Three.js开发项目需要自定义着色器的时候，肯定也是要学习底层WebGL和着色器GLSL知识。

总而言之，如果你想成为Web3D应用开发的大牛，学习WebGL肯定是必须的。

WebGL和Three.js学习顺序？

如果你急于要实现一个Web3D功能，时间有限，也没有图形学基础，个人建议直接学习先Three.js即可，以后想深入掌握，可以学习原生WebGL和图形学相关知识。

如果时间比较充足，又希望有更大的成长空间，学习底层原生WebGL肯定是必要的，可以WebGL和Threejs结合着学习，顺序也不是非常重要。

如何学习WebGL

刚开始入门的时候，主要是理解GPU渲染管线的渲染流程，WebGl代码是如何执行的。 有一定基础后，可以选择一些图形学的书籍，深入学习图形学相关的算法。

如何学习Three.js

如果喜欢阅读可以选择电子书或纸质书，如果喜欢视频，也可以选择视频教程。纸质书翻阅比较方便，电子书翻阅、查询、复制代码更为方便，视频讲解更直观、对新手更友好。

如果选择书籍《Three.js开发指南》，书的案例源码使用的是几年前的Three.js版本，注意使用新版本Three.js开发项目的时候，不要随意复制书中的源码，以免不必要的报错。

如果有一定的WebGl基础，可以尝试阅览Three.js-master文件src目录下的源码，这样可以深入理解Three.js，Three.js是如何封装WebGL API和着色器代码的。

前端工程师

如果你是前端工程师，突然接触到Web3D应用开发，对于你来说，前端的生态肯定是非常熟悉了，如果不了解WebGL和3D应用开发这一块，这种情况下，需要学习的自然是底层WebGL知识和Three.js基础知识，还有实战中不同Web3D应用项目，如何去开发，程序员和3D美术之间又应该如何配合，需要去学习实战项目的开发流程。

没有编程基础

如果你首次接触WebGL或Three.js，没有任何编程基础，只要学习能力强，学习是没有问题的，很多时候学习能力比你的基础更为重要。

没有编程基础首先要做的是建立编程的感觉，WebGL开发使用的是JavaScript语言，自然需要找一些基础的JavaScript语言教程学习一下，然后简单补充下HTML和CSS知识，再去学习Three.js课程。

有编程基础-不了解前端

部分初学者，有编程基础，但是不了解前端，这种情况下你肯定首先需要补充的是HTML、CSS、JavaScript等前端知识，然后在学习Threejs和WebGL。刚开始学习Threejs和WebGL对前端要求不高，稍微有点基础即可，但是如果是为了开发项目，对前端的要求和普通前端一样，需要掌握JavaScript、HTML、CSS、http、vuejs、nodejs等知识。

OpenGL基础

如果你有OpenGL基础，学习WebGL基本没有什么障碍，着色器语言、WebGL API和GPU渲染管线的原理你肯定是非常了解的，这种情况下，补充点前端知识即可。相比大多数初学者，你的基础更定是很深厚的，学习WebGL，不过是换个生态环境罢了，需要打交道对象变成了浏览器。

unity3D或UE4

如果你使用过unity3D或UE4，因为项目需要，需要切换为Three.js，相比较大多数初学者，你是不缺少3D应用开发经验的，对3D应用开发流程比普通前端肯定是非常熟悉的，你学习的时候，自然不需要像普通前端一样，需要学习3D应用的开发流程，程序和美术是如何配合工作的，这种情况下，你需要学习的自然是先补充前端知识，然后熟悉Three.js细节即可，学习能力比较强的话，直接查看Three.js文档也可以。