光照(Lighting)

教程3DWebGL

光(Lights)、法线(Normals)、材质(Materials)

位置(Positional)和方向(Directional)光

位置光也称为点光（Point Lights）

法线(Normals)

法线是垂直于面(Surface)的向量(Vector)，法线表示表面的方向，因此对于建模光源和物体之间的相互作用至关重要。

通过交叉乘积(Cross-Product)来计算法线：

P0, P1, P1：三角形的 3 个顶点；
V1 = P1 - P0
V2 = P2 - P0
N = V1 × V2

多个三角形共享的顶点，如何计算法线？

材质(Materials)

材质包含：

物体的颜色(Color)
- 决定了光照射到物体上后的反射光颜色
物体的纹理(Texture)
- 物体所映射到的纹理图片，类似于皮肤

光、法线、材质→渲染管道

并行处理，Attributes Uniforms

Uniforms 类似于 global 变量，在一个Pipe内是不变的（每一次drawArray/drawElements）（光、材质） Attributes 类似于 local 变量，每个顶点对应不同的 attributes（顶点坐标、顶点法向量）

GPU 硬件决定了并行的线程数

着色方法（Shading Methods）和光发射模型（Light-Reflection Modes）

Shading refers to the type of interpolation that is performed to obtain the final color for every fragment in the scene.

Once the shading model is established, the lighting model determines how the normals, materials, and lights need to be combined to produce the final color.

Shading/Interpolation Methods

Gouraud Interpolation

The Gouraud interpolation method calculates the final color in the vertex shader.

Then, using a varying variable, the final color for the vertex is passed to the fragment shader.

Due to the automatic interpolation of varyings provided by the rendering pipeline, each fragment will have a color that is the result of interpolating the colors of the enclosing triangle for each fragment.

TIP

Varying Interpolation The interpolation of varyings is automatic in the rendering pipeline. No programming is required.

Phong Interpolation

The Phong method calculates the final color in the fragment shader. To do so, each vertex normal is passed from the vertex shader to the fragment shader using a varying. Because of the interpolation mechanism of varyings included in the pipeline, each fragment will have its own normal. Fragment normals are then used to calculate the final color in the fragment shader.

VS

Gouraud阴影被认为更快，因为执行的计算是按顶点计算的，而Phong阴影是按片段计算的。性能上的速度确实是以精确或更现实的插值为代价的。这在光的强度在两个顶点之间不线性下降的情况下是最明显的。在本章的后面，我们将更详细地介绍这两种技术。

TIP

着色方法不指定如何计算每个片段的最终颜色。它只指定要使用的位置(顶点或片段着色器) 和插值类型(顶点颜色或顶点法线)。

Light-Reflection Models

着色模型决定了在哪里(VS，FS)计算最终颜色，而光反射模型决定具体如何计算。

The Lambertian Reflection Model

Lambertian reflections are diffuse reflections漫反射. 入射能量在所有方向均匀反射，即入射能量以入射点为中心，在整个半球空间内向四周各向同性地反射能量的现象，称为漫反射，也称各向同性反射

漫反射：无论观察者在哪个方向，反射结果都是一样的，也就是与观察者的位置无关；镜面反射：观察者正处在反射光时，光最亮；如果与反射光反方向，则没有光照值。

计算公式：

为最终的颜色值，是光源的颜色值，是物体材质的颜色值，是入射光的反方向，为入射点的法线

我们假设 , 是单位向量，那么

Phong Reflection Model

冯氏光反射模型

Ambient(环境光)

Diffuse(漫反射)

使用郎伯模型

Specular(镜面高光)

计算公式：

为最终的镜面反射颜色值，是光源的颜色值，是物体材质的颜色值，是反射光的方向，为摄像机的方向，物体高光因子。

我们假设和都是单位向量，那么：

OpenGL ES Shading Language (ESSL)

TIP

GLSL 是 OpenGL 的着色器语言，ESSL 是 OpenGL ES 的着色器语言。

ESSL 是 GLSL 的子集。

因为 WebGL2 基于 OpenGL ES 3.0，所以着色器使用的是 ESSL，而不是 GLSL。

Storage Qualifier(存储限定符)

存储限定符	含义	示例
`attribute`	仅在 Vettex Shader 中有效。连接 WebGL 和 Vertex Shader，从 VBO 中拉取 per-vertex 数据
`uniform`	连接 WebGL 和 Shaders，通过 WebGL API 设置值，在图形对象渲染过程中保持不变
`varing`	连接 VertexShader 和 Fragment Shader，Vertex Shader 输出值给到 Fragment Shader
`const`	Shader 编译时常量，或只读的函数参数

数据类型

常用数据类型：

类型	含义	示例
void	For functions that do not return a value or for an empty parameter list
bool	A conditional type, taking on values of true or false
int	A signed integer
float	A single floating-point scalar
vec2	A two-component floating-point vector
vec3	A three-component floating-point vector
vec4	A four-component floating-point vector
bvec2	A two-component Boolean vector
bvec3	A three-component Boolean vector
bvec4	A four-component Boolean vector
ivec2	A two-component integer vector
ivec3	A three-component integer vector
ivec4	A four-component integer vector
mat2	A 2×2 floating-point matrix
mat3	A 3×3 floating-point matrix
mat4	A 4×4 floating-point matrix
sampler2D	A handle for accessing a 2D texture
sampler3D	A handle for accessing a 3D texture
samplerCube	A handle for accessing a cube-mapped texture
struct	Used to declare custom data structures based on standard types

glsl

uniform vec4 uLightColor;

The GLSL and ESSL Naming Convention

Convention dictates that we prefix shader variables with their type. This makes for clear and readable shader code. For example, for a given color uniform, you would name the variable uLightColor. For a position varying, vNormal. For a normal attribute, aVertexNormal.

向量分量

分量	使用场景	示例
`[1-4]`	通用场景	`uLightColor[0] = 1.0;`
`{ x, y, z, w }`	Useful when accessing vectors that represent points or vectors.	`aVertexPosition.x = 1.0;`
`{ r, g, b, a }`	Useful when accessing vectors that represent colors.	`uLightColor.r = 1.0;`
`{ s, t, p, q }`	Useful when accessing vectors that represent texture coordinates.	`vSamplerCoord.s = 1.0;`