WebGL Specifications (khronos.org)
类型以及对象定义
这部分内容次要定义一部分类型和数据结构。
// 由 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); // 默认 0Example:
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.lengthext = 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); //createTextureExample:
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 DOMExceptionExample:
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); //createShaderExample:
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_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 | 定义深度和深度模板材质 |
| 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);参考资料
(1 条音讯)【WebGL】WebGL API 详解_衷于栖 -CSDN 博客
http://www.jiazhengblog.com/b…