WebGL Beginners Guide 笔记
粗略看了 WebGL Beginners Guide，记录（翻译）一下部分内容。
Getting Started with WebGL
一个 WebGL 应用的组成
- Canvas
- Objects
- Lights
- Camera
Rendering Geometry
表示任何 3D 对象需要两种基本的数据类型：顶点（vertices）和索引（indices），内容为这两种数据的 buffer 分别称为 Vertex Buffer Objects (VBOs)和 Index Buffer Objects(IBOs)。
一个使用定点和索引绘制的例子：
渲染管线概览：
- VBO 包含需要绘制的几何体信息，顶点着色器通过属性（Attributes，不同属性指向 VBO 中对应的值）在 VBO 中获取绘制需要的信息，如颜色、法线和纹理等等。
- 片段着色器则是让开发者可以完全控制所有绘制的细节，简单来说就是定点着色器控制的是两个定点的绘制，而片段着色器控制两个点之间的其他点的绘制，片段着色器的输入。
- Framebuffer 包含片段着色器处理的片段。一旦处理了所有片段，就会形成 2D 图像并显示在屏幕上。 FrameBuffer 是渲染管道的最终目的地。
- 属性变量，同一变量和易变变量（Attributes, uniforms, and varyings）。属性是顶点着色器中使用的输入变量（定点左边和颜色等）。由于每个顶点都调用顶点着色器，因此每次调用顶点着色器时属性都是不同的。统一变量是顶点着色器和片段着色器可用的输入变量。统一变量在
渲染周期中是不变的（例如灯的位置）。易变变量用于将数据从顶点着色器传递到片段着色器。
Lights!
光照、法线和向量（Lights, normals, and materials）：
有两种光源：位置光和平行光（positional or directional）。位置光就是光源的位置会影响场景的表现，例如灯泡等，可以将其光照的方向想象是一个点出发的不同方向的向量，而太阳光则是比较典型的平行光，他对一个物体的各个位置的光线是平行的。
着色方法（Shading methods）一种插值类型，定义了最终颜色的计算位置——在顶点着色器中或在片段着色器中；照明模型决定了法线、材质和灯光是如何组合产生最终颜色的。照明模型（lighting models）的方程使用光反射的物理原理。因此，照明模型在文献中也被称为反射模型（reflection models）。
两种基本的阴影/插值方法（Shading/interpolation methods）
高洛德着色法（Goraud shading）：根据顶点法向量计算出光照，再插值计算出整个面的光照。逐顶点光照。
冯氏着色法（Phong shading）：根据顶点的法向量插值计算出表面内各点的法向量，再根据光照模型逐像素计算光照值。逐像素光照。
两种光照模型
朗伯光照反射模型（Lambertian reflection model），只考虑了光照的漫反射情况，没有考虑环境光和镜面反射
冯氏光照反射模型（Phong reflection model），考虑了 环境光、漫反射以及镜面反射。
OpenGL ES 着色器的语言是 ESSL。
Camera
基本相机类型：轨道摄像头（世界或摄像机坐标中）和跟踪摄像头（FBS）
WebGL 没有可以操纵的相机对象。No camera object in the WebGL API, only matrices.
了解场景从 3D 世界到 2D 屏幕的转变
模型变换（Model transform）
对象的源顶点坐标转换为在世界坐标系中的坐标
视图变换（View transform）
世界坐标系中的坐标转换为以视图坐标系中，该坐标系原点可能是眼睛或者摄像头。
投影变换（Projection transform）
该变换决定了多少视图空间将被渲染，以及它将如何被映射到计算机屏幕上。这个区域被称为截锥体，它由六个平面(近、远、顶、底、右、左平面)定义，如下图所示:
透视除法（Perspective division）
一旦确定了多少可视空间将被渲染，锥体将被映射到近平面，以产生一个 2D 图像。近平面是要在你的电脑屏幕上呈现的。该变换生成
不同的操作系统和显示设备都有在屏幕上表示二维信息的机制。为了为所有可能的情况提供健壮性（robustness 鲁棒性），WebGL(也在 OpenGL ES 中)提供了一个独立于任何特定硬件的中间坐标系统。这个空间称为归一化设备坐标(Normalized Device Coordinates NDC)。
视口变换（Viewport transform）
最后，将 NDC 映射到视口坐标。此步骤将这些坐标映射到屏幕上的可用空间。在 WebGL 中，此空间由 HTML5 画布提供，如下图所示：
法线转换（Normal transformations）
当顶点被转换时，法向量也应该被转换。
WebGL 实现
