WebGL进阶（九）光线

理论基础：

点光源

符合向量定义，末减初。 

平行光

环境光 

效果：

点光源

 

平行光

环境光

源码：

点光源

        // 顶点着色器程序let vertexstring = `attribute vec4 a_position; // 顶点位置属性uniform mat4 u_formMatrix; // 用于变换的矩阵attribute vec4 a_Normal; // 顶点法线属性uniform vec3 u_PointLightPosition; // 点光源位置uniform vec3 u_DiffuseLight; // 散射光颜色uniform vec3 u_AmbientLight; // 环境光颜色varying vec4 v_Color; // 用于传递给片段着色器的颜色uniform mat4 u_NormalMatrix; // 用于变换法线的矩阵void main(void){gl_Position = u_formMatrix * a_position; // 应用变换矩阵到顶点位置vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal)); // 变换并归一化法线vec3 lightDirection = normalize(vec3(gl_Position.xyz)-u_PointLightPosition); // 计算光源方向float nDotL = max(dot(lightDirection, normal), 0.0); // 计算法线和光源方向的点积vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0)* nDotL; // 计算散射光vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0); // 环境光v_Color = vec4(diffuse + ambient, 1); // 将散射光和环境光相加，设置透明度为1}`;// 片段着色器程序let fragmentstring = `precision mediump float; // 设置精度为中等varying vec4 v_Color; // 从顶点着色器接收的颜色void main(void){gl_FragColor =v_Color; // 设置片段颜色}`;// 初始化WebGL上下文和着色器var webgl;var angle = 45; // 透视投影的角度var webglDiv; // 用于存储canvas元素的变量function init() {initWebgl(); // 初始化WebGL上下文initShader(); // 初始化着色器initBuffer(); // 初始化缓冲区draw(); // 绘制场景}// 初始化WebGL上下文function initWebgl() {webglDiv = document.getElementById('myCanvas'); // 获取canvas元素webgl = webglDiv.getContext("webgl"); // 获取WebGL上下文webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight); // 设置视口大小}// 初始化着色器function initShader() {// 创建顶点着色器和片段着色器let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);// 设置着色器源代码webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);// 编译着色器webgl.compileShader(vsshader);webgl.compileShader(fsshader);// 检查着色器编译状态if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}// 创建程序并附加着色器let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program); // 使用程序webgl.program = program; // 存储程序对象}// 初始化缓冲区function initBuffer() {// 顶点数据准备let arr = [// 顶点坐标数据，定义了一个立方体的8个顶点];let normals = new Float32Array([// 法线数据，定义了立方体每个面的法线]);let index = [// 索引数据，定义了立方体每个面的三角形];// 创建顶点位置属性的缓冲区let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);// 创建法线属性的缓冲区let aNormal = webgl.getAttribLocation(webgl.program, "a_Normal");let normalsBuffer = webgl.createBuffer();let normalsArr = new Float32Array(normals);webgl.bindBuffer(webgl.ARRAY_BUFFER, normalsBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, normalsArr, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aNormal);webgl.vertexAttribPointer(aNormal, 3, webgl.FLOAT, false, 3 * 4, 0);// 设置光照参数let u_DiffuseLight = webgl.getUniformLocation(webgl.program, 'u_DiffuseLight');webgl.uniform3f(u_DiffuseLight, 1.0, 1.0, 1.0);let u_LightDirection = webgl.getUniformLocation(webgl.program, 'u_PointLightPosition');webgl.uniform3fv(u_LightDirection, [0,2,0]);let u_AmbientLight = webgl.getUniformLocation(webgl.program, 'u_AmbientLight');webgl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);// 创建索引缓冲区let indexBuffer = webgl.createBuffer();let indices = new Uint8Array(index);webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indices, webgl.STATIC_DRAW);// 矩阵变换let ProjMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ProjMatrix);// 设置透视投影矩阵glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000);let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");let ModelMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ModelMatrix);glMatrix.mat4.translate(ModelMatrix, ModelMatrix, [0, 0, 0]);let uniformNormalMatrix = webgl.getUniformLocation(webgl.program, "u_NormalMatrix");let normalMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(normalMatrix);glMatrix.mat4.invert(normalMatrix,ModelMatrix);glMatrix.mat4.transpose(normalMatrix,ModelMatrix);webgl.uniformMatrix4fv(uniformNormalMatrix, false, normalMatrix);let ViewMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ViewMatrix);// 设置视图矩阵glMatrix.mat4.lookAt(ViewMatrix, [10, 15,0], [0, 0, 0], [0, 1, 0]);let mvMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvMatrix);glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);let mvpMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvpMatrix);glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix);}

平行光

    let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;attribute vec4 a_Normal;uniform vec3 u_LightDirection;uniform vec3 u_DiffuseLight;uniform vec3 u_AmbientLight;varying vec4 v_Color;void main(void){gl_Position = u_formMatrix * a_position;vec3 normal = normalize(a_Normal.xyz);vec3 LightDirection = normalize(u_LightDirection.xyz);float nDotL = max(dot(LightDirection, normal), 0.0);vec3 diffuse = u_DiffuseLight * vec3(1.0,0,1.0)* nDotL;vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0);v_Color = vec4(diffuse + ambient, 1);}`;let fragmentstring = `precision mediump float;varying vec4 v_Color;void main(void){gl_FragColor =v_Color;}`;            let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");let ModelMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ModelMatrix);glMatrix.mat4.translate(ModelMatrix, ModelMatrix, [0, 0, 0]);let uniformNormalMatrix = webgl.getUniformLocation(webgl.program, "u_NormalMatrix");let normalMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(normalMatrix);glMatrix.mat4.invert(normalMatrix,ModelMatrix);glMatrix.mat4.transpose(normalMatrix,ModelMatrix);webgl.uniformMatrix4fv(uniformNormalMatrix, false, normalMatrix);let ViewMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ViewMatrix);glMatrix.mat4.lookAt(ViewMatrix, [10, 15,0], [0, 0, 0], [0, 1, 0]);let mvMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvMatrix);glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);let mvpMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvpMatrix);glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix)

 

环境光

        let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;uniform vec3 u_AmbientLight;varying vec4 v_Color;void main(void){gl_Position = u_formMatrix * a_position;vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0);v_Color = vec4(ambient, 1);}`;let fragmentstring = `precision mediump float;varying vec4 v_Color;void main(void){gl_FragColor =v_Color;}`;let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;uniform vec3 u_AmbientLight;varying vec4 v_Color;void main(void){gl_Position = u_formMatrix * a_position;vec3 ambient = u_AmbientLight * vec3(1.0,0,1.0);v_Color = vec4(ambient, 1);}`;let fragmentstring = `precision mediump float;varying vec4 v_Color;void main(void){gl_FragColor =v_Color;}`;var webgl;var angle = 45;var webglDivfunction init() {initWebgl();initShader();initBuffer();draw();}function initWebgl() {webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3//顶点数据准备let arr = [1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // v0-v1-v2-v3 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0, 1.0, // v0-v3-v4-v5 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 1.0, -1.0, 1.0, -1.0, 1.0, 1.0, 1.0, // v0-v5-v6-v1 -1.0, 1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v1-v6-v7-v2 -1.0, -1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v7-v4-v3-v2 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, 1.0, 1.0, 1.0, -1.0, 1.0 // v4-v7-v6-v5 ]let index = [0, 1, 2, 0, 2, 3,    // front4, 5, 6, 4, 6, 7,    // right8, 9, 10, 8, 10, 11,    // up12, 13, 14, 12, 14, 15,    // left16, 17, 18, 16, 18, 19,    // down20, 21, 22, 20, 22, 23     // back];let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 4 * 4, 0);let u_AmbientLight = webgl.getUniformLocation(webgl.program, 'u_AmbientLight');webgl.uniform3f(u_AmbientLight, 0.5, 0.5, 0.5);let indexBuffer = webgl.createBuffer();let indices = new Uint8Array(index);webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indices, webgl.STATIC_DRAW);//矩阵变换let ProjMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ProjMatrix);//角度小，看到的物体大，角度大，看到的物体小。glMatrix.mat4.perspective(ProjMatrix, angle * Math.PI / 180, webglDiv.clientWidth / webglDiv.clientHeight, 1, 1000)    //修改可视域范围let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");let ModelMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ModelMatrix);glMatrix.mat4.translate(ModelMatrix, ModelMatrix, [0, 0, 0]);let uniformNormalMatrix = webgl.getUniformLocation(webgl.program, "u_NormalMatrix");let normalMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(normalMatrix);glMatrix.mat4.invert(normalMatrix,ModelMatrix);glMatrix.mat4.transpose(normalMatrix,ModelMatrix);webgl.uniformMatrix4fv(uniformNormalMatrix, false, normalMatrix);let ViewMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ViewMatrix);glMatrix.mat4.lookAt(ViewMatrix, [10, 15,0], [0, 0, 0], [0, 1, 0]);let mvMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvMatrix);glMatrix.mat4.multiply(mvMatrix, ViewMatrix, ModelMatrix);let mvpMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(mvpMatrix);glMatrix.mat4.multiply(mvpMatrix, ProjMatrix, mvMatrix);webgl.uniformMatrix4fv(uniformMatrix1, false, mvpMatrix)}function draw() {webgl.clearColor(0, 0,1, 1);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);webgl.drawElements(webgl.TRIANGLES, 36, webgl.UNSIGNED_BYTE, 0)}

webgl.enable:

 

复盘：