【WebGL系列-02】创建program上下文

WebGL程序program对象的创建

program对象由顶点着色器对象和片元着色器对象构成，因此，创建program对象包含了两部分，一个是着色器对象的创建，一个是program对象的创建。

总体流程

1. 创建顶点着色器对象
2. 创建片元着色器对象
3. 创建program对象
4. 将顶点着色器和片元着色器添加到程序中
5. 将程序链接到webgl上下文
6. 使用创建的program对象

着色器对象的创建

着色器对象的创建包含三步：

1. 创建着色器对象
2. 将着色器源码送入对象
3. 编译着色器

代码实现

/**
 * 创建shader对象
 * @param {*} gl webgl上下文对象
 * @param {*} type 创建的shader的类型，顶点着色器为gl.VERTEX_SHADER，片元着色器为gl.FRAGMENT_SHADER
 * @param {*} source glsl源码
 */
function loadShader(gl, type, source) {
  // 创建shader
  const shader = gl.createShader(type);
  // 将glsl源码送入shader对象
  gl.shaderSource(shader, source);
  // 编译shader
  gl.compileShader(shader);

  // 检查shader是否编译成功
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert("编译shader时发生错误：" + gl.getShaderInfoLog(shader));
    // 编译失败，删除shader
    gl.deleteShader(shader);
    return null;
  }

  return shader;
}

接口

WebGLShader WebGLRenderingContext.createShader(type)

创建一个Shader对象

• type：为WebGLRenderingContext.VERTEX_SHADER和WebGLRenderingContext.FRAGMENT_SHADER中的一个，表示创建的是顶点着色器还是片元着色器

void WebGLRenderingContext.shaderSource(WebGLShader shader, string source)

设置WebGLShader着色器对象的GLSL代码

• shader：用于设置程序代码的WebGLShader
• source：包含glsl程序代码的字符串

void WebGLRenderingContext.compileShader(WebGLShader shader)

编译GLSL着色器，使其称为一个二进制数据，然后被WebGLProgram所使用

• shader：WebGLShader，顶点着色器或片元着色器

Object WebGLRenderingContext.getShaderParameter(WebGLShader shader, pname)

返回给定的着色器信息

• shader：需要获取信息的着色器对象
• pname：指定要查询的信息的属性名称，可以是以下值：
  • WebGLRenderingContext.DELETE_STATUS：标识着色器是否被删除，删除GL_TRUE，未删除GL_FALSE
  • WebGLRenderingContext.COMPILE_STATUS：标识着色器是否编译成功，成功GL_TRUE，不成功GL_FALSE
  • WebGLRenderingContext.SHADER_TYPE：标识着色器的类型
    • WebGLRenderingContext.VERTEX_SHADER：顶点着色器
    • WebGLRenderingContext.FRAGMENT_SHADER：片元着色器

Object WebGLRenderingContext.getShaderInfoLog(WebGLShader shader)

获取着色器的信息日志，包含警告、debug和编译信息

• shader：需要获取信息的着色器对象

void WebGLRenderingContext.deleteShader(WebGLShader shader)

删除参数提供的shader对象，如果该对象已经被删除，这个方法无效

• shader：需要删除的shader对象

DOMString WebGLRenderingContext.getShaderSource(shader)

以DOMString的形式返回shader的源码

• shader：WebGLShader，要获取源码的shader

创建着色器程序对象

创建着色器程序对象需要四步：

1. 创建program对象
2. 将着色器程序与着色器对象绑定
3. 将上下文链接到着色器程序
4. 使用着色器程序

代码实现

/**
 * 初始化着色器程序
 * @param {*} gl webgl上下文
 * @param {*} vsSource 顶点着色器源码字符串
 * @param {*} fsSource 片元着色器源码字符串
 */
function initShaderProgram(gl, vsSource, fsSource) {
  // 创建着色器对象
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

  // 创建着色器程序
  const shaderProgram = gl.createProgram();
  // 将着色器程序与shader绑定
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);

  // 将上下文链接到着色器程序
  gl.linkProgram(shaderProgram);

  // gl.validateProgram(shaderProgram);

  // 检查着色器程序是否创建成功
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("初始化着色器程序错误：" + gl.getProgramInfoLog(shaderProgram));
    // 如果创建失败，则删除着色器对象和着色器程序对象
    gl.deleteProgram(shaderProgram);
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);

    return null;
  }

  // 使用着色器程序
  gl.useProgram(shaderProgram);

  return shaderProgram;
}

接口

WebGLProgram WebGLRenderingContext.createProgram()

初始化一个WebGLProgram对象

void WebGLRenderingContext.attachShader(program, shader)

向WebGLProgram中添加一个着色器

• program：WebGLProgram对象
• shader：WebGLShader对象

void WebGLRenderingContext.linkProgram(program)

链接给定的WebGLProgram，完成为程序的片元顶点着色器准备GPU代码的过程

• program：WebGLProgram，指定的着色器程序

Object WebGLRenderingContext.getProgramParameter(program, pname)

返回program的信息

• program：指定的program
• pname：Glenum，可以是以下类型：
  • WebGLRenderingContext.DELETE_STATUS：GLboolean，是否被删除
  • WebGLRenderingContext.LINK_STATUS：GLboolean，是否成功地链接
  • WebGLRenderingContext.VALIDATE_STATUS：GLboolean，最后一次验证操作是否成功
  • WebGLRenderingContext.ATTACHED_SHADERS：GLint，返回添加的着色器的数量，之后可以使用WebGLRenderingContext.getAttachedShaders()获取这些shader
  • WebGLRenderingContext.ACTIVE_ATTRIBUTES：GLint，返回shader中激活的attribute变量的数量，之后可以使用WebGLRenderingContext.getActiveAttrib()方法获取这些变量
  • WebGLRenderingContext.ACTIVE_UNIFORMS：GLint，返回shader中激活的uniform变量的数量，之后可以使用WebGLRenderingContext.getActiveUniform()方法获取这些变量
  • WebGLRenderingContext.TRANSFORM_FEEDBACK_BUFFER_MODE [ WebGL2 only ]：GLenum，返回transform feedback激活时的buffer mode
    • WebGLRenderingContext.SEPARATE_ATTRIBS
    • WebGLRenderingContext.INTERLEAVED_ATTRIBS
  • WebGLRenderingContext.TRANSFORM_FEEDBACK_VARYINGS [ WebGL2 only ]：GLint，indicating the number of varying variables to capture in transform feedback mode
  • WebGLRenderingContext.ACTIVE_UNIFORM_BLOCKS [ WebGL2 only ]：GLint， indicating the number of uniform blocks containing active uniforms.

Object WebGLRenderingContext.getProgramInfoLog(program)

获取program中的信息，包括在link中的错误以及合法性的检查

• program：WebGLProgram对象

void WebGLRenderingContext.deleteProgram(program)

删除一个program，如果已经删除，则不会产生任何效果

• program：WebGLProgram，需要删除的program

void WebGLRenderingContext.useProgram(program)

将定义好的program对象添加到当前的渲染状态中

• program：WebGLProgram对象

void WebGLRenderingContext.validateProgram(program)

检查program是否链接成功，同时检查能否在当前webgl中使用

注意一点，在WebGLProgram对象创建成功后，加入的WebGLShader对象就没有用了，可以调用deleteShader将其删除，防止占用内内存