WebGL笔记 第二章 着色器

首先介绍一下着色器的相关知识

1. 着色器是什么？（我这也是从网上抄的）

   • Shader(着色器)是用来实现图像渲染的，用来替代固定渲染管线的可编程程序。
   • 着色器替代了传统的固定渲染管线，可以实现3D图形学计算中的相关计算，由于其可编程性，可以实现各种各样的图像效果而不用受显卡的固定渲染管线限制。这极大的提高了图像的画质。

2. WebGL需要两种着色器

   • 顶点着色器（Vertex shader）：
     
     • 用来描述顶点特性（位置，颜色等）。
   • 片元着色器（Fragment shader）：
     
     • 进行逐偏远处理过程如光照的程序，可以理解为像素。
   • 顶点着色器主要用来计算每个定点投影在视平面上的位置，但是也可以用来进行一些颜色的计算并将结果传送给片元着色器。 片元着色器则决定了最终显示出来的每个像素的颜色。

3. 执行流程
   
   首先运行JavaScript程序，调用WebGL的相关方法，然后顶点着色器和片元着色器就会执行，在颜色缓冲区内进行绘制，这时就清空了绘图区域，最后颜色缓冲区中的内容会自动在浏览器的<canvas> 上显示出来。

着色器程序

//顶点着色器程序var VSHADER_SOURCE =   'void main() {\n' +  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + //设置坐标  '  gl_PointSize = 10.0;\n' + //设置尺寸  '}\n'; //片元着色器程序var FSHADER_SOURCE =   'void main() {\n' +  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + //设置颜色  '}\n';function main() {  // 获取<canvas>元素  var canvas = document.getElementById('webgl');  // 获取WebGL绘图上下文  var gl = getWebGLContext(canvas);  if (!gl) {    console.log('Failed to get the rendering context for WebGL');    return;  }  // 初始化着色器  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {    console.log('Failed to intialize shaders.');    return;  }  // 设置<canvas>的背景色  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // 清空<canvas>  gl.clear(gl.COLOR_BUFFER_BIT);  // 绘制一个点  gl.drawArrays(gl.POINTS, 0, 1);}

• 初始化着色器

  • 初始化之前，将着色器代码从JavaScript传给WebGL系统，并建立着色器。
    WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统中的着色器程序这两部分（着色器不是运行在JavaScript中）。
  • 顶点着色器指定点的位置(0.0, 0.0, 0.0)和尺寸(10.0)。
  • 片元着色器指定点的颜色：红色(1.0, 0.0, 0.0, 1.0)。

• 顶点着色器

  • 必须包含一个main() 函数，没有返回值，没有参数。
  • 两个变量 gl_Position 顶点位置， gl_PointSize 点的尺寸（像素数）
  • gl_Position必须赋值，gl_PointSize 可以不用赋值，默认取值为1.0。