# webgl笔记-4.光照原理和光照渲染

## 环境光

$$C=\begin{bmatrix}C_{R}\\ C_{G}\\ C_{B}\end{bmatrix}=\begin{bmatrix}L_{R}\times S_{R}\\ L_{G}\times S_{G}\\ L_{B}\times S_{B}\end{bmatrix}$$

$$C=\begin{bmatrix}C_{R}\\ C_{G}\\ C_{B}\end{bmatrix}=\begin{bmatrix}F_{R}\times S_{R}\\ F_{G}\times S_{G}\\ F_{B}\times S_{B}\end{bmatrix}$$

$$F=\begin{bmatrix}F_{R}\\ F_{G}\\ F_{B}\end{bmatrix}=\begin{bmatrix}L_{R}\\ L_{G}\\ L_{B}\end{bmatrix}$$

<!-- 片元着色器 -->
……
varying vec3 vAmbientLightWeighting;
void main(void) {
vec4 noLightColor; // 计算不受光照影响（或者说受到标准光照）时的颜色

……
gl_FragColor = vec4(noLightColor.rgb * vAmbientLightWeighting, noLightColor.a);
}
</script>
<!-- 顶点着色器 –>
……
uniform vec3 uAmbientColor;
varying vec3 vAmbientLightWeighting;
void main(void) {
……
vAmbientLightWeighting = uAmbientColor;
}
</script>

## 平行光

$$F=\begin{bmatrix}F_{R}\\ F_{G}\\ F_{B}\end{bmatrix}=\begin{bmatrix}L_{R}\\ L_{G}\\ L_{B}\end{bmatrix}\cdot max\{-\cos\theta,0\}$$

$$\cos\theta=\frac{D}{|D|}\cdot\frac{N}{|N|}$$

<!-- 顶点着色器 –>
……
attribute vec3 aVertexNormal; // 法线
uniform mat3 uNMatrix; // 模型矩阵3阶子矩阵的逆转置矩阵
uniform vec3 uLightingDirection; // 平行光方向
uniform vec3 uDirectionalColor; // 平行光颜色
varying vec3 vLightWeighting; // 光照影响因子
void main(void) {
……
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
vLightWeighting = vLightWeighting + uDirectionalColor * directionalLightWeighting;
}
</script>

## 点光源

$$\cos\theta=\frac{D}{|D|}\cdot\frac{N}{|N|}$$

<!-- 顶点着色器 –>
……
attribute vec3 aVertexNormal;
uniform mat3 uNMatrix;
uniform vec3 uPointLightingLocation;
uniform vec3 uPointLightingColor;
varying vec3 vLightWeighting;
void main(void) {
……
vec3 lightDirection = normalize(uPointLightingLocation - mvPosition.xyz);
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting = max(dot(transformedNormal, lightDirection), 0.0);
vLightWeighting = vLightWeighting + uPointLightingColor * directionalLightWeighting;
}
</script>

## 逐像元光照

<!-- 片元着色器 –>
……
varying vec3 vTransformedNormal;
varying vec4 vPosition;
uniform vec3 uPointLightingLocation;
uniform vec3 uPointLightingColor;
void main(void) {
vec3 lightWeighting; // 逐片元的光照影响因子
vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz); // 光照方向模1向量
float directionalLightWeighting = max(dot(normalize(vTransformedNormal), lightDirection), 0.0);
lightWeighting = lightWeighting + uPointLightingColor * directionalLightWeighting;
……
}
</script>

<!-- 顶点着色器 –>
……
varying vec2 vTextureCoord;
varying vec3 vTransformedNormal;
varying vec4 vPosition;
void main(void) {
vPosition = uMVMatrix * vec4(aVertexPosition, 1.0); // 传递顶点空间位置
……
vTransformedNormal = uNMatrix * aVertexNormal; // 传递法线向量
}
</script>

## 光泽：镜面反射

$$F=(R_{m}\cdot V)^{\alpha}$$

// 获取归一化相机接受光线V的方向向量
vec3 eyeDirection = normalize(-vPosition.xyz);
// 根据光照方向和法线方向计算严格镜面反射光Rm的方向向量
vec3 reflectionDirection = reflect(-lightDirection, normal);
// 计算镜面反射光影响因子，uMaterialShininess为常量指数a
specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);

## 其他

posted @ 2012-10-08 16:33 一叶斋主人 阅读(...) 评论(...) 编辑 收藏