着色器的认识

知识了解：

着色器：

顶点着色器: 用来描述顶点的特性,如位置、颜色等，其中，顶点：是指二维或三维空间中的一个点比如交点或者端点。

片元着色器：用来进行逐片元处理操作，比如光照、颜色叠加等，其中，片元：可以理解为像素，逐片元处理就是逐个对像素进行处理。

初始化着色器：

initShaders (gl, vshader, fshader)：在WebGL系统内部建立和初始化着色器。

gl:指定渲染上下文

vshader:指定顶点着色器程序代码(字符串)

fshader:指定片元着色器程序代码(字符串)

html页面和JavaScript脚本：

html 复制代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="./lib/webgl-utils.js"></script>
  <script src="./lib/webgl-debug.js"></script>
  <script src="./lib/cuon-utils.js"></script>
  <script src="./js/helloPoint.js"></script>
</head>

<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>

</html>

javascript 复制代码

// helloPoint.js
// 6-13行是是顶点着色器程序（GLS ES语言）：作为字符串被存储在变量vshader_source中。其中顶点着色器程序本身从main()开始运行，和c语言程序一样。
// （逐点操作)顶点着色器: 用来描述顶点的特性,如位置、颜色等
// 顶点：是指二维或三维空间中的一个点比如交点或者端点
/**
 * GLSE中的数据类型
 * @type float:表示浮点数
 * @type vec4:表示由四个浮点数组成的矢量。矢量可译为向量，是既有大小又有方向的量
 * 齐次坐标使用如下的符号描述:(x,y,z,w)。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果齐次坐标的第4个分量是1,你就可以将它当做三维坐标来使用。w的值必须是大于等于0的。如果w趋近于0,那么它所表示的点将趋近无穷远,所以在齐次坐标系中可以有无穷的概念。齐次坐标的存在,使得用矩阵乘法来描述顶点变换成为可能,三维图形系统在计算过程中,通常使用齐次坐标来表示顶点的三维坐标。
 * @type vec3:表示由三个浮点数组成的矢量
 * 注意,如果向某类型的变量赋一个不同类型的值,就会出错。
 */
var vshader_source = `
void main(){
  // 设置点的位置,必需赋值,否则无法正常工作
  gl_Position = vec4(0.0,0.0,0.0,1.0);
  // 设置点的大小尺寸,这个是可选的,默认是1.0
  gl_PointSize = 10.0;
}
`
// 17-22行是是片元着色器程序（GLS ES语言）：作为字符串被存储在变量fshader_source中
// （逐片元操作)片元着色器：用来进行逐片元处理操作，比如光照、颜色叠加等
// 片元：可以理解为像素，逐片元处理就是逐个对像素进行处理
var fshader_source = `
void main(){
  //设置点颜色
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
//以上着色器：以JavaScript字符串形式编写的着色器语言程序
// 以下是主程序（JavaScript语言）
function main () {
  // 获取canvas元素
  var canvas = document.getElementById('canvas')
  // 获取webGl绘图上下文
  var gl = getWebGLContext(canvas)

  if (!gl) {
    console.log('获取webGl绘图上下文失败')
    return
  }
  // 初始化着色器
  /**
   * initShaders (gl, vshader, fshader)
   * 在WebGL系统内部建立和初始化着色器。
   * 参数
   *  @param gl:指定渲染上下文
   *  @param vshader:指定顶点着色器程序代码(字符串)
   *  @param fshader:指定片元着色器程序代码(字符串)
   * 返回值
   * @return true:初始化着色器成功
   * @return false:初始化着色器失败
   */
  // 可以简单理解gl_Position和gl_PointSize两个全局变量从顶点着色器传递到片元着色器
  if (!initShaders(gl, vshader_source, fshader_source)) {
    console.log('初始化着色器失败')
    return
  }
  // 设置<canvas>背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  // 清空<canvas>
  gl.clear(gl.COLOR_BUFFER_BIT)
  // 绘制一个点
  // gl.drawArrays (mode, first, count)
  /**
   * gl.drawArrays (mode, first, count)
   * 执行顶点着色器,按照mode参数指定的方式绘制图形。
   * 参数
   * mode 指定绘制的方式,可接收以下常量符号:gl.POINTS,  gl.LINES, gl.LINE STRIP, gl.LINE LOOP, gl.TRIANGLES, gl.TRIANGLE STRIP, gl.TRIANGLE FAN 
   * first 指定从哪个顶点开始绘制(整型数)
   * count 指定绘制需要用到多少个顶点(整型数)
   * 返回值 无 
   * 错误 
   * INVALID ENUM 传入的mode参数不是前述参数之一
   * INVALID VALUE  参数first或count是负数
   */
  gl.drawArrays(gl.POINTS, 0, 1)
}

着色器的认识

知识了解：

html页面和JavaScript脚本：

效果：