【WebGL】WebGL API 詳解

• 2020 年 3 月 26 日
• 筆記

基於 WebGL Specifications 最全面的API釋疑。

類型以及對象定義

這部分內容主要定義一部分類型和數據結構。

typedef unsigned long  GLenum;  typedef boolean        GLboolean;  typedef unsigned long  GLbitfield;    typedef byte           GLbyte;  typedef short          GLshort;  typedef long           GLint;  typedef long           GLsizei;  typedef long long      GLintptr;  typedef long long      GLsizeiptr;    // 這個類型應該是 無符號整型 8位  // 但是Web IDL中並不存在這種類型  // 所以用 octet 代替 佔位  typedef octet          GLubyte;  typedef unsigned short GLushort;  typedef unsigned long  GLuint;  typedef unrestricted float GLfloat;  typedef unrestricted float GLclampf;    // 由 WebGLContextAttributes 引用  enum WebGLPowerPreference { "default", "low-power", "high-performance" };    // 獲取上下文時支持的參數  // getContext('webgl', <WebGLContextAttributes>)  dictionary WebGLContextAttributes {      boolean alpha = true;      boolean depth = true;      boolean stencil = false;      boolean antialias = true;      boolean premultipliedAlpha = true;      boolean preserveDrawingBuffer = false;      WebGLPowerPreference powerPreference = "default";      boolean failIfMajorPerformanceCaveat = false;  };    // [Exposed=(Window,Worker)] 代表可以同時在主線程和後台線程使用本對象    [Exposed=(Window,Worker)]  interface WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLBuffer : WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLFramebuffer : WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLProgram : WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLRenderbuffer : WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLShader : WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLTexture : WebGLObject {};    [Exposed=(Window,Worker)]  interface WebGLUniformLocation {};    [Exposed=(Window,Worker)]  interface WebGLActiveInfo {      readonly attribute GLint size;      readonly attribute GLenum type;      readonly attribute DOMString name;  };    [Exposed=(Window,Worker)]  interface WebGLShaderPrecisionFormat {      readonly attribute GLint rangeMin;      readonly attribute GLint rangeMax;      readonly attribute GLint precision;  };    typedef (ImageBitmap or           ImageData or           HTMLImageElement or           HTMLCanvasElement or           HTMLVideoElement or           OffscreenCanvas) TexImageSource;    typedef ([AllowShared] Float32Array or sequence<GLfloat>) Float32List;  typedef ([AllowShared] Int32Array or sequence<GLint>) Int32List;    interface mixin WebGLRenderingContextBase {      // 內容整理到 'WebGLRenderingContext 對象'  }    interface mixin WebGLRenderingContextOverloads {      // 內容整理到 'WebGLRenderingContext 對象'  }    [Exposed=(Window,Worker)]  interface WebGLRenderingContext {      // 內容整理到 'WebGLRenderingContext 對象'  };  WebGLRenderingContext includes WebGLRenderingContextBase;  WebGLRenderingContext includes WebGLRenderingContextOverloads;    [Exposed=(Window,Worker),   Constructor(DOMString type,   optional WebGLContextEventInit eventInit)]  interface WebGLContextEvent : Event {      readonly attribute DOMString statusMessage;  };    // EventInit is defined in the DOM4 specification.  dictionary WebGLContextEventInit : EventInit {      DOMString statusMessage = "";  };  

WebGLRenderingContext 對象

屬性數據

[Exposed=Window] readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;  // 可以在 Web Work 上使用 canvas api  // 需要調用 canvas.transferControlToOffscreen() 將渲染權轉移給後台線程  [Exposed=Worker] readonly attribute OffscreenCanvas canvas;  readonly attribute GLsizei drawingBufferWidth;  readonly attribute GLsizei drawingBufferHeight;  

緩衝區相關方法

清理渲染緩衝區。

// 緩衝區類型  // 為 gl.clear 的參數  const GLenum DEPTH_BUFFER_BIT               = 0x00000100;  const GLenum STENCIL_BUFFER_BIT             = 0x00000400;  const GLenum COLOR_BUFFER_BIT               = 0x00004000;    // 清理指定緩存內容, 可以通過或運算符一次清理多個緩衝區  // @param mask 顏色緩衝區（COLOR_BUFFER_BIT） | 深度緩衝區（DEPTH_BUFFER_BIT） | 模板緩衝區（STENCIL_BUFFER_BIT）  void clear(GLbitfield mask);    // 將指定緩衝區設置為指定的值（參數範圍都是 0.0 - 1.0）  // clearColor 指定的值 默認 0.0, 0.0, 0.0, 0.0  // clearDepth 指定的值 默認 1.0  // clearStencil 指定的值 默認 0  void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);  void clearDepth(GLclampf depth);  void clearStencil(GLint s);  

繪製相關方法

繪製緩存中的頂點數據。

// 繪製的類型  // 為 gl.drawArrays、gl.drawElements 第一個參數  const GLenum POINTS                         = 0x0000;  const GLenum LINES                          = 0x0001;  const GLenum LINE_LOOP                      = 0x0002;  const GLenum LINE_STRIP                     = 0x0003;  const GLenum TRIANGLES                      = 0x0004;  const GLenum TRIANGLE_STRIP                 = 0x0005;  const GLenum TRIANGLE_FAN                   = 0x0006;    // 執行繪製， 按照mode參數指定的方式繪製圖形  // @param model 繪製模式。  // @param first 指定從哪個定點開始繪製  // @param count 指定繪製需要用到多少個頂點  void drawArrays(GLenum mode, GLint first, GLsizei count);    // 執行繪製，按照mode參數制定的方式，根據綁定到 ELEMENT_ARRAY_BUFFER 的緩衝區中的頂點索引繪製圖形  // @param model 繪製模式。  // @param count 指定繪製頂點的個數  // @param type 指定索引值數據類型。包括：UNSIGNED_BYTE、UNSIGNED_SHORT、UNSIGNED_INT  // @param offset 指定索引數組中繪製的偏移位置，以位元組為單位  void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);  

着色器 attribute 相關

// 獲取由 name 參數指定的 attribute 變量存儲地址  // @param program 指定包含頂點或者片元着色器的程序對象  // @param name 獲取其存儲的 attribute 變量名稱，最大長度256位元組  [WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);    // 綁定頂點索引到屬性變量  // 使用緩衝區數據的時候需要用到的方法  // @param index 指定要綁定的通用頂點的索引 這個值直接賦值給 vertexAttribPointer 的 index 參數  // @param name 指定變量名  // 這裡的 index 和 getAttribLocation 返回值是一樣的  void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);    // 將數據傳給由index參數指定的attribute變量  void vertexAttrib1f(GLuint index, GLfloat x);  void vertexAttrib2f(GLuint index, GLfloat x, GLfloat y);  void vertexAttrib3f(GLuint index, GLfloat x, GLfloat y, GLfloat z);  void vertexAttrib4f(GLuint index, GLfloat x, GLfloat y, GLfloat z, GLfloat w);  // 接收參數為 Float32Array 數組  void vertexAttrib1fv(GLuint index, Float32List values);  void vertexAttrib2fv(GLuint index, Float32List values);  void vertexAttrib3fv(GLuint index, Float32List values);  void vertexAttrib4fv(GLuint index, Float32List values);  

着色器 uniform 相關

// 獲取指定名稱的 uniform 變量存儲位置  // @param program 制定的包含頂點或者片元着色器的程序對象  // @param name 指定想要獲取其存儲位置的uniform變量名稱 最大長度256位元組  WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);    // 將數據傳給location指定的uniform變量  void uniform1f(WebGLUniformLocation? location, GLfloat x);  void uniform2f(WebGLUniformLocation? location, GLfloat x, GLfloat y);  void uniform3f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z);  void uniform4f(WebGLUniformLocation? location, GLfloat x, GLfloat y, GLfloat z, GLfloat w);    void uniform1i(WebGLUniformLocation? location, GLint x);  void uniform2i(WebGLUniformLocation? location, GLint x, GLint y);  void uniform3i(WebGLUniformLocation? location, GLint x, GLint y, GLint z);  void uniform4i(WebGLUniformLocation? location, GLint x, GLint y, GLint z, GLint w);    void uniform1fv(WebGLUniformLocation? location, Float32List v);  void uniform2fv(WebGLUniformLocation? location, Float32List v);  void uniform3fv(WebGLUniformLocation? location, Float32List v);  void uniform4fv(WebGLUniformLocation? location, Float32List v);    void uniform1iv(WebGLUniformLocation? location, Int32List v);  void uniform2iv(WebGLUniformLocation? location, Int32List v);  void uniform3iv(WebGLUniformLocation? location, Int32List v);  void uniform4iv(WebGLUniformLocation? location, Int32List v);    // @param 是否對矩陣進行轉置 默認 false 在webgl中必須是false  void uniformMatrix2fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);  void uniformMatrix3fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);  void uniformMatrix4fv(WebGLUniformLocation? location, GLboolean transpose, Float32List value);  

緩存對象

使用緩存的五個步驟

1. createBuffer
2. bindBuffer
3. bufferData
4. vertexAttribPointer
5. enableVertexAttribArray

// 緩存對象  // bindBuffer 第一個參數  const GLenum ARRAY_BUFFER                   = 0x8892;  const GLenum ELEMENT_ARRAY_BUFFER           = 0x8893;  // const GLenum ARRAY_BUFFER_BINDING           = 0x8894;  // const GLenum ELEMENT_ARRAY_BUFFER_BINDING   = 0x8895;    // 繪製模式  // 下文中的usage參數值  const GLenum STREAM_DRAW                    = 0x88E0;  const GLenum STATIC_DRAW                    = 0x88E4;  const GLenum DYNAMIC_DRAW                   = 0x88E8;    // 數據類型  // vertexAttribPointer 中參數type的取值  const GLenum BYTE                           = 0x1400;  const GLenum UNSIGNED_BYTE                  = 0x1401;  const GLenum SHORT                          = 0x1402;  const GLenum UNSIGNED_SHORT                 = 0x1403;  const GLenum INT                            = 0x1404;  const GLenum UNSIGNED_INT                   = 0x1405;  const GLenum FLOAT                          = 0x1406;    // 創建緩衝區對象  WebGLBuffer? createBuffer();    // 允許使用buffer表示的緩衝區對象並將其綁定到target表示的目標上  // @param target  //        ARRAY_BUFFER 表示緩衝區對象中包含頂點數據  //        ELEMENT_ARRAY_BUFFER 表示緩衝去對象中包含了頂點的索引值  void bindBuffer(GLenum target, WebGLBuffer? buffer);    // 開闢存儲空間，向綁定在target上的緩衝區對象寫入數據data  // @param target 同上  // @param data 類型化數組 比如：Float32Array...  // @param usage 優化效率 可以是以下值：  //        STATIC_DRAW 只會向緩衝區寫入一次數據 需要繪製很多次  //        STREAM_DRAW 只會向緩衝區寫入一次數據 需要繪製若干次  //        DYNAMIC_DRAW 會向緩衝區對象中多次寫入數據 並繪製很多次  void bufferData(GLenum target, [AllowShared] BufferSource? data, GLenum usage);  void bufferData(GLenum target, GLsizeiptr size, GLenum usage);  void bufferSubData(GLenum target, GLintptr offset, [AllowShared] BufferSource data);    // 將綁定到ARRAY_BUFFER的緩衝區對象分配給index指定的attribute變量  // @param index 指向attribute變量  // @param size 指定緩衝區中每個頂點分量的個數  // @param type 數據格式 見上面的枚舉  // @param normalized 是否將浮點型數據歸一化到[0, 1]或者[-1, 1]區間  // @param stride 指定相鄰兩個頂點之間的位元組數 默認是0  // @param offset 指定緩衝區對象中的偏移量 單位位元組 可以利用這個偏移量賦值多個attribute  void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset);    // 開啟index對應的attribute對象  // 開啟後不能通過 vertexAttrib[1234]f 傳值  void enableVertexAttribArray(GLuint index);    // 關閉index對應的attribute對象  void disableVertexAttribArray(GLuint index);    // 刪除參數buffer表示的緩衝區對象  // @param buffer 緩衝區對象 由createBuffer創建  void deleteBuffer(WebGLBuffer? buffer);  

着色器 texture 相關

// pixelStorei 中參數pname取值    // 對圖像進行Y軸反轉，默認false  const GLenum UNPACK_FLIP_Y_WEBGL            = 0x9240;  // 將圖像RGB顏色值每一個分量乘以A 默認false  const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241;    // activeTexture 方法使用的枚舉常量  const GLenum TEXTURE0                       = 0x84C0;  const GLenum TEXTURE1                       = 0x84C1;  const GLenum TEXTURE2                       = 0x84C2;  const GLenum TEXTURE3                       = 0x84C3;  const GLenum TEXTURE4                       = 0x84C4;  const GLenum TEXTURE5                       = 0x84C5;  const GLenum TEXTURE6                       = 0x84C6;  const GLenum TEXTURE7                       = 0x84C7;  const GLenum TEXTURE8                       = 0x84C8;  const GLenum TEXTURE9                       = 0x84C9;  const GLenum TEXTURE10                      = 0x84CA;  const GLenum TEXTURE11                      = 0x84CB;  const GLenum TEXTURE12                      = 0x84CC;  const GLenum TEXTURE13                      = 0x84CD;  const GLenum TEXTURE14                      = 0x84CE;  const GLenum TEXTURE15                      = 0x84CF;  const GLenum TEXTURE16                      = 0x84D0;  const GLenum TEXTURE17                      = 0x84D1;  const GLenum TEXTURE18                      = 0x84D2;  const GLenum TEXTURE19                      = 0x84D3;  const GLenum TEXTURE20                      = 0x84D4;  const GLenum TEXTURE21                      = 0x84D5;  const GLenum TEXTURE22                      = 0x84D6;  const GLenum TEXTURE23                      = 0x84D7;  const GLenum TEXTURE24                      = 0x84D8;  const GLenum TEXTURE25                      = 0x84D9;  const GLenum TEXTURE26                      = 0x84DA;  const GLenum TEXTURE27                      = 0x84DB;  const GLenum TEXTURE28                      = 0x84DC;  const GLenum TEXTURE29                      = 0x84DD;  const GLenum TEXTURE30                      = 0x84DE;  const GLenum TEXTURE31                      = 0x84DF;    // bindTexture texParameterf texParameteri texImage2D 的 target 參數  const GLenum TEXTURE_2D                     = 0x0DE1;  const GLenum TEXTURE_CUBE_MAP               = 0x8513;    // texParameterf pname 參數  // texParameteri pname 參數  const GLenum TEXTURE_MAG_FILTER             = 0x2800;  const GLenum TEXTURE_MIN_FILTER             = 0x2801;  const GLenum TEXTURE_WRAP_S                 = 0x2802;  const GLenum TEXTURE_WRAP_T                 = 0x2803;    // texParameterf param 參數 當 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER  // texParameteri param 參數 當 pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER  // 以下是非金字塔紋理常量  // 使用原紋理上距離映射後像素（新像素）中心最近的那個像素的顏色值，作為新像素的值（使用曼哈頓距離）  // 曼哈頓距離又稱直角距離、棋盤距離。如(x1, y1) (x2, y2)的曼哈頓距離是 |x1 - x2| + |y1 - y2|  const GLenum NEAREST                        = 0x2600;  // 使用距離新像素中心最近的四個像素的顏色值得加權平均，作為新像素的值（與 NEAREST對比，該方法圖像質量更好，但是會有比較大的開銷）  const GLenum LINEAR                         = 0x2601;  // 以下是金字塔紋理常量  const GLenum NEAREST_MIPMAP_NEAREST         = 0x2700;  const GLenum LINEAR_MIPMAP_NEAREST          = 0x2701;  const GLenum NEAREST_MIPMAP_LINEAR          = 0x2702;  const GLenum LINEAR_MIPMAP_LINEAR           = 0x2703;    // texParameterf param 參數 當 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T  // texParameteri param 參數 當 pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T    // 平鋪式的重複紋理  const GLenum REPEAT                         = 0x2901;  // 鏡像對稱式的重複紋理  const GLenum CLAMP_TO_EDGE                  = 0x812F;  // 使用紋理圖像的邊緣值  const GLenum MIRRORED_REPEAT                = 0x8370;    // texImage2D 的 internalformat 參數  const GLenum ALPHA                          = 0x1906;  const GLenum RGB                            = 0x1907;  const GLenum RGBA                           = 0x1908;  const GLenum LUMINANCE                      = 0x1909;  const GLenum LUMINANCE_ALPHA                = 0x190A;    // texImage2D 的 type 參數  // 前文已定義  const GLenum UNSIGNED_BYTE;  // RGBA  const GLenum UNSIGNED_SHORT_4_4_4_4         = 0x8033;  // RGBA  const GLenum UNSIGNED_SHORT_5_5_5_1         = 0x8034;  // RGB  const GLenum UNSIGNED_SHORT_5_6_5           = 0x8363;    // 創建紋理對象以存儲紋理圖像  WebGLTexture? createTexture();    // 使用texture刪除紋理對象  void deleteTexture(WebGLTexture? texture);    // 使用 pname 和 param 指定的方式加載得到的圖像  // @param pname 見上面的枚舉  // @param param 指定 非0為true、0為false 必須是整數  void pixelStorei(GLenum pname, GLint param);    // 激活紋理單元 參數是常量 gl.TEXTURE<I> 見上面枚舉  void activeTexture(GLenum texture);    // 開啟 texture 指定的紋理對象，並將其綁定到 target 上。  // 如果已經通過 gl.activeTexture 激活了某個紋理單元，則紋理對象也會綁定到這個紋理單元上  // @param target 綁定類型 TEXTURE_CUBE_MAP（立方體紋理） | TEXTURE_2D （平面紋理）  // @param texture 綁定的紋理單元  void bindTexture(GLenum target, WebGLTexture? texture);    // 配置紋理，將param值賦給綁定到目標的紋理對象的pname參數上  // @param target 同上  // @param pname 見上面枚舉 紋理參數  // @param param 見上面枚舉 紋理參數的值  void texParameterf(GLenum target, GLenum pname, GLfloat param);  void texParameteri(GLenum target, GLenum pname, GLint param);    // 將 source 指定的圖像分配給綁定到目標上的紋理對象  // @param target 同上  // @param level 傳入0 （該參數是為金字塔紋理準備的）  // @param internalformat 圖像的內部格式 見上枚舉  // @param format 紋理數據的格式 必須使用與 internalformat 相同的值  // @param type 紋理數據的類型  // @param source 包含紋理圖像的Image對象  // May throw DOMException  void texImage2D(GLenum target, GLint level, GLint internalformat, GLenum format, GLenum type, TexImageSource source);  void texImage2D(GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);    // 最後指定紋理單元編號  // gl.uniform1i(sampler, 0);  

啟用功能

// enable disable 的 cap 參數  const GLenum CULL_FACE                      = 0x0B44;  // 混合  const GLenum BLEND                          = 0x0BE2;  const GLenum DITHER                         = 0x0BD0;  const GLenum STENCIL_TEST                   = 0x0B90;  // 隱藏面消除  const GLenum DEPTH_TEST                     = 0x0B71;  const GLenum SCISSOR_TEST                   = 0x0C11;  // 多邊形位移 （解決深度衝突問題）  const GLenum POLYGON_OFFSET_FILL            = 0x8037;  const GLenum SAMPLE_ALPHA_TO_COVERAGE       = 0x809E;  const GLenum SAMPLE_COVERAGE                = 0x80A0;    // 啟用功能  void enable(GLenum cap);    // 關閉功能  void disable(GLenum cap);    // 解決深度衝突  // gl.enable(POLYGON_OFFSET_FILL);  // 指定加到每個頂點繪製後Z值上的偏移量，偏移量按照公式 m * factor + r * units 計算，其中m代表頂點所在表面  // 相對於觀察者的實現角度，而r表示硬件能夠區分兩個Z值之差的最小值  void polygonOffset(GLfloat factor, GLfloat units);    // 雖然上面的方法可以使用，但是在渲染器中用起來還是很麻煩的。  // 解決深度衝突有更好的方式，就是縮小遠近裁剪面的距離  

着色器相關

// createShader 的 type 參數  const GLenum FRAGMENT_SHADER                  = 0x8B30;  const GLenum VERTEX_SHADER                    = 0x8B31;    // getShaderParameter 的 pname 參數  const GLenum SHADER_TYPE                      = 0x8B4F;  const GLenum DELETE_STATUS                    = 0x8B80;  const GLenum COMPILE_STATUS                   = 0x8B81;    // 創建由type指定的着色器對象  // @param type 見上枚舉  WebGLShader? createShader(GLenum type);    // 刪除 shader 指定的着色器對象  void deleteShader(WebGLShader? shader);    // 將 source 指定的字符串形式的代碼傳入shader指定的着色器 如果之前已經向shader傳入了代碼 舊的代碼就會被替換掉  void shaderSource(WebGLShader shader, DOMString source);    // 編譯 shader 指定的着色器中的源代碼  void compileShader(WebGLShader shader);    // 獲取 shader 指定的着色器中 pname 指定的參數信息  // @param pname 見上枚舉  any getShaderParameter(WebGLShader shader, GLenum pname);    // 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false  // 則可以通過 此函數獲取 指定shader 的信息日誌  DOMString? getShaderInfoLog(WebGLShader shader);  

着色器程序相關

// getProgramParameter 的 pname 參數  // 着色器相關 章節已定義  const GLenum DELETE_STATUS;  const GLenum LINK_STATUS                      = 0x8B82;  const GLenum VALIDATE_STATUS                  = 0x8B83;  const GLenum ATTACHED_SHADERS                 = 0x8B85;  const GLenum ACTIVE_UNIFORMS                  = 0x8B86;  const GLenum ACTIVE_ATTRIBUTES                = 0x8B89;    // 創建着色器程序對象  WebGLProgram? createProgram();    // 刪除着色器程序對象  void deleteProgram(WebGLProgram? program);    // 將 shader 指定的着色器對象分配給 program 指定的程序對象  void attachShader(WebGLProgram program, WebGLShader shader);    // 取消 shader 指定的着色器對 program 對象的分配  void detachShader(WebGLProgram program, WebGLShader shader);    // 連接 program 指定的程序對象中的着色器  // 目的：  // 1. 保證頂點着色器 和 片元着色器的varying變量同名同類型，且一一對應  // 2. 保證頂點着色器對每個varying變量賦了值  // 3. 保證頂點着色器 和 片元着色器中的同名 uniform 變量也是同類型的 無需一一對應  // 4. 保證着色器中的attribute、uniform、varying變量的個數沒有超過着色器上限  void linkProgram(WebGLProgram program);    // 獲取 program 指定的程序對象中 pname 指定的參數信息  // @param pname 見上枚舉  any getProgramParameter(WebGLProgram program, GLenum pname);    // 如果通過 getProgramParameter(LINK_STATUS) 獲得返回值 為 false  // 可以通過 此函數獲取 program 指定的程序對象的信息日誌  DOMString? getProgramInfoLog(WebGLProgram program);    // 驗證 WebGLProgram  void validateProgram(WebGLProgram program);    // 告知 WEBGL 系統繪製時使用的 program 對象  void useProgram(WebGLProgram? program);  

獲取着色器程序相關代碼

const program = gl.createProgram();  gl.attacheShader(program, vertexShader);  gl.attacheShader(program, fragmentShader);  gl.linkProgram(program);  if(!gl.getProgramParameter(program, gl.LINK_STATUS)){    var info = gl.getProgramInfoLog(program);    throw new Error('Could not compile WebGL program. nn ' + info);  }  

擴展

通過擴展基本上能使 WebGL1 擁有 WebGL2 的能力。

1. 獲取擴展以及擴展支持信息

// 獲取擴展  object? getExtension(DOMString name);  // 獲取擴展支持信息  sequence<DOMString>? getSupportedExtensions();  

2. 使用擴展字符串獲取擴展對象

查詢狀態參數

// 獲取當前激活的材質枚舉值 getParameter  const GLenum ACTIVE_TEXTURE                 = 0x84E0;  // 獲取材質最大支持數量 getParameter  const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;    const GLenum MAX_VERTEX_ATTRIBS               = 0x8869;  const GLenum MAX_VERTEX_UNIFORM_VECTORS       = 0x8DFB;  const GLenum MAX_VARYING_VECTORS              = 0x8DFC;  const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS   = 0x8B4C;  const GLenum MAX_TEXTURE_IMAGE_UNITS          = 0x8872;  const GLenum MAX_FRAGMENT_UNIFORM_VECTORS     = 0x8DFD;    const GLenum SHADING_LANGUAGE_VERSION         = 0x8B8C;  const GLenum CURRENT_PROGRAM                  = 0x8B8D;    // 獲取混合方程  const GLenum BLEND_EQUATION                 = 0x8009;  const GLenum BLEND_EQUATION_RGB             = 0x8009;   /* same as BLEND_EQUATION */  const GLenum BLEND_EQUATION_ALPHA           = 0x883D;    // 面消除查詢  const GLenum CULL_FACE_MODE                 = 0x0B45;    // 通過查詢參數獲取值  any getParameter(GLenum pname);  any getTexParameter(GLenum target, GLenum pname);  // 查詢着色器相關參數  any getShaderParameter(WebGLShader shader, GLenum pname);  // 查詢着色器程序相關參數  any getProgramParameter(WebGLProgram program, GLenum pname);  

其他靜態變量

/* Separate Blend Functions */  const GLenum BLEND_DST_RGB                  = 0x80C8;  const GLenum BLEND_SRC_RGB                  = 0x80C9;  const GLenum BLEND_DST_ALPHA                = 0x80CA;  const GLenum BLEND_SRC_ALPHA                = 0x80CB;  const GLenum CONSTANT_COLOR                 = 0x8001;  const GLenum ONE_MINUS_CONSTANT_COLOR       = 0x8002;  const GLenum CONSTANT_ALPHA                 = 0x8003;  const GLenum ONE_MINUS_CONSTANT_ALPHA       = 0x8004;  const GLenum BLEND_COLOR                    = 0x8005;    // buffer  const GLenum BUFFER_SIZE                    = 0x8764;  const GLenum BUFFER_USAGE                   = 0x8765;    const GLenum CURRENT_VERTEX_ATTRIB          = 0x8626;    /* ErrorCode */  const GLenum NO_ERROR                       = 0;  const GLenum INVALID_ENUM                   = 0x0500;  const GLenum INVALID_VALUE                  = 0x0501;  const GLenum INVALID_OPERATION              = 0x0502;  const GLenum OUT_OF_MEMORY                  = 0x0505;    /* FrontFaceDirection */  const GLenum CW                             = 0x0900;  const GLenum CCW                            = 0x0901;    /* GetPName */  const GLenum LINE_WIDTH                     = 0x0B21;  const GLenum ALIASED_POINT_SIZE_RANGE       = 0x846D;  const GLenum ALIASED_LINE_WIDTH_RANGE       = 0x846E;    const GLenum FRONT_FACE                     = 0x0B46;  const GLenum DEPTH_RANGE                    = 0x0B70;  const GLenum DEPTH_WRITEMASK                = 0x0B72;  const GLenum DEPTH_CLEAR_VALUE              = 0x0B73;  const GLenum DEPTH_FUNC                     = 0x0B74;  const GLenum STENCIL_CLEAR_VALUE            = 0x0B91;  const GLenum STENCIL_FUNC                   = 0x0B92;  const GLenum STENCIL_FAIL                   = 0x0B94;  const GLenum STENCIL_PASS_DEPTH_FAIL        = 0x0B95;  const GLenum STENCIL_PASS_DEPTH_PASS        = 0x0B96;  const GLenum STENCIL_REF                    = 0x0B97;  const GLenum STENCIL_VALUE_MASK             = 0x0B93;  const GLenum STENCIL_WRITEMASK              = 0x0B98;  const GLenum STENCIL_BACK_FUNC              = 0x8800;  const GLenum STENCIL_BACK_FAIL              = 0x8801;  const GLenum STENCIL_BACK_PASS_DEPTH_FAIL   = 0x8802;  const GLenum STENCIL_BACK_PASS_DEPTH_PASS   = 0x8803;  const GLenum STENCIL_BACK_REF               = 0x8CA3;  const GLenum STENCIL_BACK_VALUE_MASK        = 0x8CA4;  const GLenum STENCIL_BACK_WRITEMASK         = 0x8CA5;  const GLenum VIEWPORT                       = 0x0BA2;  const GLenum SCISSOR_BOX                    = 0x0C10;  /*      SCISSOR_TEST */  const GLenum COLOR_CLEAR_VALUE              = 0x0C22;  const GLenum COLOR_WRITEMASK                = 0x0C23;  const GLenum UNPACK_ALIGNMENT               = 0x0CF5;  const GLenum PACK_ALIGNMENT                 = 0x0D05;  const GLenum MAX_TEXTURE_SIZE               = 0x0D33;  const GLenum MAX_VIEWPORT_DIMS              = 0x0D3A;  const GLenum SUBPIXEL_BITS                  = 0x0D50;  const GLenum RED_BITS                       = 0x0D52;  const GLenum GREEN_BITS                     = 0x0D53;  const GLenum BLUE_BITS                      = 0x0D54;  const GLenum ALPHA_BITS                     = 0x0D55;  const GLenum DEPTH_BITS                     = 0x0D56;  const GLenum STENCIL_BITS                   = 0x0D57;  const GLenum POLYGON_OFFSET_UNITS           = 0x2A00;  /*      POLYGON_OFFSET_FILL */  const GLenum POLYGON_OFFSET_FACTOR          = 0x8038;  const GLenum TEXTURE_BINDING_2D             = 0x8069;  const GLenum SAMPLE_BUFFERS                 = 0x80A8;  const GLenum SAMPLES                        = 0x80A9;  const GLenum SAMPLE_COVERAGE_VALUE          = 0x80AA;  const GLenum SAMPLE_COVERAGE_INVERT         = 0x80AB;    const GLenum COMPRESSED_TEXTURE_FORMATS     = 0x86A3;    /* HintMode */  const GLenum DONT_CARE                      = 0x1100;  const GLenum FASTEST                        = 0x1101;  const GLenum NICEST                         = 0x1102;    /* HintTarget */  const GLenum GENERATE_MIPMAP_HINT            = 0x8192;    /* PixelFormat */  const GLenum DEPTH_COMPONENT                = 0x1902;    /* StencilOp */  /*      ZERO */  const GLenum KEEP                           = 0x1E00;  const GLenum REPLACE                        = 0x1E01;  const GLenum INCR                           = 0x1E02;  const GLenum DECR                           = 0x1E03;  const GLenum INVERT                         = 0x150A;  const GLenum INCR_WRAP                      = 0x8507;  const GLenum DECR_WRAP                      = 0x8508;    /* StringName */  const GLenum VENDOR                         = 0x1F00;  const GLenum RENDERER                       = 0x1F01;  const GLenum VERSION                        = 0x1F02;    const GLenum TEXTURE                        = 0x1702;    const GLenum TEXTURE_BINDING_CUBE_MAP       = 0x8514;  const GLenum TEXTURE_CUBE_MAP_POSITIVE_X    = 0x8515;  const GLenum TEXTURE_CUBE_MAP_NEGATIVE_X    = 0x8516;  const GLenum TEXTURE_CUBE_MAP_POSITIVE_Y    = 0x8517;  const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Y    = 0x8518;  const GLenum TEXTURE_CUBE_MAP_POSITIVE_Z    = 0x8519;  const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Z    = 0x851A;  const GLenum MAX_CUBE_MAP_TEXTURE_SIZE      = 0x851C;    /* Uniform Types */  const GLenum FLOAT_VEC2                     = 0x8B50;  const GLenum FLOAT_VEC3                     = 0x8B51;  const GLenum FLOAT_VEC4                     = 0x8B52;  const GLenum INT_VEC2                       = 0x8B53;  const GLenum INT_VEC3                       = 0x8B54;  const GLenum INT_VEC4                       = 0x8B55;  const GLenum BOOL                           = 0x8B56;  const GLenum BOOL_VEC2                      = 0x8B57;  const GLenum BOOL_VEC3                      = 0x8B58;  const GLenum BOOL_VEC4                      = 0x8B59;  const GLenum FLOAT_MAT2                     = 0x8B5A;  const GLenum FLOAT_MAT3                     = 0x8B5B;  const GLenum FLOAT_MAT4                     = 0x8B5C;  const GLenum SAMPLER_2D                     = 0x8B5E;  const GLenum SAMPLER_CUBE                   = 0x8B60;    /* Vertex Arrays */  const GLenum VERTEX_ATTRIB_ARRAY_ENABLED        = 0x8622;  const GLenum VERTEX_ATTRIB_ARRAY_SIZE           = 0x8623;  const GLenum VERTEX_ATTRIB_ARRAY_STRIDE         = 0x8624;  const GLenum VERTEX_ATTRIB_ARRAY_TYPE           = 0x8625;  const GLenum VERTEX_ATTRIB_ARRAY_NORMALIZED     = 0x886A;  const GLenum VERTEX_ATTRIB_ARRAY_POINTER        = 0x8645;  const GLenum VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F;    /* Read Format */  const GLenum IMPLEMENTATION_COLOR_READ_TYPE   = 0x8B9A;  const GLenum IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B;    /* Shader Precision-Specified Types */  const GLenum LOW_FLOAT                      = 0x8DF0;  const GLenum MEDIUM_FLOAT                   = 0x8DF1;  const GLenum HIGH_FLOAT                     = 0x8DF2;  const GLenum LOW_INT                        = 0x8DF3;  const GLenum MEDIUM_INT                     = 0x8DF4;  const GLenum HIGH_INT                       = 0x8DF5;    /* Framebuffer Object. */  const GLenum FRAMEBUFFER                    = 0x8D40;    const GLenum DEPTH_STENCIL                  = 0x84F9;    const GLenum RENDERBUFFER_WIDTH             = 0x8D42;  const GLenum RENDERBUFFER_HEIGHT            = 0x8D43;  const GLenum RENDERBUFFER_INTERNAL_FORMAT   = 0x8D44;  const GLenum RENDERBUFFER_RED_SIZE          = 0x8D50;  const GLenum RENDERBUFFER_GREEN_SIZE        = 0x8D51;  const GLenum RENDERBUFFER_BLUE_SIZE         = 0x8D52;  const GLenum RENDERBUFFER_ALPHA_SIZE        = 0x8D53;  const GLenum RENDERBUFFER_DEPTH_SIZE        = 0x8D54;  const GLenum RENDERBUFFER_STENCIL_SIZE      = 0x8D55;    const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE           = 0x8CD0;  const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_NAME           = 0x8CD1;  const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL         = 0x8CD2;  const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3;    const GLenum NONE                           = 0;    const GLenum FRAMEBUFFER_COMPLETE                      = 0x8CD5;  const GLenum FRAMEBUFFER_INCOMPLETE_ATTACHMENT         = 0x8CD6;  const GLenum FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7;  const GLenum FRAMEBUFFER_INCOMPLETE_DIMENSIONS         = 0x8CD9;  const GLenum FRAMEBUFFER_UNSUPPORTED                   = 0x8CDD;    const GLenum FRAMEBUFFER_BINDING            = 0x8CA6;  const GLenum RENDERBUFFER_BINDING           = 0x8CA7;  const GLenum MAX_RENDERBUFFER_SIZE          = 0x84E8;    const GLenum INVALID_FRAMEBUFFER_OPERATION  = 0x0506;    const GLenum CONTEXT_LOST_WEBGL                 = 0x9242;  const GLenum UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243;  const GLenum BROWSER_DEFAULT_WEBGL              = 0x9244;  

其他方法

// 從顏色緩衝區中讀取 x y width height 參數確定的矩形塊中的所有像素值 並保存在pixels指定的數組中  // @param x y 選擇矩形區域左上角坐標  // @param width height 選擇矩形區域的寬 長  // @param format 指定像素值的顏色格式 必須為 gl.RGB  // @param type 指定像素值得數據格式 必須是 gl.UNSIGNED_BYTE  // @param pixels 類型化數組 Unit8Array  void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);    // 透明混合參數  // blendFunc 的 sfactor dfactor 參數  const GLenum ZERO                           = 0;  const GLenum ONE                            = 1;  const GLenum SRC_COLOR                      = 0x0300;  const GLenum ONE_MINUS_SRC_COLOR            = 0x0301;  const GLenum SRC_ALPHA                      = 0x0302;  const GLenum ONE_MINUS_SRC_ALPHA            = 0x0303;  const GLenum DST_ALPHA                      = 0x0304;  const GLenum ONE_MINUS_DST_ALPHA            = 0x0305;  // blendFunc 的 sfactor 參數  const GLenum DST_COLOR                      = 0x0306;  const GLenum ONE_MINUS_DST_COLOR            = 0x0307;  const GLenum SRC_ALPHA_SATURATE             = 0x0308;    // 通過參數 sfactor 和 dfactor 指定進行混合操作的函數 混合後的顏色如下計算  // 混合後顏色 = 源顏色 * sfactor + 目標顏色 * dfactor  // @param sfactor 見此方法上枚舉  // @param dfactor 見此方法上枚舉  void blendFunc(GLenum sfactor, GLenum dfactor);  // 同上 只是分開設置RGB 和 ALPHA  void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);    // 創建幀緩衝區對象  WebGLFramebuffer? createFramebuffer();  // 刪除幀緩衝區對象  void deleteFramebuffer(WebGLFramebuffer? framebuffer);  // 創建渲染緩衝區對象  WebGLRenderbuffer? createRenderbuffer();  // 刪除渲染緩衝區對象  void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);     const GLenum RENDERBUFFER                   = 0x8D41;    // 將 renderbuffer 指定的渲染緩衝區對象綁定在target目標上  // 如果 renderbuffer 為 null 則將已經綁定在target目標上的渲染緩衝區對象解除綁定  // @param target 必須是 gl.RENDERBUFFER  void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);    // 表示渲染緩衝區將替代顏色緩衝區  const GLenum RGBA4                          = 0x8056;  const GLenum RGB5_A1                        = 0x8057;  const GLenum RGB565                         = 0x8D62;  // 表示渲染緩衝區將替代深度緩衝區  const GLenum DEPTH_COMPONENT16              = 0x81A5;  // 表示渲染緩衝區將替代模板緩衝區  const GLenum STENCIL_INDEX8                 = 0x8D48;    // 創建並初始化渲染緩衝區的數據區  // @param target 必須是 gl.RENDERBUFFER  // @param internalformat 指定渲染緩衝區中的數據格式 見方法上枚舉  // @param width height 指定渲染緩衝區的寬度和高度 單位像素  void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height);    // 綁定幀緩衝區  // FBO就是由顏色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）組成的一個邏輯存儲對象  // RBO是一個2D圖像緩衝區，可以用於分配和存儲顏色值，深度或者模板值，可以作為FBO的顏色，深度模板附件。  void bindFramebuffer(GLenum target, WebGLFramebuffer? framebuffer);    // attachment  const GLenum COLOR_ATTACHMENT0              = 0x8CE0;  const GLenum DEPTH_ATTACHMENT               = 0x8D00;  const GLenum STENCIL_ATTACHMENT             = 0x8D20;  const GLenum DEPTH_STENCIL_ATTACHMENT       = 0x821A;    // 設置紋理為 attachment 附件  void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level);  // 設置渲染緩衝區對象為 attachment 附件  void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer);  // 檢查幀緩衝區  [WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);  // 設置視口寬度  void viewport(GLint x, GLint y, GLsizei width, GLsizei height);    // 鎖定或者釋放深度緩衝區的寫入操作  // @param flag false 只讀 true 可讀寫  void depthMask(GLboolean flag);    // 返回類似下列上下文參數  // {  //   alpha: true,  //   antialias: true,  //   depth: true,  //   failIfMajorPerformanceCaveat: false,  //   premultipliedAlpha: true,  //   preserveDrawingBuffer: false,  //   stencil: false  // }  // 可以通過下列方法設置  // canvas.getContext('webgl', { antialias: false, depth: false });  [WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();  // 標記上下文是否已經丟失  [WebGLHandlesContextLoss] boolean isContextLost();    // 設置源和目標混合因子 值範圍 在0到1之間  void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);    // blendEquation 的 mode 參數  const GLenum FUNC_ADD                       = 0x8006;  const GLenum FUNC_SUBTRACT                  = 0x800A;  const GLenum FUNC_REVERSE_SUBTRACT          = 0x800B;    // 將RGB混合方程和阿爾法混合方程設置為單個方程。  // 混合方程式確定新像素如何與 WebGLFramebuffer 中的像素組合  // @ext EXT_blend_minmax  void blendEquation(GLenum mode);  // 同上 只是分開設置RGB 和 ALPHA  // @ext EXT_blend_minmax  void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);    // 設置在繪製或渲染WebGLFramebuffer時要開啟或關閉的顏色分量。  void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);    // 指定一個為壓縮格式的2D紋理圖片。  void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);    // 指定一個為壓縮格式的2D紋理子圖片。  void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView data);    // 複製2D紋理圖片。  void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);    // 複製2D紋理子圖片。  void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);    // cullFace 的 mode 參數  const GLenum FRONT                          = 0x0404;  const GLenum BACK                           = 0x0405;  const GLenum FRONT_AND_BACK                 = 0x0408;    // 設置多邊形的正面或反面是否要被排除。  // gl.enable(gl.CULL_FACE);  // gl.cullFace(gl.FRONT_AND_BACK);  // gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;  void cullFace(GLenum mode);    // depthFunc 的 func 參數  const GLenum NEVER                          = 0x0200;  const GLenum LESS                           = 0x0201;  const GLenum EQUAL                          = 0x0202;  const GLenum LEQUAL                         = 0x0203;  const GLenum GREATER                        = 0x0204;  const GLenum NOTEQUAL                       = 0x0205;  const GLenum GEQUAL                         = 0x0206;  const GLenum ALWAYS                         = 0x0207;    // 設置比較輸入像素深度和深度緩存值得函數  // gl.enable(gl.DEPTH_TEST);  // gl.depthFunc(gl.NEVER);  // gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;  void depthFunc(GLenum func);    // 設置從規範化設備坐標映射到窗口或視口坐標時的深度範圍。  void depthRange(GLclampf zNear, GLclampf zFar);    // 阻斷執行，直到之前所有的操作都完成。  void finish();    // 清空緩衝的命令，這會導致所有命令儘快執行完。  void flush();    // 設置多邊形的正面使用順時針還是逆時針繪製表示。  void frontFace(GLenum mode);    // 為 WebGLTexture 對象生成一組mip紋理映射。  void generateMipmap(GLenum target);    // 返回激活狀態的attribute變量信息。  WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);  // 返回激活狀態的uniform 變量信息。  WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);  // 返回附加在 WebGLProgram 上的 WebGLShader 對象的列表  sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);    // 返回緩衝信息。  any getBufferParameter(GLenum target, GLenum pname);    // 返回錯誤信息。  [WebGLHandlesContextLoss] GLenum getError();    // 返回幀緩衝區的信息。  any getFramebufferAttachmentParameter(GLenum target, GLenum attachment, GLenum pname);    // 返回渲染緩衝區的信息。  any getRenderbufferParameter(GLenum target, GLenum pname);    // 返回一個描述着色器數字類型精度的WebGLShaderPrecisionFormat 對象。  WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);    // 以字符串形式返回 WebGLShader 的源碼。  DOMString? getShaderSource(WebGLShader shader);    // 返回指定位置的uniform 變量。  any getUniform(WebGLProgram program, WebGLUniformLocation location);    // 返回指定位置的頂點attribute變量。  any getVertexAttrib(GLuint index, GLenum pname);    // 獲取給定索引的頂點attribute位置。  [WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);    // 給某些行為設置建議使用的模式。具體建議需要看執行的情況。  void hint(GLenum target, GLenum mode);  // 返回給入的緩衝是否有效。  [WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);  // 測試這個上下文的WebGL功能是否開啟。  [WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);  // 返回 Boolean 值，表示給入的 WebGLFrameBuffer 對象是否有效。  [WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);  // 返回一個 Boolean 值，表示給入的 WebGLProgram 是否有效。  [WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);  [WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);  [WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);  [WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);  // 設置線寬。無效  void lineWidth(GLfloat width);    // 為抗鋸齒效果設置多重取樣覆蓋參數。  void sampleCoverage(GLclampf value, GLboolean invert);  // 設置裁剪框。  void scissor(GLint x, GLint y, GLsizei width, GLsizei height);    // 同時設置前面和背面的模板測試函數，及其引用值。  void stencilFunc(GLenum func, GLint ref, GLuint mask);  // 可分開設置前面或背面的模板測試函數，及其引用值。  void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);  // 同時啟用或禁用，前面和背面的模板測試掩碼。  void stencilMask(GLuint mask);  // 可分開啟用或禁用，前面和背面的模板測試掩碼。  void stencilMaskSeparate(GLenum face, GLuint mask);  // 同時設置，在前面和背面的模板緩衝區上執行的操作。  void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);  // 可分開設置，在前面和背面的模板緩衝區上執行的操作。  void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);    // 更新當前 WebGLTexture 的子矩形。  void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);  void texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLenum format, GLenum type, TexImageSource source); // May throw DOMException  

引用

• WebGLRenderingContext

另外：歡迎郵件交流。