WebGL及Threejs学习介绍

一、学习背景及实现的效果
        这十年来Web得到了飞速的发展，随着WebGL的普及，网页的表现能力越来越强大，网页上已经可以开始做出很多复杂的动画、精美的效果；还能通过WebGL在网页中绘制高性能的3d图形。随着浏览器的性能和网络、带宽的大幅度提升，以及WebGL的实现，使得3d的技术不再是桌面程序的专利，越来越多的外部应用使用了3d技术。

        那比如说对于网站而言，Web3d技术的应用实现了企业网站的三维呈现，让企业形象更加直观，更立体的展现给客户，打破传统平面展示的模式。

        目前政府有大量的新基建的项目，如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等，都涉及到了3d的可视化技术。

二、专栏学习步骤
        本专栏主要讲如何系统的学好Web 3D 可视化技术。threejs 是一个让用户通过javascript入手，进入搭建webgl项目的类库。

        学习webgl 需要图形学的知识，而webgl需要通过学习js和glsl两种语言，如果我们不通过threejs直接使用webgl的话，则需要从底层写起来，需要全面的了解着色器的语法，自己需要去编写定点着色等。使用threejs可以快捷的逃过难懂的底层，特别是对于传统的前端及js的从业开发人员来说，直接挑战shader有难度。

学习threejs主要包括以下几点：

1、掌握threejs的基本概念：什么是点、线、面，什么是几何体，什么是材质物体场景相机渲染器，动画和控制器这些基础的概念；

2、搭建一个最基础的场景和3d的物体来进行一个显示

3、调试3d代码，深入上述 的基础概念，通过官网的文档去了解各个属性和概念

4、进行3d效果的渲染效果更加逼真，详细了解什么是pbr（基于物理的光照原理的渲染），需要掌握什么是环境贴图、凹凸贴图、置换贴图，什么是放射光等

5、场景交互，比如选中物体进行移动，主要学习如何掌握物理引擎让物体有真实的物理效果，比如像重力、反弹、摩擦力等物体的相互作用。

6、最后进入webgl的魔力世界，掌握着色技术语言控制，用gpu的方式进行渲染。掌握threejs怎么用底层去封装的webgl。学会webgl使用着色器等。了解整个图形渲染的原理去绘制物体场景。

7、整个场景进行后期的加工，比如打造诡异画面、陈旧感的画面、水底画面等效果。

8、案例学习，比如如何获取建筑数据、生成建筑框架形成逼真的数字城市效果

9、学习blender建模技术，对提供的建筑模型进行压缩、优化等，利用blender制作各种各样的动画效果