Webgl的一些常用基础语法

通常在使用webgl绘制三维场景时，并不直接基于webgl的API开发，因为太过底层，实现个简单的场景都需要花费很多精力和代码实现，所以会借助three.js或者Cesium.js实现
本文整理下常用的一些基础语法，在学习实践中用到的时候可以翻看回忆下
使用实例可以看本文集其他示例

获取上下文

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值。

参数获取

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
}