01-WebGL着色器

image.png

要使用WebGL进行绘图就必须使用着色器。在代码中，着色器程序是以字符串的形式“嵌入”在JavaScript文件中的，在程序真正开始运行前就已经设置好了。

WebGL需要两种着色器：顶点着色器和片元着色器。

• 顶点着色器

用来描述顶点的位置、颜色等特性。顶点是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

• 片元着色器

进行逐片元处理过程如光照的程序。片元是一个WebGL术语，你可以将其理解为像素。

• GLES中的数据类型

类型	描述
float	表示浮点数
vec4	表示由四个浮点数组成的矢量

• 片元着色器的内置变量

类型和变量名	描述
vec4 gl_FragColor	指定片元颜色（RGBA格式）

// Vertex shader program
var VSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
  '  gl_PointSize = 10.0;\n' +                    // Set the point size
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
  '}\n';

function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById('webgl');

  // Get the rendering context for WebGL
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Draw a point
  gl.drawArrays(gl.POINTS, 0, 1);
}

• gl.drawArrays()

gl.drawArrays(gl.POINTS, 0, 1);

gl.drawArrays()是一个强大的函数，它可以用来绘制各种图形。因为我们绘制的是单独的点，所以设置第1个参数为gl.POINTS；设置第2个参数为0，表示从第1个顶点开始画起；第3个参数count为1，表示在这个简单的程序中仅绘制了1个点。

当程序调用gl.drawArrays()时，顶点着色器将被执行count次，每次处理一个顶点。

WebGL程序包括运行在浏览器中的JavaScirpt和运行在WebGL系统的着色器程序这两部分。

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

gl.vertexAttrib3f()是一系列同族函数中的一个，该系列函数的任务就是从JavaScript向顶点着色器中的attribute变量传值。gl.vertexAttrib1f()传输1个单精度值(v0)，gl.vertexAttrib2f()传输2个值(v0和v1)，而gl.vertexAttrib4f()传输4个值(v0、v1、v2和v3)

3f中的3代表参数个数，f表示浮点数，如果是i则表示整数。如果函数名后面跟着一个v,就表示函数也可以接收数组作为参数。在这种情况下，函数名中的数字表示数组中的元素个数。

var positions = new Float32Array([1.0,2.0,3.0,1.0])
gl.vertexAttrib4fv(a_Position, positions)