webgl自学笔记——光照

在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型。着色器允许我们使用数学模型来控制如何照亮我们的场景。

最好有线性代数的相关知识。

本章中：

1. 光源、法线、材料
2. 光照和着色的区别
3. Goraud Phong着色方法和Lambertian Phong光照模型
4. 定义并使用uniforms、attributes、varyings
5. 使用ESSL，webgl的着色器语言
6. 讨论跟着色有关的webgl api
7. 继续关于webgl是一个状态机的分析，描述跟着色器相关的可以从状态机中设置和取回的attributes

现实世界中我们能看到物体是因为他们反射光。所有的物体根据他们的 位置 和与光源的相对距离反射的光是不同的，物体表面的 法线 代表表面的方向决定反射光的方向，表面的 材料 决定多少强度的光会被反射。

光源

光源可以具有位置也可以只具有方向。当光源的位置能够影响场景的照亮时他就是点光源。方向光源指的是无论他的位置在哪都将对场景产生相同的光亮效果，如太阳光，这类光源也叫平行光。

点光源通常用一个场景中的点来建模，而平行光通常用向量来代表他的方向，为了简便计算通常用单位向量。

法线

法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。

每一个顶点都有一个关联的法向量。

如果一个顶点被多个三角形共享，共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2；

法向量为了计算的方便也会标准化成单位向量。

材料

webgl中的物体的材料需要结合他的颜色、纹理等多个参数来建模。材料颜色通常用rgb来表示，材料的纹理与被匹配在物体表面的图像有关。为表面匹配图像的过程叫做纹理贴图。

结合了光照、法线和材料的渲染管线：

上面这张图中，由于法线是定义在顶点-顶点基础上的，因此法线在webgl中被当做VBO来建模并且通过attribute来匹配到顶点坐标VBO。

光和材料使用uniform来传递。uniform可以在顶点着色器和片元着色器中来使用。这给我们的光照模型带来很多灵活性，因为我们既可以计算出光如何在顶点上被反射也可以计算出光光在片元中如何被反射（顶点法线可以通过varyings传递到片元着色器）

attributes和uniforms的区别

1、当一个绘制api（drawArrays、drawElements）被调用时，GPU会并行的加载顶点着色器的多份拷贝。每一份拷贝都会接收到不同的属性集合。这些属性将匹配到VBO并被绘制出来。

2、顶点着色器的所有拷贝中都会受到相同的uniforms，换句话说uniforms在每次绘制调用中都可以认为是常量

上图展示的是gpu并行加载多份顶点着色器和匹配VBO的过程。

一旦光线、法线、材料被传递到程序中去后，下个步骤需要决定用什么样的着色方法和光照模型。

着色方法和光照反射模型

着色和光照两个术语相互间会引起歧义。他们实际上是两个不同的概念，着色指的是让场景中的每个片元得到最终颜色的插值方式。着色的类型定义了在那里计算出最终的颜色（在顶点着色器还是片元着色器中）。一旦着色模型建立后，光照模型决定了法线、材料和光纤如何结合起来产生最终颜色。光照模型使用的是光的物理反射规律。因此在很多书籍中光照模型也被成为反射模型。

着色（插值）方式：

1、Goraud插值；Goraud插值方法在顶点着色器中计算出最终颜色。顶点法线在这里的计算中使用，然后顶点的最终颜色使用varying变量传递到片元着色器中。由于varying变量的在渲染管道中会被自动进行插值，每一个片元的最终颜色是由包含它的封闭三角形的三个顶点颜色决定的。

2、Phong插值；Phong插值在片元着色器中计算出最终颜色。每一个顶点法线通过varying变量沿着顶点着色器传递到片元着色器中。因为varying类型的插值机制被包含在管线中，所以每一个片元都有自己的法线。然后片元法线在片元着色器中来计算出最终颜色。

着色方法不指定每个片元的最终颜色如何计算，它只指定在哪里计算最终颜色和用什么样的插值方式。

光反射模型：

1、Lambertian反射模型

Lambertian反射常用语计算机图形学中为漫反射建模，漫反射指的是入射光朝多个角度反射而不是只朝着一个角度反射（镜面反射）。该条件下光照模型遵循余弦发射模型。Lambertian反射通常使用表面法线和光照方向的负向量的点乘积。然后得到的结果乘以材料颜色和光源颜色。

2、Phong反射模型

在Phong反射模型的描述中，表面反射光由三部分的和：环境光+漫反射+镜面反射。

ambient：代表周围中散乱的光，它是独立于光源的并且在所有片元中都一样

diffuse：描述的是漫反射，通常使用Lambertian模型

specular：镜面反射；理论上讲当我们的视线角度与反射光角度相同时镜面部分得到最大值。这部分可以使用视线向量和反射光向量的点乘积得到。视线向量的起点是片元终点是视点位置（相机位置），反射光方向由入射光根据表面的法线发射得出（essl中有专门的reflect方法计算）。然后点乘积的结果再与一个代表表面发亮的数字做幂运算。而后的结果在乘以光和材料的镜面部分颜色。

最后将环境部分、漫反射部分、镜面部分相加得到片元的最终颜色。

ESSL——OpenGL ES 着色器语言

上面说到没有光的话整个场景就看不到物体，我理解是着色器最终只认gl_color;当物体拥有材质时，如果这时候没有光可能导致gl_color计算值为0x000000;

当没有任何光源的时候，最终的颜色将是黑色，无论材质是什么颜色。

只有蓝色材质才能反射蓝色光