《WebGL编程指南》笔记——1 WebGL入门
bertZuo 2019-06-28
本篇内容对应《WebGL编程指南》第一章概述，以及第二章canvas部分。
主要介绍webgl的历史背景，以及重温一下canvas的使用。
第一章：WEBGL概述
有一种专门用来开发3D图形的语言，叫OpenGL，WebGL正是OpenGL的其中一个版本——OpenGL ES在浏览器端的实现。
WebGL在语法上和OpenGL没有任何差别，除了在写法上略有不同，基本可以认为WebGL就是OpenGL套了一个HTML／JavaScript的壳。
WebGL在浏览器中的实现方式是在Html中，通过JavaScript字符串编写OpenGL的着色器，绘制到H5的canvas元素上。因为现在的浏览器大多都支持的webgl，canvas能够获取webgl上下文，从而可以调用webgl的方法完成图形绘制。
OpenGl着色器，可以理解为用来定义图形该如何绘制的方法，比如图形应该在坐标中什么位置，什么颜色等。
编写着色器的语言叫做着色器语言（GLSL ES)。这个语言和C语言很相似，在JS中我们用字符串作为载体书写GLSL ES。
第二章：WEBGL入门
重温canvas
用canvas画一个矩形
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas') // 获取canvas
var ctx = canvas.getContext('2d') // 获取上下文
ctx.fillStyle = 'rgba(0,0,0,0.1)'
ctx.fillRect(0, 0, 400, 400) // 先绘制一个以canvas原点为起点，宽高等于canvas画布宽高的矩形，当作背景
ctx.fillStyle = 'rgba(0,0,255,1.0)'
ctx.fillRect(120, 10, 150, 150) // 接着绘制一个蓝色的矩形
</script>
</body>
</html>可以看出，使用canvas绘制矩形可以分为这么几步：
- 获取canvas元素
- 获取上下文
- 调用上下文提供的API，设置填充颜色，设置坐标，绘制图形
实际上，绘制其他图形也都是按着这个步骤进行的，看下效果：
canvas坐标系
canvas坐标系是以左上角顶点为原点（0,0,0），原点水平向右为x轴正方向，垂直向下为y轴正方向，z轴用来绘制3d图形，我记得z轴正方向是屏幕向观察者的方向。
WebGL坐标系
使用webgl绘图虽然也是在canvas中，但是使用的坐标系并不是canvas坐标系，而是webgl自己的坐标系，webgl坐标系的原点在canvas的中心，x轴正向水平向右，y轴正向垂直向上，z轴正向是从屏幕向观察者方向：
总结
webgl使用canvas ，js，着色器语言绘制图形
webgl坐标系和canvas坐标系不同，原点在canvas中心，不是左上角，且y轴正方向是水平向上，不是向下，和高中数学中用的坐标系一样，笛卡尔坐标系。
