webgl点光源的漫反射

点光源的特点:

1. 点光源照射到物体上的每个顶点的入射光方向是各不相同的。
2. 需要一个点光源的位置。
3. 需要一个点光源的光颜色。

需要计算的是
我们需要计算出每个顶点的入射光线的方向。
点光源向四周放射光线，所以顶点处的光线方向是由点光源坐标 - 顶点坐标而得到得矢量

入射光线的方向 = 点光源的坐标 - 顶点坐标

顶点着色器中
声明点光源的位置

'uniform vec3 u_LightPosition;n' + // 点光源的位置

获取地址，并且赋值

const u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition'); // 获取点光源位置的存储地址
gl.uniform3f(u_LightPosition, 0.0, 3.0, 4.0);

声明模型矩阵

'uniform mat4 u_ModelMatrix;n' + // 模型矩阵

获取地址，赋值模型矩阵

const modemoMatrixt = new Matrix4();
// modemoMatrixt.setTranslate(0, 0, 0); // 设置平移的坐标
modemoMatrixt.setRotate(0, 0, 1, 0) // 设置旋转的角度，旋转轴
const u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
gl.uniformMatrix4fv(u_ModelMatrix, false, modemoMatrixt.elements);

具体计算入射光的方向

'   vec4 vertexPosition = u_ModelMatrix * a_Position;n' + // 每个顶点的坐标,经过模型矩阵变化之后的顶点坐标
'   vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));n' + // 计算每个顶点的入射光向量
// u_LightPosition 点光源的位置
// vertexPosition 经过变化之后的顶点坐标
// lightDirection 点光源入射光的方向

然后我们计算法线向量 与 入射光的方向的夹角

'   float nDotl = max(dot(lightDirection, normal), 0.0);n' + // 计算每个顶点的法向量与入射光向量的夹角余弦值

最终计算点光源的漫反射的颜色
物体基底色
光反射的颜色
夹角

'   vec3 diffuse = a_Color.rgb * u_LightColor * nDotl;n' + // 计算点光源漫反射的光颜色

计算出环境光的颜色

'   vec3 ambient = u_AmbientLight * a_Color.rgb;n' + // 环境光反射的颜色

赋值给varying类型的变量，使其能在片源着色器中使用

'   c_Color = vec4(diffuse + ambient, a_Color);n' + // 环境光反射的颜色 + 点光源反射的颜色, 物体基础底色

片源着色器中

const FSHADER_SOURCE =
            '#ifdef GL_ESn' +
            'precision mediump float;n' +
            '#endifn' +
            'varying vec4 c_Color;n' +
            'void main(){n' +
            '   gl_FragColor = c_Color;n' +
            '}n';

详细代码

效果图