WebGL系列教程一（开篇）

目录

1 前言2 推荐的书籍和网站3 WebGL简介4 本教程包含的主要内容预览4.1 顶点着色器4.2 片元着色器4.3 绘制点线面4.4 绘制三角形和四边形4.5 缓冲区4.6 旋转、平移、缩放4.7 动画4.8 颜色和纹理4.9 GLSL语法4.10 模型变换、视图变换、投影变换4.11 光照4.12 层次模型4.13 鼠标交互4.14 HUD(平行显示)4.15 雾化4.16 透明与半透明4.17 帧缓冲4.18 阴影4.19 obj模型加载4.20 自定义类型
5 总结

1 前言

  现在三维GIS开发可谓是十分火爆了，尤其是以Cesium为首的三维GIS框架，基本是各个三维GIS开发岗位必须要求掌握的技能。然而当我们需要在Cesium中做出一些很炫酷的功能，或者需要修改Cesium的源码以提高性能时，我们会发现需要大量的WebGL的知识，尤其需要会写GLSL(OpenGL Shading Language)，而这对于一个未完全掌握计算机图形学知识和WebGL的giser来说，是比较困难的。作者在学习WebGL的过程中就是这样的一个过程。因此作者决定新开一个系列，讲一讲自己是如何学习WebGL的，过程中也会穿插着讲一些计算机图形学、线性代数的知识，以方便后来的giser学习。

2 推荐的书籍和网站

  在我学习WebGL的过程中，我曾尝试着去找一些比较系统的教程，然而并不尽如人意。很多教程都是分散的，不成体系的。有两个网站还行，一个是MDN，一个是webglfundamental。MDN讲的很乱，没有一个简单明了的思路，当成api文档去看，查查某个类有哪些方法、成员变量还行，用来当入门教程很不合适。webglfundamental倒是好一点，有比较好的思路，也能看到代码实时运行时的效果，但是我觉的跳跃性稍微有点高。当网络上找不到比较好的教程时，我又开始找有没有相关的书籍，十分庆幸找到了《WebGL编程指南》。这本书在我看来讲的非常棒，由浅入深，层层细化，非常适合作为基础入门。本教程中的很多内容也都是参考该书来的。这本书在网上就能下到pdf和代码，如果有哪些同学找不到的，可以在公众号里私信我。

  计算机图形学课程最值得推荐的是B站闫令琪博士的现代计算机图形学入门课程，讲的非常棒，我刷过两遍。对我学习WebGL有很大的帮助，感谢闫博士，那视屏是能免费观看的，因为讲的太好了，因此都有高校老师直接对学生说，听了闫令琪博士的课，就可以不用听他的课了。再次给闫博士点赞，太强了。

3 WebGL简介

  WebGL（Web Graphics Library）是从OpenGL的一个特殊版本OpenGL ES版本派生出来的，主要用于浏览器、嵌入式设备、智能手机、家用游戏机等设备上的三维图形开发。WebGL是在OpenGL的基础上，移除了一些很少用到的功能，保持了一个轻量级的同时，仍然具有渲染精美三维图形的能力。WebGL是在OpenGL ES2.0的基础上发展而来的。

4 本教程包含的主要内容预览

4.1 顶点着色器

4.2 片元着色器

4.3 绘制点线面

4.4 绘制三角形和四边形

4.5 缓冲区

4.6 旋转、平移、缩放

4.7 动画

4.8 颜色和纹理

4.9 GLSL语法

4.10 模型变换、视图变换、投影变换

4.11 光照

4.12 层次模型

4.13 鼠标交互

4.14 HUD(平行显示)

4.15 雾化

4.16 透明与半透明

4.17 帧缓冲

4.18 阴影

4.19 obj模型加载

4.20 自定义类型

5 总结

  根据作者的个人经验，只要了解了一个立方体是怎么绘制出来的，如何进行贴图，如何进行立方体的旋转、平移、缩放，基本就能搞懂了WebGL/OpenGL是在干什么以及是怎么做到的了。本篇博文是开篇，我们就只进行简单的介绍，下一篇开始进入实战。回见~