3D坐标系

2D笛卡儿坐标系有x轴和y轴，这种坐标系可以用于定义页面中div标签的位置，或者指定在canvas元素上进行2D绘制的位置。3D坐标系是在2D的基础上，新增了一个表示深度的z轴。

WebGL使用的坐标系，x轴方向是水平的从左到右，y轴方向是垂直的从下到上，x轴方向是从屏幕里面指向屏幕外面。

网格、多边形和顶点

网格（Mesh）是绘制3D图形最常用的一种方法。它是由一个或多个多边形组成的物体，各个顶点的坐标（x，y，z）定义了多边形在3D空间的位置。网格中的多边形通常是三角形和四边形。3D网格也被叫做模型（model）。

如上所示，黑线描边的四边形组成了一个网格，从而形成了一个脸部形状。网格中各个顶点的x，y，z的坐标位置定义了各个四边形的形状。

材质、纹理和光源

x,y,z的坐标定义了网格的形状，网格表面的其他特性被称为材质，材质通常依赖于一个或多个光源来呈现外观效果。用一个或者很多个位图来呈现表面信息，这被称作纹理。纹理可以直接定义表面的外观（如印在T恤上的图像），也可以跟其他纹理组合以实现如凹凸和彩虹色等复杂的效果。而光源用来定义一个场景如何被照亮。

变换与矩阵

3D网格是通过它们顶点的位置确定的。如果每次你想移到当前网格的另一个视角的时候都需要修改其顶点的位置将会是一件非常痛苦的事情，尤其是当这个网格不停运动的时候。也正因如此，大多数的3D系统都支持变换，通过变换，不需要遍历所有的顶点并修改其位置，仅需要修改几个相对顶点，即可移动一个网格。通过变换，我们无需修改网格顶点的任何值，即可以缩放，旋转，偏移这个网格。

相机、透视、视口和投影

每一个场景在渲染时都需要有一个视点，用户正是从视点的位置去广场场景3D图形系统通常使用相机来定义用户与场景的相对位置和朝向。有点类似人看电视，眼睛就是相机。3D世界中的相机也具有视野尺寸等属性。视野尺寸决定了透视关系（近大远小）。

而视口往往是2D的，现实世界中，电视机屏幕、计算机显示屏都充当视口的作用。WebGL用于浏览器，因此浏览器窗口或Canvas画布元素就是它的视口。

相机是由两个矩阵来控制的，第一个矩阵定义了相机的位置和朝向，主要是用来变换操作的的矩阵。第二个矩阵叫做投影矩阵，用于将3D坐标转换为2D视口绘制空间的坐标。

着色器

一个开发者必须精确定义顶点、变换、矩阵和光照以及摄像机之间如何交互来创建这个图像，才能最终完成一个网格图像的渲染。而着色器就是为了实现这个目的而诞生的。一个着色器(可编程着色器)是一段实现了把网格上的像素转换到屏幕上的算法的程序代码。图形图像硬件可以理解顶点，纹理和其他几个小项，但是对材料，光照，变换或者摄像机没概念。这些高层建筑通过着色器程序来解释。着色器通常用高级语言，类C的语言编写后编译成能被GPU(图像处理单元)使用的代码。