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
}