Webgl的一些常用基础语法

本文整理下常用的一些基础语法，在学习实践中用到的时候可以翻看回忆下
使用实例可以看本文集其他示例

获取上下文

var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

contextType(上下文类型)可选值为2d、webgl、webgl2，对应二三维画布
contextAttributes(上下文属性)，webgl对应的可选值有：

• alpha: (boolean)值表明canvas包含一个alpha缓冲区。
• antialias: (boolean)值表明是否开启抗锯齿。
• depth: (boolean)值表明绘制缓冲区包含一个深度至少为16位的缓冲区。
• failIfMajorPerformanceCaveat: 表明在一个系统性能低的环境是否创建该上下文的boolean值。
• powerPreference: 指示浏览器在运行WebGL上下文时使用相应的GPU电源配置。 可能值如下:
  "default":自动选择，默认值。
  "high-performance": 高性能模式。
  "low-power": 节能模式。
• premultipliedAlpha: 表明排版引擎讲假设绘制缓冲区包含预混合alpha通道的boolean值。
• preserveDrawingBuffer: 如果这个值为true缓冲区将不会被清除，会保存下来，直到被清除或被使用者覆盖。
• stencil: 表明绘制缓冲区包含一个深度至少为8位的模版缓冲区boolean值。

创建着色器(WebGLShader)

var shader  = gl.createShader(shaderType);

shaderType的可选值为 gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER

挂接GLSL源代码

gl.shaderSource(vertexShader, vsSource);
gl.shaderSource(fragmentShader, fsSource);

shader为上一步通过gl.createShader()创建的着色器
sourceCode为对应的GLSL源代码，是字符串格式

编译着色器

gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

参数上一步通过gl.createShader()创建的着色器

创建程序（WebGLProgram）

var program = gl.createProgram()

连接程序和着色器

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

绘制图形

gl.drawElements(mode, count, type, offset);

mode：枚举类型 ，指定要渲染的图元类型。可以是以下类型:

• gl.POINTS: 画单独的点。
• gl.LINE_STRIP: 画一条直线到下一个顶点。
• gl.LINE_LOOP: 绘制一条直线到下一个顶点，并将最后一个顶点返回到第一个顶点.
• gl.LINES: 在一对顶点之间画一条线.
• gl.TRIANGLE_STRIP
• gl.TRIANGLE_FAN
• gl.TRIANGLES: 为一组三个顶点绘制一个三角形.

count：整数型 ，指定要渲染的元素数量.
type：枚举类型 ，指定元素数组缓冲区中的值的类型。可能的值是:

• gl.UNSIGNED_BYTE
• gl.UNSIGNED_SHORT
  当使用 OES_element_index_uint 扩展时:
• gl.UNSIGNED_INT

offset： 字节单位， 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数.

删除着色器

gl.deleteShader(shader);

删除程序

gl.deleteProgram(program);

获取程序参数

gl.getProgramParameter(program, pname);

pname为要获取的参数，可选值有：

• gl.DELETE_STATUS返回GLboolean，指示是否将程序标记为删除。
• gl.LINK_STATUS返回GLboolean，指示最后一次链接操作是否成功。
• gl.VALIDATE_STATUS返回GLboolean，指示上次验证操作是否成功。
• gl.ATTACHED_SHADERS返回GLint，指示程序附加着色器的数量。
• gl.ACTIVE_ATTRIBUTES返回GLint，指示程序的活动属性变量数。
• gl.ACTIVE_UNIFORMS返回GLint，指示程序的活动一致变量数。

获取着色器参数

gl.getShaderParameter(shader, pname);

pname为要获取的参数，可选值有：

• gl.DELETE_STATUS:标示着色器是否被删除，
• gl.COMPILE_STATUS: 标示着色器是否编译成功，
• gl.SHADER_TYPE: 标示着色器类型，是顶点着色器 还是片段着色器

参数获取

gl.getParameter(pname)

pname:一个指定要返回哪个参数值的 GLenum。主要是webgl定义的一些常量，
可选值太多了，挑几个：

• gl.STENCIL_BITS：
• gl.ALIASED_LINE_WIDTH_RANGE:得到一条线的可用宽度范围。返回一个长度为2的数组。如：[1,1]
• gl.ALIASED_POINT_SIZE_RANGE:获取使用gl.POINTS 绘制的点的大小。如：[1,1024]
• gl.MAX_VIEWPORT_DIMS ：获取最大视口尺寸。如：[32767,32767]

获取指定着色器的对应参数的范围和精度

gl.getShaderPrecisionFormat(shaderType, precisionType);

shaderType:可选gl.FRAGMENT_SHADER片元着色器或者gl.VERTEX_SHADER顶点着色器
precisionType:要获取的类型，包括：gl.LOW_FLOAT, gl.MEDIUM_FLOAT, gl.HIGH_FLOAT, gl.LOW_INT, gl.MEDIUM_INT，或gl.HIGH_INT
返回示例：

var highpFloat = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
{
  rangeMin: 127
  rangeMax: 127
  precision: 23
}

获取上下文参数对象

var glAttr = gl.getContextAttributes();
{ 
  alpha: true, 
  antialias: true, 
  depth: true, 
  failIfMajorPerformanceCaveat: false, 
  premultipliedAlpha: true, 
  preserveDrawingBuffer: false, 
  stencil: false 
}

返回的结果对象其实就是在获取上下文时指定的参数及默认组成的对象

查询可用的扩展程序

var available_extensions = gl.getSupportedExtensions();

返回一个字符串数组，每个受支持的扩展都返回一个字符串。

启用扩展

var float_texture_ext = gl.getExtension('OES_texture_float');

返回值为null表示扩展不受支持，或者扩展对象不受支持。
返回值为具体扩展对象，即为启用成功，并可以使用此扩展对象提供的方法、属性或常量。

将通用顶点索引绑定到属性变量

gl.bindAttribLocation(program, index, name);

program:要绑定的WebGLProgram 对象。
index:GLuint 指定要绑定的通用顶点的索引。
name:DOMString指定要绑定到通用顶点索引的变量的名称。 名称将保留供WebGL使用。

获取着色器信息日志

gl.getShaderInfoLog(shader);

返回包含诊断消息、警告消息和有关上次编译操作的其他信息。