基于 WebGL Specifications 最全面的API釋疑。
類型以及對(duì)象定義
這部分內(nèi)容主要定義一部分類型和數(shù)據(jù)結(jié)構(gòu)。
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;
// 這個(gè)類型應(yīng)該是 無符號(hào)整型 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" };
// 獲取上下文時(shí)支持的參數(shù)
// 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)] 代表可以同時(shí)在主線程和后臺(tái)線程使用本對(duì)象
[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 {
// 內(nèi)容整理到 'WebGLRenderingContext 對(duì)象'
}
interface mixin WebGLRenderingContextOverloads {
// 內(nèi)容整理到 'WebGLRenderingContext 對(duì)象'
}
[Exposed=(Window,Worker)]
interface WebGLRenderingContext {
// 內(nèi)容整理到 'WebGLRenderingContext 對(duì)象'
};
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 對(duì)象
屬性數(shù)據(jù)
[Exposed=Window] readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;
// 可以在 Web Work 上使用 canvas api
// 需要調(diào)用 canvas.transferControlToOffscreen() 將渲染權(quán)轉(zhuǎn)移給后臺(tái)線程
[Exposed=Worker] readonly attribute OffscreenCanvas canvas;
readonly attribute GLsizei drawingBufferWidth;
readonly attribute GLsizei drawingBufferHeight;
緩沖區(qū)相關(guān)方法
清理渲染緩沖區(qū)。
// 緩沖區(qū)類型
// 為 gl.clear 的參數(shù)
const GLenum DEPTH_BUFFER_BIT = 0x00000100;
const GLenum STENCIL_BUFFER_BIT = 0x00000400;
const GLenum COLOR_BUFFER_BIT = 0x00004000;
// 清理指定緩存內(nèi)容, 可以通過或運(yùn)算符一次清理多個(gè)緩沖區(qū)
// @param mask 顏色緩沖區(qū)（COLOR_BUFFER_BIT） | 深度緩沖區(qū)（DEPTH_BUFFER_BIT） | 模板緩沖區(qū)（STENCIL_BUFFER_BIT）
void clear(GLbitfield mask);
// 將指定緩沖區(qū)設(shè)置為指定的值（參數(shù)范圍都是 0.0 - 1.0）
// clearColor 指定的值 默認(rèn) 0.0, 0.0, 0.0, 0.0
// clearDepth 指定的值 默認(rèn) 1.0
// clearStencil 指定的值 默認(rèn) 0
void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
void clearDepth(GLclampf depth);
void clearStencil(GLint s);
繪制相關(guān)方法
繪制緩存中的頂點(diǎn)數(shù)據(jù)。
// 繪制的類型
// 為 gl.drawArrays、gl.drawElements 第一個(gè)參數(shù)
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;
// 執(zhí)行繪制， 按照mode參數(shù)指定的方式繪制圖形
// @param model 繪制模式。
// @param first 指定從哪個(gè)定點(diǎn)開始繪制
// @param count 指定繪制需要用到多少個(gè)頂點(diǎn)
void drawArrays(GLenum mode, GLint first, GLsizei count);
// 執(zhí)行繪制，按照mode參數(shù)制定的方式，根據(jù)綁定到 ELEMENT_ARRAY_BUFFER 的緩沖區(qū)中的頂點(diǎn)索引繪制圖形
// @param model 繪制模式。
// @param count 指定繪制頂點(diǎn)的個(gè)數(shù)
// @param type 指定索引值數(shù)據(jù)類型。包括：UNSIGNED_BYTE、UNSIGNED_SHORT、UNSIGNED_INT
// @param offset 指定索引數(shù)組中繪制的偏移位置，以字節(jié)為單位
void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);
著色器 attribute 相關(guān)
// 獲取由 name 參數(shù)指定的 attribute 變量存儲(chǔ)地址
// @param program 指定包含頂點(diǎn)或者片元著色器的程序?qū)ο?// @param name 獲取其存儲(chǔ)的 attribute 變量名稱，最大長(zhǎng)度256字節(jié)
[WebGLHandlesContextLoss] GLint getAttribLocation(WebGLProgram program, DOMString name);
// 綁定頂點(diǎn)索引到屬性變量
// 使用緩沖區(qū)數(shù)據(jù)的時(shí)候需要用到的方法
// @param index 指定要綁定的通用頂點(diǎn)的索引 這個(gè)值直接賦值給 vertexAttribPointer 的 index 參數(shù)
// @param name 指定變量名
// 這里的 index 和 getAttribLocation 返回值是一樣的
void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name);
// 將數(shù)據(jù)傳給由index參數(shù)指定的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);
// 接收參數(shù)為 Float32Array 數(shù)組
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 相關(guān)
// 獲取指定名稱的 uniform 變量存儲(chǔ)位置
// @param program 制定的包含頂點(diǎn)或者片元著色器的程序?qū)ο?// @param name 指定想要獲取其存儲(chǔ)位置的uniform變量名稱 最大長(zhǎng)度256字節(jié)
WebGLUniformLocation? getUniformLocation(WebGLProgram program, DOMString name);
// 將數(shù)據(jù)傳給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 是否對(duì)矩陣進(jìn)行轉(zhuǎn)置 默認(rèn) 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);
緩存對(duì)象
使用緩存的五個(gè)步驟
- createBuffer
- bindBuffer
- bufferData
- vertexAttribPointer
- enableVertexAttribArray
// 緩存對(duì)象
// bindBuffer 第一個(gè)參數(shù)
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參數(shù)值
const GLenum STREAM_DRAW = 0x88E0;
const GLenum STATIC_DRAW = 0x88E4;
const GLenum DYNAMIC_DRAW = 0x88E8;
// 數(shù)據(jù)類型
// vertexAttribPointer 中參數(shù)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;
// 創(chuàng)建緩沖區(qū)對(duì)象
WebGLBuffer? createBuffer();
// 允許使用buffer表示的緩沖區(qū)對(duì)象并將其綁定到target表示的目標(biāo)上
// @param target
// ARRAY_BUFFER 表示緩沖區(qū)對(duì)象中包含頂點(diǎn)數(shù)據(jù)
// ELEMENT_ARRAY_BUFFER 表示緩沖去對(duì)象中包含了頂點(diǎn)的索引值
void bindBuffer(GLenum target, WebGLBuffer? buffer);
// 開辟存儲(chǔ)空間，向綁定在target上的緩沖區(qū)對(duì)象寫入數(shù)據(jù)data
// @param target 同上
// @param data 類型化數(shù)組 比如：Float32Array...
// @param usage 優(yōu)化效率 可以是以下值：
// STATIC_DRAW 只會(huì)向緩沖區(qū)寫入一次數(shù)據(jù) 需要繪制很多次
// STREAM_DRAW 只會(huì)向緩沖區(qū)寫入一次數(shù)據(jù) 需要繪制若干次
// DYNAMIC_DRAW 會(huì)向緩沖區(qū)對(duì)象中多次寫入數(shù)據(jù) 并繪制很多次
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的緩沖區(qū)對(duì)象分配給index指定的attribute變量
// @param index 指向attribute變量
// @param size 指定緩沖區(qū)中每個(gè)頂點(diǎn)分量的個(gè)數(shù)
// @param type 數(shù)據(jù)格式 見上面的枚舉
// @param normalized 是否將浮點(diǎn)型數(shù)據(jù)歸一化到[0, 1]或者[-1, 1]區(qū)間
// @param stride 指定相鄰兩個(gè)頂點(diǎn)之間的字節(jié)數(shù) 默認(rèn)是0
// @param offset 指定緩沖區(qū)對(duì)象中的偏移量 單位字節(jié) 可以利用這個(gè)偏移量賦值多個(gè)attribute
void vertexAttribPointer(GLuint index, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset);
// 開啟index對(duì)應(yīng)的attribute對(duì)象
// 開啟后不能通過 vertexAttrib[1234]f 傳值
void enableVertexAttribArray(GLuint index);
// 關(guān)閉index對(duì)應(yīng)的attribute對(duì)象
void disableVertexAttribArray(GLuint index);
// 刪除參數(shù)buffer表示的緩沖區(qū)對(duì)象
// @param buffer 緩沖區(qū)對(duì)象 由createBuffer創(chuàng)建
void deleteBuffer(WebGLBuffer? buffer);
著色器 texture 相關(guān)
// pixelStorei 中參數(shù)pname取值
// 對(duì)圖像進(jìn)行Y軸反轉(zhuǎn)，默認(rèn)false
const GLenum UNPACK_FLIP_Y_WEBGL = 0x9240;
// 將圖像RGB顏色值每一個(gè)分量乘以A 默認(rèn)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 參數(shù)
const GLenum TEXTURE_2D = 0x0DE1;
const GLenum TEXTURE_CUBE_MAP = 0x8513;
// texParameterf pname 參數(shù)
// texParameteri pname 參數(shù)
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 參數(shù) 當(dāng) pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER
// texParameteri param 參數(shù) 當(dāng) pname = TEXTURE_MAG_FILTER | TEXTURE_MIN_FILTER
// 以下是非金字塔紋理常量
// 使用原紋理上距離映射后像素（新像素）中心最近的那個(gè)像素的顏色值，作為新像素的值（使用曼哈頓距離）
// 曼哈頓距離又稱直角距離、棋盤距離。如(x1, y1) (x2, y2)的曼哈頓距離是 |x1 - x2| + |y1 - y2|
const GLenum NEAREST = 0x2600;
// 使用距離新像素中心最近的四個(gè)像素的顏色值得加權(quán)平均，作為新像素的值（與 NEAREST對(duì)比，該方法圖像質(zhì)量更好，但是會(huì)有比較大的開銷）
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 參數(shù) 當(dāng) pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T
// texParameteri param 參數(shù) 當(dāng) pname = TEXTURE_WRAP_S | TEXTURE_WRAP_T
// 平鋪式的重復(fù)紋理
const GLenum REPEAT = 0x2901;
// 鏡像對(duì)稱式的重復(fù)紋理
const GLenum CLAMP_TO_EDGE = 0x812F;
// 使用紋理圖像的邊緣值
const GLenum MIRRORED_REPEAT = 0x8370;
// texImage2D 的 internalformat 參數(shù)
const GLenum ALPHA = 0x1906;
const GLenum RGB = 0x1907;
const GLenum RGBA = 0x1908;
const GLenum LUMINANCE = 0x1909;
const GLenum LUMINANCE_ALPHA = 0x190A;
// texImage2D 的 type 參數(shù)
// 前文已定義
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;
// 創(chuàng)建紋理對(duì)象以存儲(chǔ)紋理圖像
WebGLTexture? createTexture();
// 使用texture刪除紋理對(duì)象
void deleteTexture(WebGLTexture? texture);
// 使用 pname 和 param 指定的方式加載得到的圖像
// @param pname 見上面的枚舉
// @param param 指定 非0為true、0為false 必須是整數(shù)
void pixelStorei(GLenum pname, GLint param);
// 激活紋理單元 參數(shù)是常量 gl.TEXTURE<I> 見上面枚舉
void activeTexture(GLenum texture);
// 開啟 texture 指定的紋理對(duì)象，并將其綁定到 target 上。
// 如果已經(jīng)通過 gl.activeTexture 激活了某個(gè)紋理單元，則紋理對(duì)象也會(huì)綁定到這個(gè)紋理單元上
// @param target 綁定類型 TEXTURE_CUBE_MAP（立方體紋理） | TEXTURE_2D （平面紋理）
// @param texture 綁定的紋理單元
void bindTexture(GLenum target, WebGLTexture? texture);
// 配置紋理，將param值賦給綁定到目標(biāo)的紋理對(duì)象的pname參數(shù)上
// @param target 同上
// @param pname 見上面枚舉 紋理參數(shù)
// @param param 見上面枚舉 紋理參數(shù)的值
void texParameterf(GLenum target, GLenum pname, GLfloat param);
void texParameteri(GLenum target, GLenum pname, GLint param);
// 將 source 指定的圖像分配給綁定到目標(biāo)上的紋理對(duì)象
// @param target 同上
// @param level 傳入0 （該參數(shù)是為金字塔紋理準(zhǔn)備的）
// @param internalformat 圖像的內(nèi)部格式 見上枚舉
// @param format 紋理數(shù)據(jù)的格式 必須使用與 internalformat 相同的值
// @param type 紋理數(shù)據(jù)的類型
// @param source 包含紋理圖像的Image對(duì)象
// 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);
// 最后指定紋理單元編號(hào)
// gl.uniform1i(sampler, 0);
啟用功能
// enable disable 的 cap 參數(shù)
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);
// 關(guān)閉功能
void disable(GLenum cap);
// 解決深度沖突
// gl.enable(POLYGON_OFFSET_FILL);
// 指定加到每個(gè)頂點(diǎn)繪制后Z值上的偏移量，偏移量按照公式 m * factor + r * units 計(jì)算，其中m代表頂點(diǎn)所在表面
// 相對(duì)于觀察者的實(shí)現(xiàn)角度，而r表示硬件能夠區(qū)分兩個(gè)Z值之差的最小值
void polygonOffset(GLfloat factor, GLfloat units);
// 雖然上面的方法可以使用，但是在渲染器中用起來還是很麻煩的。
// 解決深度沖突有更好的方式，就是縮小遠(yuǎn)近裁剪面的距離
著色器相關(guān)
// createShader 的 type 參數(shù)
const GLenum FRAGMENT_SHADER = 0x8B30;
const GLenum VERTEX_SHADER = 0x8B31;
// getShaderParameter 的 pname 參數(shù)
const GLenum SHADER_TYPE = 0x8B4F;
const GLenum DELETE_STATUS = 0x8B80;
const GLenum COMPILE_STATUS = 0x8B81;
// 創(chuàng)建由type指定的著色器對(duì)象
// @param type 見上枚舉
WebGLShader? createShader(GLenum type);
// 刪除 shader 指定的著色器對(duì)象
void deleteShader(WebGLShader? shader);
// 將 source 指定的字符串形式的代碼傳入shader指定的著色器 如果之前已經(jīng)向shader傳入了代碼 舊的代碼就會(huì)被替換掉
void shaderSource(WebGLShader shader, DOMString source);
// 編譯 shader 指定的著色器中的源代碼
void compileShader(WebGLShader shader);
// 獲取 shader 指定的著色器中 pname 指定的參數(shù)信息
// @param pname 見上枚舉
any getShaderParameter(WebGLShader shader, GLenum pname);
// 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false
// 則可以通過 此函數(shù)獲取 指定shader 的信息日志
DOMString? getShaderInfoLog(WebGLShader shader);
著色器程序相關(guān)
// getProgramParameter 的 pname 參數(shù)
// 著色器相關(guān) 章節(jié)已定義
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;
// 創(chuàng)建著色器程序?qū)ο?WebGLProgram? createProgram();
// 刪除著色器程序?qū)ο?void deleteProgram(WebGLProgram? program);
// 將 shader 指定的著色器對(duì)象分配給 program 指定的程序?qū)ο?void attachShader(WebGLProgram program, WebGLShader shader);
// 取消 shader 指定的著色器對(duì) program 對(duì)象的分配
void detachShader(WebGLProgram program, WebGLShader shader);
// 連接 program 指定的程序?qū)ο笾械闹?// 目的：
// 1. 保證頂點(diǎn)著色器 和 片元著色器的varying變量同名同類型，且一一對(duì)應(yīng)
// 2. 保證頂點(diǎn)著色器對(duì)每個(gè)varying變量賦了值
// 3. 保證頂點(diǎn)著色器 和 片元著色器中的同名 uniform 變量也是同類型的 無需一一對(duì)應(yīng)
// 4. 保證著色器中的attribute、uniform、varying變量的個(gè)數(shù)沒有超過著色器上限
void linkProgram(WebGLProgram program);
// 獲取 program 指定的程序?qū)ο笾?pname 指定的參數(shù)信息
// @param pname 見上枚舉
any getProgramParameter(WebGLProgram program, GLenum pname);
// 如果通過 getProgramParameter(LINK_STATUS) 獲得返回值 為 false
// 可以通過 此函數(shù)獲取 program 指定的程序?qū)ο蟮男畔⑷罩?DOMString? getProgramInfoLog(WebGLProgram program);
// 驗(yàn)證 WebGLProgram
void validateProgram(WebGLProgram program);
// 告知 WEBGL 系統(tǒng)繪制時(shí)使用的 program 對(duì)象
void useProgram(WebGLProgram? program);
獲取著色器程序相關(guān)代碼
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. \n\n ' + info);
}
擴(kuò)展
通過擴(kuò)展基本上能使 WebGL1 擁有 WebGL2 的能力。
- 獲取擴(kuò)展以及擴(kuò)展支持信息
// 獲取擴(kuò)展
object? getExtension(DOMString name);
// 獲取擴(kuò)展支持信息
sequence<DOMString>? getSupportedExtensions();
- 使用擴(kuò)展字符串獲取擴(kuò)展對(duì)象
| 擴(kuò)展名 | 說明 |
|---|---|
| ANGLE_instanced_arrays | 允許繪制多次同樣的一個(gè)或者多個(gè)對(duì)象 條件：分享頂點(diǎn)數(shù)據(jù)、原始計(jì)數(shù)和類型 |
| EXT_blend_minmax | 通過添加兩個(gè)新的混合方程來擴(kuò)展混合能力 |
| EXT_color_buffer_float | 添加渲染各種浮點(diǎn)格式的能力 |
| EXT_color_buffer_half_float | 添加渲染各種16位浮點(diǎn)格式的能力 |
| EXT_disjoint_timer_query | 提供一種測(cè)量一組GL命令的持續(xù)時(shí)間的方法， 不會(huì)影響渲染管道的穩(wěn)定性 |
| EXT_frag_depth | 能夠在片段著色器中設(shè)置片段深度值 |
| EXT_sRGB | 為 FrameBuffer 提供sRGB支持 |
| EXT_shader_texture_lod | 為著色器提供LOD能力 |
| EXT_texture_filter_anisotropic | 提高斜角觀察質(zhì)量 |
| OES_element_index_uint | 使 drawElements 支持 UNSIGNED_INT 類型 |
| OES_standard_derivatives | 為著色器提供 dFdx/dFdy/fwidth 函數(shù) |
| OES_texture_float | 為材質(zhì)添加 FLOAT 類型 |
| OES_texture_float_linear | 允許材質(zhì)的線性過濾 |
| OES_texture_half_float | 為材質(zhì)添加 16 位支持 |
| OES_texture_half_float_linear | 允許16 位材質(zhì)精度的線性過濾 |
| OES_vertex_array_object | 提供壓縮頂點(diǎn)數(shù)組的方法，指向不同頂點(diǎn)數(shù)據(jù)緩存 |
| WEBGL_color_buffer_float | 允許輸出32位顏色緩沖 |
| WEBGL_compressed_texture_astc | exposes Adaptive Scalable Texture Compression (ASTC) compressed texture formats to WebGL. |
| WEBGL_compressed_texture_atc | exposes 3 ATC compressed texture formats. |
| WEBGL_compressed_texture_etc | exposes 10 ETC/EAC compressed texture formats |
| WEBGL_compressed_texture_etc1 | exposes the ETC1 compressed texture format. |
| WEBGL_compressed_texture_pvrtc | exposes four PVRTC compressed texture formats. |
| WEBGL_compressed_texture_s3tc | exposes four S3TC compressed texture formats. |
| WEBGL_compressed_texture_s3tc_srgb | exposes four S3TC compressed texture formats for the sRGB colorspace. |
| WEBGL_debug_renderer_info | 獲取渲染信息（公司等） |
| WEBGL_debug_shaders | 獲取著色器源碼信息 |
| WEBGL_depth_texture | 定義深度和深度模板材質(zhì) |
| WEBGL_draw_buffers | 允許著色器一次性輸出多張材質(zhì)，對(duì)延遲渲染大有幫助 |
| WEBGL_lose_context | 暴露上下文丟失和恢復(fù)函數(shù) |
查詢狀態(tài)參數(shù)
// 獲取當(dāng)前激活的材質(zhì)枚舉值 getParameter
const GLenum ACTIVE_TEXTURE = 0x84E0;
// 獲取材質(zhì)最大支持?jǐn)?shù)量 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;
// 通過查詢參數(shù)獲取值
any getParameter(GLenum pname);
any getTexParameter(GLenum target, GLenum pname);
// 查詢著色器相關(guān)參數(shù)
any getShaderParameter(WebGLShader shader, GLenum pname);
// 查詢著色器程序相關(guān)參數(shù)
any getProgramParameter(WebGLProgram program, GLenum pname);
其他靜態(tài)變量
/* 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;
其他方法
// 從顏色緩沖區(qū)中讀取 x y width height 參數(shù)確定的矩形塊中的所有像素值 并保存在pixels指定的數(shù)組中
// @param x y 選擇矩形區(qū)域左上角坐標(biāo)
// @param width height 選擇矩形區(qū)域的寬 長(zhǎng)
// @param format 指定像素值的顏色格式 必須為 gl.RGB
// @param type 指定像素值得數(shù)據(jù)格式 必須是 gl.UNSIGNED_BYTE
// @param pixels 類型化數(shù)組 Unit8Array
void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView? pixels);
// 透明混合參數(shù)
// blendFunc 的 sfactor dfactor 參數(shù)
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 參數(shù)
const GLenum DST_COLOR = 0x0306;
const GLenum ONE_MINUS_DST_COLOR = 0x0307;
const GLenum SRC_ALPHA_SATURATE = 0x0308;
// 通過參數(shù) sfactor 和 dfactor 指定進(jìn)行混合操作的函數(shù) 混合后的顏色如下計(jì)算
// 混合后顏色 = 源顏色 * sfactor + 目標(biāo)顏色 * dfactor
// @param sfactor 見此方法上枚舉
// @param dfactor 見此方法上枚舉
void blendFunc(GLenum sfactor, GLenum dfactor);
// 同上 只是分開設(shè)置RGB 和 ALPHA
void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);
// 創(chuàng)建幀緩沖區(qū)對(duì)象
WebGLFramebuffer? createFramebuffer();
// 刪除幀緩沖區(qū)對(duì)象
void deleteFramebuffer(WebGLFramebuffer? framebuffer);
// 創(chuàng)建渲染緩沖區(qū)對(duì)象
WebGLRenderbuffer? createRenderbuffer();
// 刪除渲染緩沖區(qū)對(duì)象
void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);
const GLenum RENDERBUFFER = 0x8D41;
// 將 renderbuffer 指定的渲染緩沖區(qū)對(duì)象綁定在target目標(biāo)上
// 如果 renderbuffer 為 null 則將已經(jīng)綁定在target目標(biāo)上的渲染緩沖區(qū)對(duì)象解除綁定
// @param target 必須是 gl.RENDERBUFFER
void bindRenderbuffer(GLenum target, WebGLRenderbuffer? renderbuffer);
// 表示渲染緩沖區(qū)將替代顏色緩沖區(qū)
const GLenum RGBA4 = 0x8056;
const GLenum RGB5_A1 = 0x8057;
const GLenum RGB565 = 0x8D62;
// 表示渲染緩沖區(qū)將替代深度緩沖區(qū)
const GLenum DEPTH_COMPONENT16 = 0x81A5;
// 表示渲染緩沖區(qū)將替代模板緩沖區(qū)
const GLenum STENCIL_INDEX8 = 0x8D48;
// 創(chuàng)建并初始化渲染緩沖區(qū)的數(shù)據(jù)區(qū)
// @param target 必須是 gl.RENDERBUFFER
// @param internalformat 指定渲染緩沖區(qū)中的數(shù)據(jù)格式 見方法上枚舉
// @param width height 指定渲染緩沖區(qū)的寬度和高度 單位像素
void renderbufferStorage(GLenum target, GLenum internalformat, GLsizei width, GLsizei height);
// 綁定幀緩沖區(qū)
// FBO就是由顏色附件（COLOR_ATTACHMENT0)，深度附件（DEPTH_ATTACHMENT），模板附件（STENCIL_ATTACHMENT）組成的一個(gè)邏輯存儲(chǔ)對(duì)象
// RBO是一個(gè)2D圖像緩沖區(qū)，可以用于分配和存儲(chǔ)顏色值，深度或者模板值，可以作為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;
// 設(shè)置紋理為 attachment 附件
void framebufferTexture2D(GLenum target, GLenum attachment, GLenum textarget, WebGLTexture? texture, GLint level);
// 設(shè)置渲染緩沖區(qū)對(duì)象為 attachment 附件
void framebufferRenderbuffer(GLenum target, GLenum attachment, GLenum renderbuffertarget, WebGLRenderbuffer? renderbuffer);
// 檢查幀緩沖區(qū)
[WebGLHandlesContextLoss] GLenum checkFramebufferStatus(GLenum target);
// 設(shè)置視口寬度
void viewport(GLint x, GLint y, GLsizei width, GLsizei height);
// 鎖定或者釋放深度緩沖區(qū)的寫入操作
// @param flag false 只讀 true 可讀寫
void depthMask(GLboolean flag);
// 返回類似下列上下文參數(shù)
// {
// alpha: true,
// antialias: true,
// depth: true,
// failIfMajorPerformanceCaveat: false,
// premultipliedAlpha: true,
// preserveDrawingBuffer: false,
// stencil: false
// }
// 可以通過下列方法設(shè)置
// canvas.getContext('webgl', { antialias: false, depth: false });
[WebGLHandlesContextLoss] WebGLContextAttributes? getContextAttributes();
// 標(biāo)記上下文是否已經(jīng)丟失
[WebGLHandlesContextLoss] boolean isContextLost();
// 設(shè)置源和目標(biāo)混合因子 值范圍 在0到1之間
void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
// blendEquation 的 mode 參數(shù)
const GLenum FUNC_ADD = 0x8006;
const GLenum FUNC_SUBTRACT = 0x800A;
const GLenum FUNC_REVERSE_SUBTRACT = 0x800B;
// 將RGB混合方程和阿爾法混合方程設(shè)置為單個(gè)方程。
// 混合方程式確定新像素如何與 WebGLFramebuffer 中的像素組合
// @ext EXT_blend_minmax
void blendEquation(GLenum mode);
// 同上 只是分開設(shè)置RGB 和 ALPHA
// @ext EXT_blend_minmax
void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);
// 設(shè)置在繪制或渲染W(wǎng)ebGLFramebuffer時(shí)要開啟或關(guān)閉的顏色分量。
void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);
// 指定一個(gè)為壓縮格式的2D紋理圖片。
void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);
// 指定一個(gè)為壓縮格式的2D紋理子圖片。
void compressedTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, [AllowShared] ArrayBufferView data);
// 復(fù)制2D紋理圖片。
void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border);
// 復(fù)制2D紋理子圖片。
void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);
// cullFace 的 mode 參數(shù)
const GLenum FRONT = 0x0404;
const GLenum BACK = 0x0405;
const GLenum FRONT_AND_BACK = 0x0408;
// 設(shè)置多邊形的正面或反面是否要被排除。
// 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 參數(shù)
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;
// 設(shè)置比較輸入像素深度和深度緩存值得函數(shù)
// gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.NEVER);
// gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;
void depthFunc(GLenum func);
// 設(shè)置從規(guī)范化設(shè)備坐標(biāo)映射到窗口或視口坐標(biāo)時(shí)的深度范圍。
void depthRange(GLclampf zNear, GLclampf zFar);
// 阻斷執(zhí)行，直到之前所有的操作都完成。
void finish();
// 清空緩沖的命令，這會(huì)導(dǎo)致所有命令盡快執(zhí)行完。
void flush();
// 設(shè)置多邊形的正面使用順時(shí)針還是逆時(shí)針繪制表示。
void frontFace(GLenum mode);
// 為 WebGLTexture 對(duì)象生成一組mip紋理映射。
void generateMipmap(GLenum target);
// 返回激活狀態(tài)的attribute變量信息。
WebGLActiveInfo? getActiveAttrib(WebGLProgram program, GLuint index);
// 返回激活狀態(tài)的uniform 變量信息。
WebGLActiveInfo? getActiveUniform(WebGLProgram program, GLuint index);
// 返回附加在 WebGLProgram 上的 WebGLShader 對(duì)象的列表
sequence<WebGLShader>? getAttachedShaders(WebGLProgram program);
// 返回緩沖信息。
any getBufferParameter(GLenum target, GLenum pname);
// 返回錯(cuò)誤信息。
[WebGLHandlesContextLoss] GLenum getError();
// 返回幀緩沖區(qū)的信息。
any getFramebufferAttachmentParameter(GLenum target, GLenum attachment, GLenum pname);
// 返回渲染緩沖區(qū)的信息。
any getRenderbufferParameter(GLenum target, GLenum pname);
// 返回一個(gè)描述著色器數(shù)字類型精度的WebGLShaderPrecisionFormat 對(duì)象。
WebGLShaderPrecisionFormat? getShaderPrecisionFormat(GLenum shadertype, GLenum precisiontype);
// 以字符串形式返回 WebGLShader 的源碼。
DOMString? getShaderSource(WebGLShader shader);
// 返回指定位置的uniform 變量。
any getUniform(WebGLProgram program, WebGLUniformLocation location);
// 返回指定位置的頂點(diǎn)attribute變量。
any getVertexAttrib(GLuint index, GLenum pname);
// 獲取給定索引的頂點(diǎn)attribute位置。
[WebGLHandlesContextLoss] GLintptr getVertexAttribOffset(GLuint index, GLenum pname);
// 給某些行為設(shè)置建議使用的模式。具體建議需要看執(zhí)行的情況。
void hint(GLenum target, GLenum mode);
// 返回給入的緩沖是否有效。
[WebGLHandlesContextLoss] GLboolean isBuffer(WebGLBuffer? buffer);
// 測(cè)試這個(gè)上下文的WebGL功能是否開啟。
[WebGLHandlesContextLoss] GLboolean isEnabled(GLenum cap);
// 返回 Boolean 值，表示給入的 WebGLFrameBuffer 對(duì)象是否有效。
[WebGLHandlesContextLoss] GLboolean isFramebuffer(WebGLFramebuffer? framebuffer);
// 返回一個(gè) Boolean 值，表示給入的 WebGLProgram 是否有效。
[WebGLHandlesContextLoss] GLboolean isProgram(WebGLProgram? program);
[WebGLHandlesContextLoss] GLboolean isRenderbuffer(WebGLRenderbuffer? renderbuffer);
[WebGLHandlesContextLoss] GLboolean isShader(WebGLShader? shader);
[WebGLHandlesContextLoss] GLboolean isTexture(WebGLTexture? texture);
// 設(shè)置線寬。無效
void lineWidth(GLfloat width);
// 為抗鋸齒效果設(shè)置多重取樣覆蓋參數(shù)。
void sampleCoverage(GLclampf value, GLboolean invert);
// 設(shè)置裁剪框。
void scissor(GLint x, GLint y, GLsizei width, GLsizei height);
// 同時(shí)設(shè)置前面和背面的模板測(cè)試函數(shù)，及其引用值。
void stencilFunc(GLenum func, GLint ref, GLuint mask);
// 可分開設(shè)置前面或背面的模板測(cè)試函數(shù)，及其引用值。
void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
// 同時(shí)啟用或禁用，前面和背面的模板測(cè)試掩碼。
void stencilMask(GLuint mask);
// 可分開啟用或禁用，前面和背面的模板測(cè)試掩碼。
void stencilMaskSeparate(GLenum face, GLuint mask);
// 同時(shí)設(shè)置，在前面和背面的模板緩沖區(qū)上執(zhí)行的操作。
void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
// 可分開設(shè)置，在前面和背面的模板緩沖區(qū)上執(zhí)行的操作。
void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);
// 更新當(dāng)前 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
引用
另外：歡迎郵件交流。
