【WebGL】WebGL概述
发表于2018-05-02
本系列学习主要参考《WebGL编程指南》一书，希望通过这一系列的学习能够让大家了解WebGL。并且在了解WebGL之后能够更好的学习OpenGL其他的知识。
概述
什么是WebGL
WebGL — 是一项用来在网页上绘制和渲染三维图形以及允许用户与之进行交互的技术。WebGL结合了HTML5和JavaScript，允许开发者在网页上创建和渲染三维图形。
ps：听上去就很屌，假设我们是一名web前端开发者HTML5和JS应该是再熟悉不过的了。
WebGL是内嵌在浏览器中的。也可以说WebGL是基于浏览器的。也可以说WebGL是跨平台的(只要你的浏览器支持它)。
WebGL的优势
最初，HTML仅仅是静态的内容。后来引入了JavaScript之后，HTML开始提供一些动态的内容，并且具有一定的交互性。现在出现了更强大的HTML5，它可以使用<canvas>标签来绘制二维图形，以呈现更丰富的内容。例如：跳动的小人。
WebGL则更强大：它允许JavaScript在网页上显示和操作三维图形。例如：开发三维的用户界面，运行三维的网络游戏等。
WebGL开发环境搭建
说到开发环境搭建，对于挺多人来说是一件非常头疼的事情。但是！但是！但是！WebGL几乎不需要搭建开发环境！因为之前说过，WebGL是内嵌在浏览器中的，所以我们只需要准备一个支持WebGL的浏览器 + 一个文本编辑器(这里我使用Sublime)。
WebGL的起源
上面我们大概了解到了WebGL是什么以及开发环境。现在来看看WebGL要到要从哪里开始追溯。
我们知道PC上使用最广泛的两种三维图形渲染技术是Direct3D(微软平台的)和OpenGL(多平台的)。这里对于Direct3D和OpenGL不做太多的累赘描述(因为其实我也不是很了解，O(∩_∩)O)。
WebGL实际上是从OpenGL的一个特殊版本 — OpenGL ES中派生出来的。
OpenGL ES专用于嵌入式计算机、智能手机、家用游戏机等设备。OpenGL ES移除了OpenGL中许多陈旧无用的新特性，并且增加了新特性。这使得OpenGL ES保持了轻量级的同时，还有足够的能力渲染出精美的三维图形。
下图显示了OpenGL、OpenGL ES 1.1/2.0/3.0和WebGL的关系：
从上图中可以看出：在OpenGL2.0开始OpenGL支持了一项非常重要的特性：可编程着色器。它被OpenGL ES 2.0继承，并且成为了WebGL 1.0标准的核心。
关于可编程着色器，以及着色器语言等后面再来介绍。现在只需要知道在OpenGL的着色器语言被称为GLSL。OpenGL ES的着色器语言被称为GLSL ES。WebGL基于OpenGL ES 2.0，因此它的着色器语言也是GLSL ES。
WebGL程序的结构
在HTML中，动态网页包含了HTML和JavaScript两种语言。引入了WebGL后，还需要加入着色器语言GLSL ES。
**因此WebGL程序/页面包含了三种语言：HTML5、JavaScript以及GLSL ES。
通常GLSL ES是以字符串的形式在JavaScript中编写的。所以实际上WebGL程序也只需要用到HTML文件(.html)和JavaScript(.js)文件。**
下图是传统动态网页(左侧)和使用了WebGL网页(右侧)的结构：
来自：https://blog.csdn.net/xxwlzfb/article/details/52606760