WebGL入门(二十九)-逐片元处理点光源光照效果

1.demo效果

在这里插入图片描述

在这里插入图片描述

如上图,图二为逐片元处理点光源的效果,与之前的demo效果相比,物体表面的光照效果更加柔和、细腻

2.实现要点

2.1顶点着色器中声明varying变量

在顶点着色器中声明varying变量v_Color,v_Normal,v_Position分别用来向片元着色器传值顶点颜色信息,顶点法向量,顶点坐标,在main函数中分别计算它们的值

    //顶点着色器
var VSHADER_SOURCE = '' +
  'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position,用来存放顶点位置信息
  'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color,用来存放顶点颜色信息
  'attribute vec4 a_Normal;\\n' + //声明attribute变量a_Normal,用来存放顶点法向量
  'uniform mat4 u_MvpMatrix;\\n' + //声明uniform变量u_MvpMatrix,用来存放模型视图投影组合矩阵
  'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix,用来存放模型矩阵
  'uniform mat4 u_NormalMatrix;\\n' + //声明uniform变量u_NormalMatrix,用来存放变换法向量矩阵
  'varying vec4 v_Color;\\n' + //声明varying变量v_Color,用来向片元着色器传值顶点颜色信息
  'varying vec3 v_Normal;\\n' + //声明varying变量v_Normal,用来向片元着色器传值顶点法向量
  'varying vec3 v_Position;\\n' + //声明varying变量v_Position,用来向片元着色器传值顶点坐标
  'void main(){\\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\\n' + //将模型视图投影组合矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
  '  v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));\\n' + //将变换后的法向量计算后并归一化,再传给片元着色器
  '  v_Position = vec3(u_ModelMatrix * a_Position);\\n' + //将计算后的顶点坐标传给片元着色器
  '  v_Color = a_Color;\\n' + //将顶点颜色传给片元着色器
  '}\\n';

2.2片元着色器中使用varying变量

在片元着色器中什么uniform变量u_PointLightColor,u_PointLightPosition,u_AmbientLightColor分别用来存放点光源颜色,点光源位置,环境光颜色

在片元着色器中声明varying变量v_Color,v_Normal,v_Position分别用来接收顶点着色器传来的顶点颜色信息,顶点法向量,顶点坐标

接着在main函数中处理光照:

  • 对法线进行归一化处理
  • 计算点光源照射物体表面的光线方向
  • 计算光线方向和法向量点积
  • 计算漫反射光的颜色
  • 计算环境漫反射光的颜色
  • 将漫反射光的颜色和环境漫反射光的颜色相加的结果赋值给内置变量gl_FragColor
//片元着色器
var FSHADER_SOURCE = '' +
  '#ifdef GL_ES\\n' +
  ' precision mediump float;\\n' + // 设置精度
  '#endif\\n' +
  'uniform vec3 u_PointLightColor;\\n' + //声明uniform变量u_PointLightColor,用来存放点光源颜色
  'uniform vec3 u_PointLightPosition;\\n' + //声明uniform变量u_PointLightPosition,用来存放点光源位置
  'uniform vec3 u_AmbientLightColor;\\n' + //声明uniform变量u_AmbientLightColor,用来存放环境光颜色
  'varying vec4 v_Color;\\n' + //声明varying变量v_Color,用来接收顶点着色器传送的片元颜色信息
  'varying vec3 v_Normal;\\n' + //声明varying变量v_Normal,用来接收顶点着色器传送的顶点法向量
  'varying vec3 v_Position;\\n' + //声明varying变量v_Position,用来接收顶点着色器传送的顶点坐标
  'void main(){\\n' +
  '  vec3 normal = normalize(v_Normal);\\n' + //对法线进行归一化处理,因为内插后长度不一定是1.0
  '  vec3 lightDirection = normalize(u_PointLightPosition - v_Position);\\n' + //计算点光源照射物体表面的光线方向,并归一化
  '  float nDotL = max(dot(lightDirection, normal), 0.0);\\n' + //计算光线方向和法向量点积
  '  vec3 diffuse = u_PointLightColor * vec3(v_Color) * nDotL;\\n' + //计算漫反射光的颜色
  '  vec3 ambient = u_AmbientLightColor * vec3(v_Color);\\n' + //计算环境漫反射光的颜色
  '  gl_FragColor = vec4(diffuse + ambient, v_Color.a);\\n' + //将漫反射光的颜色和环境漫反射光的颜色相加的结果赋值给内置变量gl_FragColor
  '}\\n';

3.demo代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <!--通过canvas标签创建一个800px*800px大小的画布-->
  <canvas id="webgl" width="800" height="800"></canvas>
  <script type="text/javascript" src="./lib/cuon-matrix.js"></script>
  <script>
    //顶点着色器
    var VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position,用来存放顶点位置信息
      'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color,用来存放顶点颜色信息
      'attribute vec4 a_Normal;\\n' + //声明attribute变量a_Normal,用来存放顶点法向量
      'uniform mat4 u_MvpMatrix;\\n' + //声明uniform变量u_MvpMatrix,用来存放模型视图投影组合矩阵
      'uniform mat4 u_ModelMatrix;\\n' + //声明uniform变量u_ModelMatrix,用来存放模型矩阵
      'uniform mat4 u_NormalMatrix;\\n' + //声明uniform变量u_NormalMatrix,用来存放变换法向量矩阵
      'varying vec4 v_Color;\\n' + //声明varying变量v_Color,用来向片元着色器传值顶点颜色信息
      'varying vec3 v_Normal;\\n' + //声明varying变量v_Normal,用来向片元着色器传值顶点法向量
      'varying vec3 v_Position;\\n' + //声明varying变量v_Position,用来向片元着色器传值顶点坐标
      'void main(){\\n' +
      '  gl_Position = u_MvpMatrix * a_Position;\\n' + //将模型视图投影组合矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
      '  v_Normal = normalize(vec3(u_NormalMatrix * a_Normal));\\n' + //将变换后的法向量计算后并归一化,再传给片元着色器
      '  v_Position = vec3(u_ModelMatrix * a_Position);\\n' + //将计算后的顶点坐标传给片元着色器
      '  v_Color = a_Color;\\n' + //将顶点颜色传给片元着色器
      '}\\n';

    //片元着色器
    var FSHADER_SOURCE = '' +
      '#ifdef GL_ES\\n' +
      ' precision mediump float;\\n' + // 设置精度
      '#endif\\n' +
      'uniform vec3 u_PointLightColor;\\n' + //声明uniform变量u_PointLightColor,用来存放点光源颜色
      'uniform vec3 u_PointLightPosition;\\n' + //声明uniform变量u_PointLightPosition,用来存放点光源位置
      'uniform vec3 u_AmbientLightColor;\\n' + //声明uniform变量u_AmbientLightColor,用来存放环境光颜色
      'varying vec4 v_Color;\\n' + //声明varying变量v_Color,用来接收顶点着色器传送的片元颜色信息
      'varying vec3 v_Normal;\\n' + //声明varying变量v_Normal,用来接收顶点着色器传送的顶点法向量
      'varying vec3 v_Position;\\n' + //声明varying变量v_Position,用来接收顶点着色器传送的顶点坐标
      'void main(){\\n' +
      '  vec3 normal = normalize(v_Normal);\\n' + //对法线进行归一化处理,因为内插后长度不一定是1.0
      '  vec3 lightDirection = normalize(u_PointLightPosition - v_Position);\\n' + //计算点光源照射物体表面的光线方向,并归一化
      '  float nDotL = max(dot(lightDirection, normal), 0.0);\\n' + //计算光线方向和法向量点积
      '  vec3 diffuse = u_PointLightColor * vec3(v_Color) * nDotL;\\n' + //计算漫反射光的颜色
      '  vec3 ambient = u_AmbientLightColor * vec3(v_Color);\\n' + //计算环境漫反射光的颜色
      '  gl_FragColor = vec4(diffuse + ambient, v_Color.a);\\n' + //将漫反射光的颜色和环境漫反射光的颜色相加的结果赋值给内置变量gl_FragColor
      '}\\n';

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      gl.program = program
      //返回程序program对象
      return program;
    }

    function init() {
      //通过getElementById()方法获取canvas画布
      var canvas = document.getElementById('webgl');
      //通过方法getContext()获取WebGL上下文
      var gl = canvas.getContext('webgl');
      //初始化着色器
      if (!initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('初始化着色器失败');
        return;
      }

      // 设置canvas的背景色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //初始化顶点坐标和顶点颜色
      var n = initVertexBuffers(gl)

      setMatrixAndDraw(gl, n)

    }

    //设置矩阵并绘图
    function setMatrixAndDraw(gl, n) {

      //开启隐藏面消除
      gl.enable(gl.DEPTH_TEST)

      //清空颜色和深度缓冲区
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      var mvpMatrix = new Matrix4() //创建模型视图投影矩阵 
      var modelMatrix = new Matrix4() //创建模矩阵 
      var normalMatrix = new Matrix4() //创建变换法向量矩阵

      mvpMatrix.setPerspective(30, 1, 1, 100) //设置透视投影矩阵
      mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0) //设置视点、视线和上方向 

      modelMatrix.rotate(0, 0, 1, 0) //设置模型矩阵-绕Z轴旋转90度

      mvpMatrix.multiply(modelMatrix) //透视投影矩阵与模型矩阵相乘

      //根据模型矩阵计算变换法向量的矩阵
      normalMatrix.setInverseOf(modelMatrix)
      normalMatrix.transpose()

      //获取顶点着色器uniform变量u_MvpMatrix、u_ModelMatrix、u_NormalMatrix的存储地址
      var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix')
      var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
      var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix')

      //给顶点着色器uniform变量u_MvpMatrix、u_ModelMatrix、u_NormalMatrix传值
      gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements)
      gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
      gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements)


      //获取顶点着色器uniform变量u_PointLightColor、u_PointLightPosition、u_AmbientLightColor的存储地址
      var u_PointLightColor = gl.getUniformLocation(gl.program, 'u_PointLightColor')
      var u_PointLightPosition = gl.getUniformLocation(gl.program, 'u_PointLightPosition')
      var u_AmbientLightColor = gl.getUniformLocation(gl.program, 'u_AmbientLightColor')

      //给顶点着色器uniform变量u_PointLightColor、u_PointLightPosition、u_AmbientLightColor传值
      gl.uniform3f(u_PointLightColor, 1.0, 1.0, 0.0)
      gl.uniform3f(u_PointLightPosition, 1.2, 1.8, 2.0)
      gl.uniform3f(u_AmbientLightColor, 0.2, 0.2, 0.2)

      //绘制立方体
      gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0)
    }

    //初始化顶点坐标和顶点颜色
    function initVertexBuffers(gl) {

      var v0 = [1.0, 1.0, 1.0]
      var v1 = [-1.0, 1.0, 1.0]
      var v2 = [-1.0, -1.0, 1.0]
      var v3 = [1.0, -1.0, 1.0]
      var v4 = [1.0, -1.0, -1.0]
      var v5 = [1.0, 1.0, -1.0]
      var v6 = [-1.0, 1.0, -1.0]
      var v7 = [-1.0, -1.0, -1.0]

      //顶点
      var vertices = new Float32Array([
        ...v0, ...v1, ...v2, ...v3, // 前
        ...v0, ...v3, ...v4, ...v5, // 右
        ...v0, ...v5, ...v6, ...v1, // 上
        ...v1, ...v6, ...v7, ...v2, // 左
        ...v7, ...v4, ...v3, ...v2, // 下
        ...v4, ...v7, ...v6, ...v5 // 后
      ])

      var fontColor = [1.0, 0.0, 0.0]
      var backColor = [1.0, 0.0, 0.0]
      var leftColor = [1.0, 0.0, 0.0]
      var rightColor = [1.0, 0.0, 0.0]
      var topColor = [1.0, 0.0, 0.0]
      var downColor = [1.0, 0.0, 0.0]
      // 顶点的颜色
      var colors = new Float32Array([
        ...fontColor, ...fontColor, ...fontColor, ...fontColor, // v0-v1-v2-v3 前
        ...rightColor, ...rightColor, ...rightColor, ...rightColor, // v0-v3-v4-v5 右
        ...topColor, ...topColor, ...topColor, ...topColor, // v0-v5-v6-v1 上
        ...leftColor, ...leftColor, ...leftColor, ...leftColor, // v1-v6-v7-v2 左
        ...downColor, ...downColor, ...downColor, ...downColor, // v7-v4-v3-v2 下
        ...backColor, ...backColor, ...backColor, ...backColor, // v4-v7-v6-v5 后
      ]);

      var font = [0.0, 0.0, 1.0]
      var back = [0.0, 0.0, -1.0]
      var left = [-1.0, 0.0, 0.0]
      var right = [1.0, 0.0, 0.0]
      var top = [0.0, 1.0, 0.0]
      var down = [0.0, -1.0, 0.0]
      // 法向量
      var normals = new Float32Array([
        ...font, ...font, ...font, ...font, // v0-v1-v2-v3 前
        ...right, ...right, ...right, ...right, // v0-v3-v4-v5 右
        ...top, ...top, ...top, ...top, // v0-v5-v6-v1 上
        ...left, ...left, ...left, ...left, // v1-v6-v7-v2 左
        ...down, ...down, ...down, ...down, // v7-v4-v3-v2 下
        ...back, ...back, ...back, ...back, // v4-v7-v6-v5 后
      ]);

      // 绘制的索引
      var indices = new Uint8Array([
        0, 1, 2, 0, 2, 3, // 前
        4, 5, 6, 4, 6, 7, // 右
        8, 9, 10, 8, 10, 11, // 上
        12, 13, 14, 12, 14, 15, // 左
        16, 17, 18, 16, 18, 19, // 下
        20, 21, 22, 20, 22, 23 // 后
      ]);

      if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position')) {
        return -1
      }

      if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) {
        return -1
      }

      if (!initArrayBuffer(gl, normals, 3, gl.FLOAT, 'a_Normal')) {
        return -1
      }

      //创建缓冲区对象
      var indexBuffer = gl.createBuffer()

      //将顶点索引写入缓冲区对象
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW)

      return indices.length

    }

    function initArrayBuffer(gl, data, num, type, attribute) {
      //创建缓冲区对象
      var buffer = gl.createBuffer();
      //将顶点坐标和顶点颜色信息写入缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)

      //获取顶点着色器attribute变量存储地址, 分配缓存并开启
      var a_Attribute = gl.getAttribLocation(gl.program, attribute);
      gl.vertexAttribPointer(a_Attribute, num, type, false, 0, 0)
      gl.enableVertexAttribArray(a_Attribute)

      return true
    }

    init()
  </script>
</body>

</html>

© 版权声明
THE END
喜欢就支持一下吧
点赞786 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容