WebGL1.0 常用API及参数

最新推荐文章于 2023-01-30 21:15:35 发布
最新推荐文章于 2023-01-30 21:15:35 发布
阅读量854 收藏 1
点赞数 2
分类专栏： webgl
原文链接：https://blog.csdn.net/l461316334/article/details/105124863
版权

WebGL Specifications (khronos.org)

类型以及对象定义

样例 ```js 234234234234 这部分内容主要定义一部分类型和数据结构。 ```

这部分内容主要定义一部分类型和数据结构。

// 由 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;
};

interface WebGLObject {};
interface WebGLBuffer : WebGLObject {};
interface WebGLFramebuffer : WebGLObject {};
interface WebGLProgram : WebGLObject {};
interface WebGLRenderbuffer : WebGLObject {};
interface WebGLShader : WebGLObject {};
interface WebGLTexture : WebGLObject {};
interface WebGLUniformLocation {};

interface WebGLActiveInfo {
    readonly attribute GLint size;
    readonly attribute GLenum type;
    readonly attribute DOMString name;
};

interface WebGLShaderPrecisionFormat {
    readonly attribute GLint rangeMin;
    readonly attribute GLint rangeMax;
    readonly attribute GLint precision;
};

WebGLRenderingContext 对象

属性数据

readonly attribute (HTMLCanvasElement or OffscreenCanvas) canvas;
// 可以在 Web Work 上使用 canvas api
// 需要调用 canvas.transferControlToOffscreen() 将渲染权转移给后台线程
readonly attribute OffscreenCanvas canvas;
readonly attribute GLsizei drawingBufferWidth;
readonly attribute GLsizei drawingBufferHeight;
Example:
gl.uniform1f(u_Width, gl.drawingBufferWidth);
gl.uniform1f(u_Height, gl.drawingBufferHeight);

缓冲区相关方法

// 缓冲区类型
const GLenum DEPTH_BUFFER_BIT               = 0x00000100;
const GLenum STENCIL_BUFFER_BIT             = 0x00000400;
const GLenum COLOR_BUFFER_BIT               = 0x00004000;
// 清理指定缓存内容, 可以通过或运算符一次清理多个缓冲区
void clear(GLbitfield mask);//颜色缓冲区（COLOR_BUFFER_BIT） | 深度缓冲区（DEPTH_BUFFER_BIT） | 模板缓冲区（STENCIL_BUFFER_BIT）

// 将指定缓冲区设置为指定的值（参数范围都是 0.0 - 1.0）
void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha); //默认 0.0, 0.0, 0.0, 0.0
void clearDepth(GLclampf depth); //默认 1.0
void clearStencil(GLint s); //默认 0
Example:
gl.clearColor(0.0, 0.0, 0.0, 1.0);
ctx.clearDepth(1); //reset
ctx.clearStencil(-1);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //执行的意思

绘制相关方法

// 绘制的类型
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;

void drawArrays(GLenum mode,  //按照mode参数指定的方式绘制图形,上面
				GLint first,  //指定从哪个定点开始绘制
				GLsizei count); //指定绘制需要用到多少个顶点
				
void drawElements(GLenum mode, //按照mode参数指定的方式绘制图形,上面
 				  GLsizei count, //指定绘制需要用到多少个顶点
 				  GLenum type, //指定索引值数据类型。包括：UNSIGNED_BYTE、UNSIGNED_SHORT、UNSIGNED_INT 注意这三个
 				  GLintptr offset); //指定索引数组中绘制的偏移位置，以字节为单位
drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, instanceCount)
Example:
gl.drawArrays(gl.TRIANGLES, 0, n);  //n 一般是 数组/3
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); //n 一般是indices.length

ext = gl.getExtension("ANGLE_instanced_arrays");
ext.vertexAttribDivisorANGLE(aOffsetLocation, 1);
ext.vertexAttribDivisorANGLE(aColorLocation, 1);
ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, instanceCount);

缓存对象

// 创建缓冲区对象
WebGLBuffer? createBuffer();

// 允许使用buffer表示的缓冲区对象并将其绑定到target表示的目标上
// 下文中的target参数值
const GLenum ARRAY_BUFFER                   = 0x8892;
const GLenum ELEMENT_ARRAY_BUFFER           = 0x8893;
// const GLenum ARRAY_BUFFER_BINDING           = 0x8894;	
// const GLenum ELEMENT_ARRAY_BUFFER_BINDING   = 0x8895;
void bindBuffer(GLenum target, //上面
				WebGLBuffer? buffer); //createBuffer
				
// 开辟存储空间，向绑定在target上的缓冲区对象写入数据data
// 下文中的usage参数值
const GLenum STREAM_DRAW  = 0x88E0;//STATIC_DRAW 只会向缓冲区写入一次数据 需要绘制很多次
const GLenum STATIC_DRAW  = 0x88E4;//TREAM_DRAW 只会向缓冲区写入一次数据 需要绘制若干次
const GLenum DYNAMIC_DRAW = 0x88E8;//DYNAMIC_DRAW 会向缓冲区对象中多次写入数据 并绘制很多次
void bufferData(GLenum target,  //上面 target
			  	BufferSource? data, //data 类型化数组 比如：Float32Array
			  	GLenum usage); //上面 usage

// 获取由 name 参数指定的 attribute 变量存储地址
GLint getAttribLocation(WebGLProgram program, //program 指定包含顶点或者片元着色器的程序对象
						DOMString name); //name 获取其存储的 attribute 变量名称，最大长度256字节
// 将数据传给由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);


// 数据类型
// 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; //常用

// 将绑定到ARRAY_BUFFER的缓冲区对象分配给index指定的attribute变量
void vertexAttribPointer(GLuint index, //指向attribute变量
						 GLint size, //指定缓冲区中每个顶点分量的个数 xyz的话就3 rgba的话就4
						 GLenum type, //数据格式 见上面的枚举
						 GLboolean normalized, //是否将浮点型数据归一化到[0, 1]或者[-1, 1]区间 false
						 GLsizei stride, //指定相邻两个顶点之间的字节数 FSIZE*5
						 GLintptr offset);//指定缓冲区对象中的偏移量 单位字节 可以利用这个偏移量赋值多个attribute
						 
// 开启index对应的attribute对象
// 开启后不能通过 vertexAttrib[1234]f 传值
void enableVertexAttribArray(GLuint index);//指向attribute变量

// 关闭index对应的attribute对象
void disableVertexAttribArray(GLuint index);//指向attribute变量

// 删除参数buffer表示的缓冲区对象
// @param buffer 缓冲区对象 由createBuffer创建
void deleteBuffer(WebGLBuffer? buffer);
Example:
  var verticesColors = new Float32Array([
     0.0,  0.5,  1.0,  0.0,  0.0, 
    -0.5, -0.5,  0.0,  1.0,  0.0, 
     0.5, -0.5,  0.0,  0.0,  1.0, 
  ]);
  var n = 3;
  var vertexColorBuffer = gl.createBuffer();  
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); //bind的是createbuffer
  gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); //data是数组 data是float32array
  var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');//用字符来获取缓冲区
  gl.enableVertexAttribArray(a_Position);   //启动吗?
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);//数据指向缓冲区 2是读取数 FSIZE * 5是总数 FSIZE * 2是偏移数
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  gl.enableVertexAttribArray(a_Color);  // Enable the assignment of the buffer object
  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); //3 是读取数 FSIZE * 5是总数 FSIZE * 2是偏移数
  drawcall();

var verticesColors = new Float32Array([
  // Vertex coordinates and color
  1.0,1.0,1.0,1.0,1.0,1.0, // v0 White
  -1.0,1.0,1.0,1.0,0.0,1.0, // v1 Magenta
  -1.0,-1.0,1.0,1.0,0.0,0.0, // v2 Red
  1.0,-1.0,1.0,1.0,1.0,0.0, // v3 Yellow
  1.0,-1.0,-1.0,0.0,1.0,0.0, // v4 Green
  1.0,1.0,-1.0,0.0,1.0,1.0, // v5 Cyan
  -1.0,1.0,-1.0,0.0,0.0,1.0, // v6 Blue
  -1.0,-1.0,-1.0,0.0,0.0,0.0 // v7 Black
]);

// Indices of the vertices
var indices = new Uint8Array([0,1,2,0,2,3, // front
  0,3,4,0,4,5, // right
  0,5,6,0,6,1, // up
  1,6,7,1,7,2, // left
  7,4,3,7,3,2, // down
  4,7,6,4,6,5 // back
]);
var vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
var FSIZE = verticesColors.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(gl.program, "a_Color");
gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,FSIZE * 6,FSIZE * 3);
gl.enableVertexAttribArray(a_Color);
//index的话 必须经过这个api
var indexBuffer = gl.createBuffer(); //index 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); //bind buffer
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); // bufferdata
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); //这里的n是index.count 

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); //感觉很少用 这个是不用指向的
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);

var vertex = [
    5, -30,  0,
    50,  -30,  0,
    50,   30,  0,
    5,  30,  0
];
vertexBuffer2 = gl.createBuffer();
vao2 = ext.createVertexArrayOES();
ext.bindVertexArrayOES(vao2);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer2);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);
var index = [
    0, 1, 2,
    0, 2, 3
];
indexBuffer2 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer2);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index), gl.STATIC_DRAW);
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);
ext.bindVertexArrayOES(null);
gl.clear(gl.COLOR_BUFFER_BIT);
ext.bindVertexArrayOES(vao1);
draw();
ext.bindVertexArrayOES(vao2);
draw();
ext.deleteVertexArrayOES(vao);

着色器 uniform 相关

// 获取指定名称的 uniform 变量存储位置
WebGLUniformLocation? getUniformLocation(WebGLProgram program, 
			DOMString name);//指定想要获取其存储位置的uniform变量名称 最大长度256字节

// 将数据传给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);
Example:
  var xformMatrix = new Float32Array([
     cosB, sinB, 0.0, 0.0,
    -sinB, cosB, 0.0, 0.0,
      0.0,  0.0, 1.0, 0.0,
      0.0,  0.0, 0.0, 1.0
  ]);
  var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
  gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
  drawcall();

着色器 texture 相关

// 将图像RGB颜色值每一个分量乘以A 默认false
const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241; 

// 创建纹理对象以存储纹理图像
WebGLTexture? createTexture();

// pixelStorei 中参数pname取值
const GLenum UNPACK_FLIP_Y_WEBGL            = 0x9240; // 对图像进行Y轴反转，默认false
// 使用 pname 和 param 指定的方式加载得到的图像
void pixelStorei(GLenum pname, //上面
				 GLint param); //非0为true、0为false 必须是整数 一般是1
				 
// activeTexture 方法使用的枚举常量
const GLenum TEXTURE0                       = 0x84C0;
const GLenum TEXTURE1                       = 0x84C1; //gl.TEXTURE1 =gl.TEXTURE0+1
const GLenum TEXTURE31                      = 0x84DF;
void activeTexture(GLenum texture);  //上面

//target 参数
const GLenum TEXTURE_2D                     = 0x0DE1; //平面纹理
const GLenum TEXTURE_CUBE_MAP               = 0x8513; //立方体纹理
// 开启 texture 指定的纹理对象，并将其绑定到 target 上。 
// 如果已经通过 gl.activeTexture 激活了某个纹理单元，则纹理对象也会绑定到这个纹理单元上
void bindTexture(GLenum target, //上面
				 WebGLTexture? texture); //createTexture
				 
// 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;
//param 参数
const GLenum NEAREST                        = 0x2600;
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;
const GLenum REPEAT                         = 0x2901; // 平铺式的重复纹理
const GLenum CLAMP_TO_EDGE                  = 0x812F; // 镜像对称式的重复纹理
const GLenum MIRRORED_REPEAT                = 0x8370; // 使用纹理图像的边缘值
// 配置纹理，将param值赋给绑定到目标的纹理对象的pname参数上
void texParameterf(GLenum target,//上面
				   GLenum pname,   //上面
				   GLfloat param); //上面
void texParameteri(GLenum target, GLenum pname, GLint param);

// texImage2D 的 internalformat 参数
const GLenum ALPHA                          = 0x1906; //只读取Alpha通道。
const GLenum RGB                            = 0x1907; //读取RGB三个通道
const GLenum RGBA                           = 0x1908; //读取RGBA四个通道。
const GLenum LUMINANCE                      = 0x1909; //把每个通道视为亮度，alpha取1.0。
const GLenum LUMINANCE_ALPHA                = 0x190A; //每个通道视为 亮度/alpha。
// texImage2D 的 type 参数
const GLenum UNSIGNED_BYTE;   //RGBA每个通道使用8位。
const GLenum UNSIGNED_SHORT_4_4_4_4         = 0x8033; // RGBA RGBA每个通道使用4位。
const GLenum UNSIGNED_SHORT_5_5_5_1         = 0x8034; // RGBA 红色5位、绿色5位、 蓝色5位、alpha用1位。
const GLenum UNSIGNED_SHORT_5_6_5           = 0x8363; // RGB 红色5位、绿色6位，蓝色5位。
// 将 source 指定的图像分配给绑定到目标上的纹理对象
void texImage2D(GLenum target, //上面
				GLint level,   //传入0 （该参数是为金字塔纹理准备的）
				GLint internalformat, //图像的内部格式 见上枚举
				GLenum format,  //format 纹理数据的格式 必须使用与 internalformat 相同的值
				GLenum type, //纹理数据的类型
				TexImageSource source); //source 包含纹理图像的Image对象
				
// 为 WebGLTexture 对象生成一组mip纹理映射。
void generateMipmap(GLenum target);//上面

// 使用texture删除纹理对象
void deleteTexture(WebGLTexture? texture); //createTexture
Example:
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');//var a_Position = gl.getAttribLocation(gl.program, 'a_Position');//用字符来getvar image = new Image();
image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); };
image.src = '../resources/sky.jpg';
function loadTexture(gl, n, texture, u_Sampler, image) {
  var texture = gl.createTexture(); //创建 var vertexColorBuffer = gl.createBuffer();  
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);  // 倒置
  gl.activeTexture(gl.TEXTURE0);  //gl.enableVertexAttribArray(a_Position);   //允许
  gl.bindTexture(gl.TEXTURE_2D, texture); // gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer); 
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //设置参数
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);//数据指向缓冲区 gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW); //data是数组 data是float32array
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.uniform1i(u_Sampler, 0);//讲数据指向usampler gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);//数据指向缓冲区
  gl.clear(gl.COLOR_BUFFER_BIT);  // Clear <canvas>
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);  // Draw the rectangle
}

帧缓冲区

// 创建渲染缓冲区对象
WebGLRenderbuffer? createRenderbuffer();

//target 必须是 gl.RENDERBUFFER
const GLenum RENDERBUFFER                   = 0x8D41;
//renderbuffer
// 将 renderbuffer 指定的渲染缓冲区对象绑定在target目标上 createRenderbuffer
// 如果 renderbuffer 为 null 则将已经绑定在target目标上的渲染缓冲区对象解除绑定
void bindRenderbuffer(GLenum target, //上面
					  WebGLRenderbuffer? renderbuffer); //上面
					  
//internalformat 表示渲染缓冲区将替代颜色缓冲区 
const GLenum RGBA4                          = 0x8056;
const GLenum RGB5_A1                        = 0x8057;
const GLenum RGB565                         = 0x8D62;
const GLenum DEPTH_COMPONENT16              = 0x81A5;  // 表示渲染缓冲区将替代深度缓冲区
const GLenum STENCIL_INDEX8                 = 0x8D48;  // 表示渲染缓冲区将替代模板缓冲区
// 创建并初始化渲染缓冲区的数据区
void renderbufferStorage(GLenum target, //上面
   						 GLenum internalformat, //上面
   						 GLsizei width, //指定渲染缓冲区的宽度和高度 单位像素
   						 GLsizei height);
   						 
// 删除渲染缓冲区对象
void deleteRenderbuffer(WebGLRenderbuffer? renderbuffer);//createRenderbuffer

// 创建帧缓冲区对象
WebGLFramebuffer? createFramebuffer();

// 绑定帧缓冲区
// target
const GLenum FRAMEBUFFER  = 0x8D40;
void bindFramebuffer(GLenum target, //上面
					 WebGLFramebuffer? framebuffer); //createFramebuffer
// attachment 设置纹理为 attachment 附件
const GLenum COLOR_ATTACHMENT0              = 0x8CE0; //颜色附件
const GLenum DEPTH_ATTACHMENT               = 0x8D00; //深度附件
const GLenum STENCIL_ATTACHMENT             = 0x8D20; //模板附件
const GLenum DEPTH_STENCIL_ATTACHMENT       = 0x821A;
// textarget
const GLenum TEXTURE_2D                     = 0x0DE1; //平面纹理
const GLenum TEXTURE_CUBE_MAP               = 0x8513; //立方体纹理
// level 0
void framebufferTexture2D(GLenum target, //上面
						  GLenum attachment, //上面
						  GLenum textarget,  //上面
						  WebGLTexture? texture,  //上面
						  GLint level); //上面
						  
// 设置渲染缓冲区对象为 attachment 附件
// renderbuffertarget gl.RENDERBUFFER
void framebufferRenderbuffer(GLenum target, //上面
							 GLenum attachment, //上面
							 GLenum renderbuffertarget,  //上面
							 WebGLRenderbuffer? renderbuffer); //createFramebuffer

// 删除帧缓冲区对象
void deleteFramebuffer(WebGLFramebuffer? framebuffer);

// 检查帧缓冲区
GLenum checkFramebufferStatus(GLenum target); //上面
Example:
 var texture = gl.createTexture(); // 纹理创建 
 gl.bindTexture(gl.TEXTURE_2D, texture); // Bind the object to target
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);//最后是null
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

 var depthBuffer = gl.createRenderbuffer(); // 创建渲染缓冲区
 gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer); // Bind the object to target
 gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, OFFSCREEN_WIDTH, OFFSCREEN_HEIGHT);

 var framebuffer = gl.createFramebuffer(); //帧缓冲区
 framebuffer.texture = texture; // Store the texture object
 gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); //帧缓冲区 贴图 必须要这个
 gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer); //帧缓冲区 渲染缓冲区

 var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER); //判断是否正确配置

COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_ATTACHMENT = DEPTH_COMPONENT16 renderbuffer
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL renderbuffer

贴图相关

// 指定一个为压缩格式的2D纹理图片。
void compressedTexImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, [AllowShared] ArrayBufferView data);
// 指定一个为压缩格式的2D纹理子图片。如果你的3D场景同时使用的纹理较多或者其他因素导致内存消耗较大，同时需要长时间运行，那么你可以考虑使用压缩纹理
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);
//gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, 512, 512, 0);
// 复制2D纹理子图片。
void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height);
// gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0,0, 0, 0, 16, 16);
// 更新当前 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
Example:
gl.bindTexture(gl.TEXTURE_2D, this.screen);
gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.width, this.height, 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);
// 解决深度冲突
// 指定加到每个顶点绘制后Z值上的偏移量，偏移量按照公式 m * factor + r * units 计算，其中m代表顶点所在表面
// 相对于观察者的实现角度，而r表示硬件能够区分两个Z值之差的最小值
void polygonOffset(GLfloat factor, GLfloat units);

// 虽然上面的方法可以使用，但是在渲染器中用起来还是很麻烦的。
// 解决深度冲突有更好的方式，就是缩小远近裁剪面的距离
Example:
gl.enable(gl.POLYGON_OFFSET_FILL);
gl.drawArrays(gl.TRIANGLES, 0, n/2);   // The green triangle
gl.polygonOffset(1.0, 1.0);          // Set the polygon offset
gl.drawArrays(gl.TRIANGLES, n/2, n/2); // The yellow triangle

着色器相关

// type 参数
const GLenum FRAGMENT_SHADER                  = 0x8B30;
const GLenum VERTEX_SHADER                    = 0x8B31;
WebGLShader? createShader(GLenum type); //上面

// 将 source 指定的字符串形式的代码传入shader指定的着色器 
..如果之前已经向shader传入了代码 旧的代码就会被替换掉
void shaderSource(WebGLShader shader, //createShader
				  DOMString source); //字符串
				  
// 编译 shader 指定的着色器中的源代码
void compileShader(WebGLShader shader);  //createShader

// pname 参数
const GLenum SHADER_TYPE                      = 0x8B4F;
const GLenum DELETE_STATUS                    = 0x8B80;
const GLenum COMPILE_STATUS                   = 0x8B81;
any getShaderParameter(WebGLShader shader,  //createShader
					   GLenum pname); //上面
					   
// 如果 getShaderParameter(shader, COMPILE_STATUS) 返回false 
// 则可以通过 此函数获取 指定shader 的信息日志
DOMString? getShaderInfoLog(WebGLShader shader); //createShader

// 删除 shader 指定的着色器对象
void deleteShader(WebGLShader? shader); //createShader
Example:
 var shader = gl.createShader(type);
 gl.shaderSource(shader, source);
 gl.compileShader(shader);
 var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

着色器程序相关

//  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();

// 将 shader 指定的着色器对象分配给 program 指定的程序对象
void attachShader(WebGLProgram program, //createProgram
				  WebGLShader shader); //createShader

// 取消 shader 指定的着色器对 program 对象的分配
void detachShader(WebGLProgram program, //createProgram
				  WebGLShader shader); //createShader

// 连接 program 指定的程序对象中的着色器
void linkProgram(WebGLProgram program); //createProgram

// 获取 program 指定的程序对象中 pname 指定的参数信息
any getProgramParameter(WebGLProgram program,  //createProgram
						GLenum pname); //上面
						
// 如果通过 getProgramParameter(LINK_STATUS) 获得返回值 为 false
// 可以通过 此函数获取 program 指定的程序对象的信息日志
DOMString? getProgramInfoLog(WebGLProgram program); //createProgram

// 验证 WebGLProgram 
void validateProgram(WebGLProgram program); //createProgram

// 告知 WEBGL 系统绘制时使用的 program 对象
void useProgram(WebGLProgram? program); //createProgram

// 删除着色器程序对象
void deleteProgram(WebGLProgram? program); //createProgram
Example:
gl.useProgram(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. \n\n ' + info);
}
gl.useProgram(SHADER_PROGRAM);

扩展

通过扩展基本上能使 WebGL1 拥有 WebGL2 的能力。
获取扩展以及扩展支持信息

// 获取扩展
object? getExtension(DOMString name);
// 获取扩展支持信息
sequence<DOMString>? getSupportedExtensions();
Example:
gl.getExtension('WEBGL_lose_context').loseContext();

使用扩展字符串获取扩展对象

扩展名说明
ANGLE_instanced_arrays允许绘制多次同样的一个或者多个对象 条件：分享顶点数据、原始计数和类型
EXT_blend_minmax通过添加两个新的混合方程来扩展混合能力
EXT_color_buffer_float添加渲染各种浮点格式的能力
EXT_color_buffer_half_float添加渲染各种16位浮点格式的能力
EXT_disjoint_timer_query提供一种测量一组GL命令的持续时间的方法，不会影响渲染管道的稳定性
EXT_frag_depth能够在片段着色器中设置片段深度值
EXT_sRGB为 FrameBuffer 提供sRGB支持
EXT_shader_texture_lod为着色器提供LOD能力
EXT_texture_filter_anisotropic提高斜角观察质量
OES_element_index_uint使 drawElements 支持 UNSIGNED_INT 类型
OES_standard_derivatives为着色器提供 dFdx/dFdy/fwidth 函数
OES_texture_float为材质添加 FLOAT 类型
OES_texture_float_linear允许材质的线性过滤
OES_texture_half_float为材质添加 16 位支持
OES_texture_half_float_linear允许16 位材质精度的线性过滤
OES_vertex_array_object提供压缩顶点数组的方法，指向不同顶点数据缓存
WEBGL_color_buffer_float允许输出32位颜色缓冲
WEBGL_compressed_texture_astcexposes Adaptive Scalable Texture Compression (ASTC) compressed texture formats to WebGL.
WEBGL_compressed_texture_atcexposes 3 ATC compressed texture formats.
WEBGL_compressed_texture_etcexposes 10 ETC/EAC compressed texture formats
WEBGL_compressed_texture_etc1exposes the ETC1 compressed texture format.
WEBGL_compressed_texture_pvrtcexposes four PVRTC compressed texture formats.
WEBGL_compressed_texture_s3tcexposes four S3TC compressed texture formats.
WEBGL_compressed_texture_s3tc_srgbexposes four S3TC compressed texture formats for the sRGB colorspace.
WEBGL_debug_renderer_info获取渲染信息（公司等）
WEBGL_debug_shaders获取着色器源码信息
WEBGL_depth_texture定义深度和深度模板材质
WEBGL_draw_buffers允许着色器一次性输出多张材质，对延迟渲染大有帮助
WEBGL_lose_context暴露上下文丢失和恢复函数
//WEBGL_debug_renderer_info 
//vendor：ATI Technologies Inc.  //返回值
//renderer：ATI Radeon HD 6490M OpenGL Engine
function getHardwareInfo(gl) {
    var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
    if (!debugInfo) {
        return null;
    }
    var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
    var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
    return {
        vendor: vendor,
        renderer: renderer
    };
}

查询状态参数

// 获取当前激活的材质枚举值 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);
Example:
var maxTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS); //最大纹理数量

其他静态变量

/* 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;


/* 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);
Example:
  var pixels = new Uint8Array(4); // Array for storing the pixel value
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

融合

// 透明混合参数
// sfactor 参数
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;
// dfactor 参数
const GLenum DST_COLOR                      = 0x0306;
const GLenum ONE_MINUS_DST_COLOR            = 0x0307;
const GLenum SRC_ALPHA_SATURATE             = 0x0308;
// 通过参数 sfactor 和 dfactor 指定进行混合操作的函数 混合后的颜色如下计算
// 混合后颜色 = 源颜色 * sfactor + 目标颜色 * dfactor
void blendFunc(GLenum sfactor, //上面
			   GLenum dfactor);//上面
			   
// 同上 只是分开设置RGB 和 ALPHA
void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha);
Example:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);//常用于半透明
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);//ios这么用

视野和裁剪

// 设置视口宽度
void viewport(GLint x, GLint y, GLsizei width, GLsizei height);

// 设置裁剪框。
void scissor(GLint x, GLint y, GLsizei width, GLsizei height);
Example:
gl.enable(gl.SCISSOR_TEST);
gl.scissor(x, y, width, height);
gl.disable(gl.SCISSOR_TEST);
gl.viewport(0, 0, canvas.width, canvas.height);


// blendEquation 的 mode 参数
const GLenum FUNC_ADD                       = 0x8006;
const GLenum FUNC_SUBTRACT                  = 0x800A;
const GLenum FUNC_REVERSE_SUBTRACT          = 0x800B;
// 将RGB混合方程和阿尔法混合方程设置为单个方程。
// 混合方程式确定新像素如何与 WebGLFramebuffer 中的像素组合
void blendEquation(GLenum mode); //上面

// 同上 只是分开设置RGB 和 ALPHA
void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha);

// 设置源和目标混合因子 值范围 在0到1之间
void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);
Example:
gl.blendEquation(gl.FUNC_ADD);
gl.blendEquation(gl.FUNC_SUBTRACT);
gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_SUBTRACT);

正反面

// cullFace 的 mode 参数
const GLenum FRONT                          = 0x0404;
const GLenum BACK                           = 0x0405;
const GLenum FRONT_AND_BACK                 = 0x0408;

// 设置多边形的正面或反面是否要被排除。
void cullFace(GLenum mode);
// 设置多边形的正面使用顺时针还是逆时针绘制表示。
void frontFace(GLenum mode);
Example:
gl.enable(gl.CULL_FACE); //允许
gl.cullFace(gl.FRONT_AND_BACK);
gl.getParameter(gl.CULL_FACE_MODE) === gl.FRONT_AND_BACK;

深度

// 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;

// 设置比较输入像素深度和深度缓存值得函数
void depthFunc(GLenum func);
// 锁定或者释放深度缓冲区的写入操作
// @param flag false 只读 true 可读写
void depthMask(GLboolean flag);
// 设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
void depthRange(GLclampf zNear, GLclampf zFar);
Example:
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.NEVER);
gl.getParameter(gl.DEPTH_FUNC) === gl.NEVER;

获取信息

// 返回激活状态的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);

模板函数

/* StencilOp */
/*      ZERO */
const GLenum KEEP                           = 0x1E00; //保持当前值不变。
const GLenum REPLACE                        = 0x1E01; //设置stencil buffer的值为ref，该ref是通过stencilFunc指定的。
const GLenum INCR                           = 0x1E02; //递增当前stencil buffer的值。如果超过buffer允许的最大值则保持为该值。
const GLenum DECR                           = 0x1E03; //递减当前stencil buffer的值。如果小于0，则设置buffer值为0。
const GLenum INVERT                         = 0x150A; //递减当前stencil buffer的值。如果递减前buffer的值为0，则设置buffer值为允许的最大值。
const GLenum INCR_WRAP                      = 0x8507; //递增当前stencil buffer的值。如果递增前buffer的值已经是允许的最大值，则设置buffer值为0，wrap的含义即如此
const GLenum DECR_WRAP                      = 0x8508; //进行按位取反操作。
//GLenum 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;
// 同时设置前面和背面的模板测试函数，及其引用值。
//ref：用来做stencil测试的参考值。
//mask：指定操作掩码，在测试的时候会先将ref与mask进行与运算，再将ref与buffer中的值进行与运算，最后将两个结果进行比较，比较的方法由func参数所指定。
void stencilFunc(GLenum func, GLint ref, GLuint mask);
//gl.stencilFunc(gl.LESS, 0, 0b1110011);
// 可分开设置前面或背面的模板测试函数，及其引用值。
void stencilFuncSeparate(GLenum face, GLenum func, GLint ref, GLuint mask);
//gl.stencilFuncSeparate(gl.FRONT, gl.LESS, 0.2, 1110011);
// mask来控制写入stencil buffer的有效位
void stencilMask(GLuint mask);
// 可分开启用或禁用，前面和背面的模板测试掩码。
void stencilMaskSeparate(GLenum face, GLuint mask);
//gl.stencilMaskSeparate(gl.FRONT, 110101);
// 控制输出到模板缓冲区的内容到底是什么
//fail：指定当stencil测试未通过时的行为，允许的值为KEEP、ZERO、REPLACE、INCR、INCR_WRAP、DECR、DECR_WRAP、INVERT。
//zfail：指定当stencil测试通过但是depth测试未通过时的行为。允许的值同fail。
//zpass：指定当stencil测试通过且depth测试也通过时的行为，或者当stencil测试通过且当前没有depth buffer或者depth测试被关闭时的行为。允许的值同fail。
void stencilOp(GLenum fail, GLenum zfail, GLenum zpass);
// 可分开设置，在前面和背面的模板缓冲区上执行的操作。
void stencilOpSeparate(GLenum face, GLenum fail, GLenum zfail, GLenum zpass);
//gl.stencilOpSeparate(gl.FRONT, gl.INCR, gl.DECR, gl.INVERT);
Example:
gl = canvas.getContext(glContextNames[i], {stencil: true});
gl.useProgram(program2); //useProgram2
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 0xff); //gl.ALWAYS表示总是通过测试 展示出来的所有都变成1 1与0xFF进行与运算，这里仍然得到是1
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE); //gl.REPLACE表示通过测试时用stencilFunc的ref的值来进行替代
gl.stencilMask(0xff);
gl.clear(gl.STENCIL_BUFFER_BIT);
gl.colorMask(0, 0, 0, 0);//不用画出来
gl.drawArrays(gl.TRIANGLES, 0, maskVertex.length / 3);
gl.useProgram(program);
gl.stencilFunc(gl.EQUAL, 1, 0xff); //如果是等于1 就通过 就能展示
gl.colorMask(1, 1, 1, 1);
gl.drawArrays(gl.TRIANGLES, 0, vertex.length / 3);

// 返回类似下列上下文参数
// { 
//   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();
// 设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。
void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha);
// 阻断执行，直到之前所有的操作都完成。
void finish();
// 清空缓冲的命令，这会导致所有命令尽快执行完。
void flush();
// 为抗锯齿效果设置多重取样覆盖参数。
void sampleCoverage(GLclampf value, GLboolean invert);
//gl.enable(gl.SAMPLE_COVERAGE);
//gl.sampleCoverage(0.5, false);
原文16进制8进制
const GLenum DEPTH_BUFFER_BIT = 0x00000100;0x00000100256
const GLenum STENCIL_BUFFER_BIT = 0x00000400;0x000004001024
const GLenum COLOR_BUFFER_BIT = 0x00004000;0x0000400016384
const GLenum POINTS = 0x0000;0x00000
const GLenum LINES = 0x0001;0x00011
const GLenum LINE_LOOP = 0x0002;0x00022
const GLenum LINE_STRIP = 0x0003;0x00033
const GLenum TRIANGLES = 0x0004;0x00044
const GLenum TRIANGLE_STRIP = 0x0005;0x00055
const GLenum TRIANGLE_FAN = 0x0006;0x00066
const GLenum SRC_COLOR = 0x0300;0x0300768
const GLenum ONE_MINUS_SRC_COLOR = 0x0301;0x0301769
const GLenum SRC_ALPHA = 0x0302;0x0302770
const GLenum ONE_MINUS_SRC_ALPHA = 0x0303;0x0303771
const GLenum DST_ALPHA = 0x0304;0x0304772
const GLenum ONE_MINUS_DST_ALPHA = 0x0305;0x0305773
const GLenum DST_COLOR = 0x0306;0x0306774
const GLenum ONE_MINUS_DST_COLOR = 0x0307;0x0307775
const GLenum SRC_ALPHA_SATURATE = 0x0308;0x0308776
const GLenum FUNC_ADD = 0x8006;0x800632774
const GLenum BLEND_EQUATION = 0x8009;0x800932777
const GLenum BLEND_EQUATION_RGB = 0x8009;0x800932777
const GLenum BLEND_EQUATION_ALPHA = 0x883D;0x883D34877
const GLenum FUNC_SUBTRACT = 0x800A;0x800A32778
const GLenum FUNC_REVERSE_SUBTRACT = 0x800B;0x800B32779
const GLenum BLEND_DST_RGB = 0x80C8;0x80C832968
const GLenum BLEND_SRC_RGB = 0x80C9;0x80C932969
const GLenum BLEND_DST_ALPHA = 0x80CA;0x80CA32970
const GLenum BLEND_SRC_ALPHA = 0x80CB;0x80CB32971
const GLenum CONSTANT_COLOR = 0x8001;0x800132769
const GLenum ONE_MINUS_CONSTANT_COLOR = 0x8002;0x800232770
const GLenum CONSTANT_ALPHA = 0x8003;0x800332771
const GLenum ONE_MINUS_CONSTANT_ALPHA = 0x8004;0x800432772
const GLenum BLEND_COLOR = 0x8005;0x800532773
const GLenum ARRAY_BUFFER = 0x8892;0x889234962
const GLenum ELEMENT_ARRAY_BUFFER = 0x8893;0x889334963
const GLenum ARRAY_BUFFER_BINDING = 0x8894;0x889434964
const GLenum ELEMENT_ARRAY_BUFFER_BINDING = 0x8895;0x889534965
const GLenum STREAM_DRAW = 0x88E0;0x88E035040
const GLenum STATIC_DRAW = 0x88E4;0x88E435044
const GLenum DYNAMIC_DRAW = 0x88E8;0x88E835048
const GLenum BUFFER_SIZE = 0x8764;0x876434660
const GLenum BUFFER_USAGE = 0x8765;0x876534661
const GLenum CURRENT_VERTEX_ATTRIB = 0x8626;0x862634342
const GLenum FRONT = 0x0404;0x04041028
const GLenum BACK = 0x0405;0x04051029
const GLenum FRONT_AND_BACK = 0x0408;0x04081032
const GLenum CULL_FACE = 0x0B44;0x0B442884
const GLenum BLEND = 0x0BE2;0x0BE23042
const GLenum DITHER = 0x0BD0;0x0BD03024
const GLenum STENCIL_TEST = 0x0B90;0x0B902960
const GLenum DEPTH_TEST = 0x0B71;0x0B712929
const GLenum SCISSOR_TEST = 0x0C11;0x0C113089
const GLenum POLYGON_OFFSET_FILL = 0x8037;0x803732823
const GLenum SAMPLE_ALPHA_TO_COVERAGE = 0x809E;0x809E32926
const GLenum SAMPLE_COVERAGE = 0x80A0;0x80A032928
const GLenum INVALID_ENUM = 0x0500;0x05001280
const GLenum INVALID_VALUE = 0x0501;0x05011281
const GLenum INVALID_OPERATION = 0x0502;0x05021282
const GLenum OUT_OF_MEMORY = 0x0505;0x05051285
const GLenum CW = 0x0900;0x09002304
const GLenum CCW = 0x0901;0x09012305
const GLenum LINE_WIDTH = 0x0B21;0x0B212849
const GLenum ALIASED_POINT_SIZE_RANGE = 0x846D;0x846D33901
const GLenum ALIASED_LINE_WIDTH_RANGE = 0x846E;0x846E33902
const GLenum CULL_FACE_MODE = 0x0B45;0x0B452885
const GLenum FRONT_FACE = 0x0B46;0x0B462886
const GLenum DEPTH_RANGE = 0x0B70;0x0B702928
const GLenum DEPTH_WRITEMASK = 0x0B72;0x0B722930
const GLenum DEPTH_CLEAR_VALUE = 0x0B73;0x0B732931
const GLenum DEPTH_FUNC = 0x0B74;0x0B742932
const GLenum STENCIL_CLEAR_VALUE = 0x0B91;0x0B912961
const GLenum STENCIL_FUNC = 0x0B92;0x0B922962
const GLenum STENCIL_FAIL = 0x0B94;0x0B942964
const GLenum STENCIL_PASS_DEPTH_FAIL = 0x0B95;0x0B952965
const GLenum STENCIL_PASS_DEPTH_PASS = 0x0B96;0x0B962966
const GLenum STENCIL_REF = 0x0B97;0x0B972967
const GLenum STENCIL_VALUE_MASK = 0x0B93;0x0B932963
const GLenum STENCIL_WRITEMASK = 0x0B98;0x0B982968
const GLenum STENCIL_BACK_FUNC = 0x8800;0x880034816
const GLenum STENCIL_BACK_FAIL = 0x8801;0x880134817
const GLenum STENCIL_BACK_PASS_DEPTH_FAIL = 0x8802;0x880234818
const GLenum STENCIL_BACK_PASS_DEPTH_PASS = 0x8803;0x880334819
const GLenum STENCIL_BACK_REF = 0x8CA3;0x8CA336003
const GLenum STENCIL_BACK_VALUE_MASK = 0x8CA4;0x8CA436004
const GLenum STENCIL_BACK_WRITEMASK = 0x8CA5;0x8CA536005
const GLenum VIEWPORT = 0x0BA2;0x0BA22978
const GLenum SCISSOR_BOX = 0x0C10;0x0C103088
const GLenum COLOR_CLEAR_VALUE = 0x0C22;0x0C223106
const GLenum COLOR_WRITEMASK = 0x0C23;0x0C233107
const GLenum UNPACK_ALIGNMENT = 0x0CF5;0x0CF53317
const GLenum PACK_ALIGNMENT = 0x0D05;0x0D053333
const GLenum MAX_TEXTURE_SIZE = 0x0D33;0x0D333379
const GLenum MAX_VIEWPORT_DIMS = 0x0D3A;0x0D3A3386
const GLenum SUBPIXEL_BITS = 0x0D50;0x0D503408
const GLenum RED_BITS = 0x0D52;0x0D523410
const GLenum GREEN_BITS = 0x0D53;0x0D533411
const GLenum BLUE_BITS = 0x0D54;0x0D543412
const GLenum ALPHA_BITS = 0x0D55;0x0D553413
const GLenum DEPTH_BITS = 0x0D56;0x0D563414
const GLenum STENCIL_BITS = 0x0D57;0x0D573415
const GLenum POLYGON_OFFSET_UNITS = 0x2A00;0x2A0010752
const GLenum POLYGON_OFFSET_FACTOR = 0x8038;0x803832824
const GLenum TEXTURE_BINDING_2D = 0x8069;0x806932873
const GLenum SAMPLE_BUFFERS = 0x80A8;0x80A832936
const GLenum SAMPLES = 0x80A9;0x80A932937
const GLenum SAMPLE_COVERAGE_VALUE = 0x80AA;0x80AA32938
const GLenum SAMPLE_COVERAGE_INVERT = 0x80AB;0x80AB32939
const GLenum COMPRESSED_TEXTURE_FORMATS = 0x86A3;0x86A334467
const GLenum DONT_CARE = 0x1100;0x11004352
const GLenum FASTEST = 0x1101;0x11014353
const GLenum NICEST = 0x1102;0x11024354
const GLenum GENERATE_MIPMAP_HINT = 0x8192;0x819233170
const GLenum BYTE = 0x1400;0x14005120
const GLenum UNSIGNED_BYTE = 0x1401;0x14015121
const GLenum SHORT = 0x1402;0x14025122
const GLenum UNSIGNED_SHORT = 0x1403;0x14035123
const GLenum INT = 0x1404;0x14045124
const GLenum UNSIGNED_INT = 0x1405;0x14055125
const GLenum FLOAT = 0x1406;0x14065126
const GLenum DEPTH_COMPONENT = 0x1902;0x19026402
const GLenum ALPHA = 0x1906;0x19066406
const GLenum RGB = 0x1907;0x19076407
const GLenum RGBA = 0x1908;0x19086408
const GLenum LUMINANCE = 0x1909;0x19096409
const GLenum LUMINANCE_ALPHA = 0x190A;0x190A6410
const GLenum UNSIGNED_SHORT_4_4_4_4 = 0x8033;0x803332819
const GLenum UNSIGNED_SHORT_5_5_5_1 = 0x8034;0x803432820
const GLenum UNSIGNED_SHORT_5_6_5 = 0x8363;0x836333635
const GLenum FRAGMENT_SHADER = 0x8B30;0x8B3035632
const GLenum VERTEX_SHADER = 0x8B31;0x8B3135633
const GLenum MAX_VERTEX_ATTRIBS = 0x8869;0x886934921
const GLenum MAX_VERTEX_UNIFORM_VECTORS = 0x8DFB;0x8DFB36347
const GLenum MAX_VARYING_VECTORS = 0x8DFC;0x8DFC36348
const GLenum MAX_COMBINED_TEXTURE_IMAGE_UNITS = 0x8B4D;0x8B4D35661
const GLenum MAX_VERTEX_TEXTURE_IMAGE_UNITS = 0x8B4C;0x8B4C35660
const GLenum MAX_TEXTURE_IMAGE_UNITS = 0x8872;0x887234930
const GLenum MAX_FRAGMENT_UNIFORM_VECTORS = 0x8DFD;0x8DFD36349
const GLenum SHADER_TYPE = 0x8B4F;0x8B4F35663
const GLenum DELETE_STATUS = 0x8B80;0x8B8035712
const GLenum LINK_STATUS = 0x8B82;0x8B8235714
const GLenum VALIDATE_STATUS = 0x8B83;0x8B8335715
const GLenum ATTACHED_SHADERS = 0x8B85;0x8B8535717
const GLenum ACTIVE_UNIFORMS = 0x8B86;0x8B8635718
const GLenum ACTIVE_ATTRIBUTES = 0x8B89;0x8B8935721
const GLenum SHADING_LANGUAGE_VERSION = 0x8B8C;0x8B8C35724
const GLenum CURRENT_PROGRAM = 0x8B8D;0x8B8D35725
const GLenum NEVER = 0x0200;0x0200512
const GLenum LESS = 0x0201;0x0201513
const GLenum EQUAL = 0x0202;0x0202514
const GLenum LEQUAL = 0x0203;0x0203515
const GLenum GREATER = 0x0204;0x0204516
const GLenum NOTEQUAL = 0x0205;0x0205517
const GLenum GEQUAL = 0x0206;0x0206518
const GLenum ALWAYS = 0x0207;0x0207519
const GLenum KEEP = 0x1E00;0x1E007680
const GLenum REPLACE = 0x1E01;0x1E017681
const GLenum INCR = 0x1E02;0x1E027682
const GLenum DECR = 0x1E03;0x1E037683
const GLenum INVERT = 0x150A;0x150A5386
const GLenum INCR_WRAP = 0x8507;0x850734055
const GLenum DECR_WRAP = 0x8508;0x850834056
const GLenum VENDOR = 0x1F00;0x1F007936
const GLenum RENDERER = 0x1F01;0x1F017937
const GLenum VERSION = 0x1F02;0x1F027938
const GLenum NEAREST = 0x2600;0x26009728
const GLenum LINEAR = 0x2601;0x26019729
const GLenum NEAREST_MIPMAP_NEAREST = 0x2700;0x27009984
const GLenum LINEAR_MIPMAP_NEAREST = 0x2701;0x27019985
const GLenum NEAREST_MIPMAP_LINEAR = 0x2702;0x27029986
const GLenum LINEAR_MIPMAP_LINEAR = 0x2703;0x27039987
const GLenum TEXTURE_MAG_FILTER = 0x2800;0x280010240
const GLenum TEXTURE_MIN_FILTER = 0x2801;0x280110241
const GLenum TEXTURE_WRAP_S = 0x2802;0x280210242
const GLenum TEXTURE_WRAP_T = 0x2803;0x280310243
const GLenum TEXTURE_2D = 0x0DE1;0x0DE13553
const GLenum TEXTURE = 0x1702;0x17025890
const GLenum TEXTURE_CUBE_MAP = 0x8513;0x851334067
const GLenum TEXTURE_BINDING_CUBE_MAP = 0x8514;0x851434068
const GLenum TEXTURE_CUBE_MAP_POSITIVE_X = 0x8515;0x851534069
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_X = 0x8516;0x851634070
const GLenum TEXTURE_CUBE_MAP_POSITIVE_Y = 0x8517;0x851734071
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Y = 0x8518;0x851834072
const GLenum TEXTURE_CUBE_MAP_POSITIVE_Z = 0x8519;0x851934073
const GLenum TEXTURE_CUBE_MAP_NEGATIVE_Z = 0x851A;0x851A34074
const GLenum MAX_CUBE_MAP_TEXTURE_SIZE = 0x851C;0x851C34076
const GLenum TEXTURE0 = 0x84C0;0x84C033984
const GLenum TEXTURE1 = 0x84C1;0x84C133985
const GLenum TEXTURE2 = 0x84C2;0x84C233986
const GLenum TEXTURE3 = 0x84C3;0x84C333987
const GLenum TEXTURE4 = 0x84C4;0x84C433988
const GLenum TEXTURE5 = 0x84C5;0x84C533989
const GLenum TEXTURE6 = 0x84C6;0x84C633990
const GLenum TEXTURE7 = 0x84C7;0x84C733991
const GLenum TEXTURE8 = 0x84C8;0x84C833992
const GLenum TEXTURE9 = 0x84C9;0x84C933993
const GLenum TEXTURE10 = 0x84CA;0x84CA33994
const GLenum TEXTURE11 = 0x84CB;0x84CB33995
const GLenum TEXTURE12 = 0x84CC;0x84CC33996
const GLenum TEXTURE13 = 0x84CD;0x84CD33997
const GLenum TEXTURE14 = 0x84CE;0x84CE33998
const GLenum TEXTURE15 = 0x84CF;0x84CF33999
const GLenum TEXTURE16 = 0x84D0;0x84D034000
const GLenum TEXTURE17 = 0x84D1;0x84D134001
const GLenum TEXTURE18 = 0x84D2;0x84D234002
const GLenum TEXTURE19 = 0x84D3;0x84D334003
const GLenum TEXTURE20 = 0x84D4;0x84D434004
const GLenum TEXTURE21 = 0x84D5;0x84D534005
const GLenum TEXTURE22 = 0x84D6;0x84D634006
const GLenum TEXTURE23 = 0x84D7;0x84D734007
const GLenum TEXTURE24 = 0x84D8;0x84D834008
const GLenum TEXTURE25 = 0x84D9;0x84D934009
const GLenum TEXTURE26 = 0x84DA;0x84DA34010
const GLenum TEXTURE27 = 0x84DB;0x84DB34011
const GLenum TEXTURE28 = 0x84DC;0x84DC34012
const GLenum TEXTURE29 = 0x84DD;0x84DD34013
const GLenum TEXTURE30 = 0x84DE;0x84DE34014
const GLenum TEXTURE31 = 0x84DF;0x84DF34015
const GLenum ACTIVE_TEXTURE = 0x84E0;0x84E034016
const GLenum REPEAT = 0x2901;0x290110497
const GLenum CLAMP_TO_EDGE = 0x812F;0x812F33071
const GLenum MIRRORED_REPEAT = 0x8370;0x837033648
const GLenum FLOAT_VEC2 = 0x8B50;0x8B5035664
const GLenum FLOAT_VEC3 = 0x8B51;0x8B5135665
const GLenum FLOAT_VEC4 = 0x8B52;0x8B5235666
const GLenum INT_VEC2 = 0x8B53;0x8B5335667
const GLenum INT_VEC3 = 0x8B54;0x8B5435668
const GLenum INT_VEC4 = 0x8B55;0x8B5535669
const GLenum BOOL = 0x8B56;0x8B5635670
const GLenum BOOL_VEC2 = 0x8B57;0x8B5735671
const GLenum BOOL_VEC3 = 0x8B58;0x8B5835672
const GLenum BOOL_VEC4 = 0x8B59;0x8B5935673
const GLenum FLOAT_MAT2 = 0x8B5A;0x8B5A35674
const GLenum FLOAT_MAT3 = 0x8B5B;0x8B5B35675
const GLenum FLOAT_MAT4 = 0x8B5C;0x8B5C35676
const GLenum SAMPLER_2D = 0x8B5E;0x8B5E35678
const GLenum SAMPLER_CUBE = 0x8B60;0x8B6035680
const GLenum VERTEX_ATTRIB_ARRAY_ENABLED = 0x8622;0x862234338
const GLenum VERTEX_ATTRIB_ARRAY_SIZE = 0x8623;0x862334339
const GLenum VERTEX_ATTRIB_ARRAY_STRIDE = 0x8624;0x862434340
const GLenum VERTEX_ATTRIB_ARRAY_TYPE = 0x8625;0x862534341
const GLenum VERTEX_ATTRIB_ARRAY_NORMALIZED = 0x886A;0x886A34922
const GLenum VERTEX_ATTRIB_ARRAY_POINTER = 0x8645;0x864534373
const GLenum VERTEX_ATTRIB_ARRAY_BUFFER_BINDING = 0x889F;0x889F34975
const GLenum IMPLEMENTATION_COLOR_READ_TYPE = 0x8B9A;0x8B9A35738
const GLenum IMPLEMENTATION_COLOR_READ_FORMAT = 0x8B9B;0x8B9B35739
const GLenum COMPILE_STATUS = 0x8B81;0x8B8135713
const GLenum LOW_FLOAT = 0x8DF0;0x8DF036336
const GLenum MEDIUM_FLOAT = 0x8DF1;0x8DF136337
const GLenum HIGH_FLOAT = 0x8DF2;0x8DF236338
const GLenum LOW_INT = 0x8DF3;0x8DF336339
const GLenum MEDIUM_INT = 0x8DF4;0x8DF436340
const GLenum HIGH_INT = 0x8DF5;0x8DF536341
const GLenum FRAMEBUFFER = 0x8D40;0x8D4036160
const GLenum RENDERBUFFER = 0x8D41;0x8D4136161
const GLenum RGBA4 = 0x8056;0x805632854
const GLenum RGB5_A1 = 0x8057;0x805732855
const GLenum RGB565 = 0x8D62;0x8D6236194
const GLenum DEPTH_COMPONENT16 = 0x81A5;0x81A533189
const GLenum STENCIL_INDEX8 = 0x8D48;0x8D4836168
const GLenum DEPTH_STENCIL = 0x84F9;0x84F934041
const GLenum RENDERBUFFER_WIDTH = 0x8D42;0x8D4236162
const GLenum RENDERBUFFER_HEIGHT = 0x8D43;0x8D4336163
const GLenum RENDERBUFFER_INTERNAL_FORMAT = 0x8D44;0x8D4436164
const GLenum RENDERBUFFER_RED_SIZE = 0x8D50;0x8D5036176
const GLenum RENDERBUFFER_GREEN_SIZE = 0x8D51;0x8D5136177
const GLenum RENDERBUFFER_BLUE_SIZE = 0x8D52;0x8D5236178
const GLenum RENDERBUFFER_ALPHA_SIZE = 0x8D53;0x8D5336179
const GLenum RENDERBUFFER_DEPTH_SIZE = 0x8D54;0x8D5436180
const GLenum RENDERBUFFER_STENCIL_SIZE = 0x8D55;0x8D5536181
const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE = 0x8CD0;0x8CD036048
const GLenum FRAMEBUFFER_ATTACHMENT_OBJECT_NAME = 0x8CD1;0x8CD136049
const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL = 0x8CD2;0x8CD236050
const GLenum FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE = 0x8CD3;0x8CD336051
const GLenum COLOR_ATTACHMENT0 = 0x8CE0;0x8CE036064
const GLenum DEPTH_ATTACHMENT = 0x8D00;0x8D0036096
const GLenum STENCIL_ATTACHMENT = 0x8D20;0x8D2036128
const GLenum DEPTH_STENCIL_ATTACHMENT = 0x821A;0x821A33306
const GLenum FRAMEBUFFER_COMPLETE = 0x8CD5;0x8CD536053
const GLenum FRAMEBUFFER_INCOMPLETE_ATTACHMENT = 0x8CD6;0x8CD636054
const GLenum FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT = 0x8CD7;0x8CD736055
const GLenum FRAMEBUFFER_INCOMPLETE_DIMENSIONS = 0x8CD9;0x8CD936057
const GLenum FRAMEBUFFER_UNSUPPORTED = 0x8CDD;0x8CDD36061
const GLenum FRAMEBUFFER_BINDING = 0x8CA6;0x8CA636006
const GLenum RENDERBUFFER_BINDING = 0x8CA7;0x8CA736007
const GLenum MAX_RENDERBUFFER_SIZE = 0x84E8;0x84E834024
const GLenum INVALID_FRAMEBUFFER_OPERATION = 0x0506;0x05061286
const GLenum UNPACK_FLIP_Y_WEBGL = 0x9240;0x924037440
const GLenum UNPACK_PREMULTIPLY_ALPHA_WEBGL = 0x9241;0x924137441
const GLenum CONTEXT_LOST_WEBGL = 0x9242;0x924237442
const GLenum UNPACK_COLORSPACE_CONVERSION_WEBGL = 0x9243;0x924337443
const GLenum BROWSER_DEFAULT_WEBGL = 0x9244;0x924437444

#参考资料
(1条消息) 【WebGL】WebGL API 详解_衷于栖-CSDN博客
http://www.jiazhengblog.com/blog/2016/04/05/2941/

纳铭
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html里怎么让图片平移,react图片缩放、平移（canvas实现）
weixin_34987986的博客
06-05 1034
react图片缩放、平移(position、transform实现)上篇讲到了使用position、transform来实现图片的平移缩放。本篇将采用canvas来实现看看。canvasHTML5 标签用于绘制图像(通过脚本，通常是 JavaScript)。 不过，元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。下面列举本文所用的API：getContext(...
gl-api:WebGL 1.0 API的JSON清单
05-08
gl-api 从抓取的WebGL 1.0 API的JSON列表。 受的软件包的启发，如果要将上下文文档添加到WebGL代码或其他形式的生成文档中，此方法将很有用。 不完整：仍需要在OpenGL ES和WebGL之间进行更好的转换。 如果您想提供...
页面引入百度API报警示问题 A Parser-blocking, cross site (i.e. different eTLD+1) script,
qq_39750019的博客
10-27 1044
问题描述： 页面引入百度API报警示问题 A Parser-blocking, cross site (i.e. different eTLD+1) script, 把api引用url里面的 api 改为 getscript api 改为 getscript以后
玩转WebGL(一)介绍
q641187432的专栏
01-21 1457
WebGL WebGL(Web Graphics Library)是一种绘图标准,使用js绑定调用OpenGL ES的API,通过 HTML5 中 canvas元素实现功能.WebGL1.0版本对应的是OpenGL ES2.0,WebGL2.0版本对应的是OpenGL ES3.0.WebGl的着色语言是GLSL ES. OpenGL ES OpenGL ES(OpenGL for Embedded Systems)早期是作为一种为嵌入式设备而设计的图形编程API.由Khronos集团定义,Khronos是
HTTP请求中hl参数和gl参数的含义
wusuopuBUPT的专栏
11-22 5395
参考：https://developers.google.com/custom-search/docs/xml_results?hl=en&csw=1 1.gl:国家码 gl Description Optional. The gl parameter value is a two-letter country code. For WebSear
第一章 OpenGL概述
lele0503的博客
05-01 296
第一章 OpenGL概述 1.4 OpenGL渲染管线 openGL管线 1.5 第一个程序：深入分析 初始化顶点数组对象 顶点数组对象负责保存一系列顶点的数据，数据保存在顶点缓存对象中，并由当前绑定的顶点数组对象管理。 分配顶点数组对象 void glGenVertexArrays(GLsizei n, GLunit* arrays) 返回n个未使用的对象名到数组arrays当中，用作顶点数...
百度个性地图3D测试(WebGL V1.0).zip
12-22
百度地图WebGL 的离线版本 各自可拿去研究
gl-constants:所有 WebGL 1.0 常量
06-04
所有 WebGL 1.0 常量作为一个模块。 用于测试。 var constants = require ( 'gl-constants' ) texture . minFilter = constants . LINEAR texture . magFilter = constants . NEAREST 您还可以按数字“查找”...
WebGL Specification 1.0.pdf
05-01
有需要的没有积分的，可以发邮件[email protected]，我发给你。 This specification describes an additional rendering ... This context allows rendering using an API that conforms closely to the OpenGL ES 2.0 API.
volumerender:使用 webgl api 1.0 渲染医疗体积数据
06-02
体积渲染 使用 webgl api 1.0 渲染医疗体积数据
WEBGL1.0中文版
12-28
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
glsl入门 常用概念
qq_22188085的博客
08-19 273
webgl glsl
WebGL 上下文(Context)
whl0071的专栏
12-09 550
WebGL 上下文(Context)怎么获取
webgl绘制图形API——drawArrays、drawElements
qq_37987033的博客
01-30 2890
gl.drawArrays()作为webgl中常用的函数图形绘制方法，可以在浏览器按照指定的模式绘制图形，与之相对的gl.drawElements()函数也是常用的绘制函数，本文将介绍二者的区别与使用。
GLES2.0中文API-glGetShaderPrecisionFormat
flycatdeng的专栏
12-03 1027
名称 glGetShaderPrecisionFormat - 返回不同着色器数字格式的范围和精度 C规范 void glGetShaderPrecisionFormat(    GLenum shaderType,      GLenum precisionType,      GLint *range,      GLint *precision); 参数 shaderType 指...
[WebGL入门]二十八，纹理参数
lufy小屋
08-16 3301
为了进一步提升纹理的渲染质量，来介绍一下纹理参数。通过控制纹理参数，可以很好的提升模型的渲染质量，虽然会有些比较难理解的地方，这些可以以后再考虑。 那么，WebGL中的纹理参数到底是什么呢？现在就从这里开始说明。 纹理参数就是跟纹理渲染的时候的质量及特征相关的特性。比如说，即使是使用同样的解析度和大小的图片生成的纹理，如果纹理参数不同，那么渲染的结果差异会很大。
WebGL学习笔记01-------几个重要参数
成长的脚印
09-24 4008
1、scene= new THREE.Scene(); 2、camera的几个函数设置 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); //照相机参数设定 camera.position.set(x,y,z); //照相机的位置 camera.lookAt(scene.position);//这里
three.js THREE.WebGLRenderer 参数
热门推荐
蜗牛速度额的博客
09-07 2万+
WebGLRenderer()中有一些参数我们可以设置，以下这些参数来自于官方文档：   antialias: 　　值：true/false 　　含义：是否开启反锯齿，设置为true开启反锯齿。   precision: 　　值：highp/mediump/lowp 　　含义：着色精度选择。   alpha: 　　值：true/false 　　含义：是否可以设置背景色透明。  ...
cesium 解决 WebGLRenderingContext 丢失问题
纯爱枫若情的博客
11-29 5323
通常来说，对于大多数使用场景，页面上只需要创建一个 cesium 的 viewer 就够用了。 ​ 但是架不住，某些情况下，会需要多个 viewer 的存在。 ​ 了解 cesium 的童鞋应该知道，一般情况下，一个 viewer 对应着一个 webgl context，如果有多个就会存在多个 WebGLRenderingContext。 ​ 如果还不了解 WebGLRenderingContext 是什么的童鞋，建议去了解学习下 webgl 相关的知识，下面送上学习链接：https://develope
webgl1.0和webgl2.0区别
最新发布
06-10
WebGL 1.0和WebGL 2.0是两个不同版本的WebGL标准，它们有以下区别： 1. 渲染技术不同：WebGL 1.0使用的是OpenGL ES 2.0，而WebGL 2.0则使用OpenGL ES 3.0。 2. 功能特性不同：WebGL 2.0相对于1.0增加了很多新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值