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.0void clearDepth(GLclampf depth); //默认 1.0void clearStencil(GLint s); //默认 0

Example:

gl.clearColor(0.0, 0.0, 0.0, 1.0);ctx.clearDepth(1); //resetctx.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 个别是 数组/3gl.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 verticesvar 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的话 必须通过这个apivar indexBuffer = gl.createBuffer(); //index gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); //bind buffergl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); // bufferdatagl.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中必须是falsevoid 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 默认falseconst 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+1const 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.RENDERBUFFERconst 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();// 绑定帧缓冲区// targetconst 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;// textargetconst GLenum TEXTURE_2D                     = 0x0DE1; //立体纹理const GLenum TEXTURE_CUBE_MAP               = 0x8513; //立方体纹理// level 0void framebufferTexture2D(GLenum target, //下面                          GLenum attachment, //下面                          GLenum textarget,  //下面                          WebGLTexture? texture,  //下面                          GLint level); //下面                          // 设置渲染缓冲区对象为 attachment 附件// renderbuffertarget gl.RENDERBUFFERvoid 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 textureCOLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE texture + DEPTH_ATTACHMENT = DEPTH_COMPONENT16 renderbufferCOLOR_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 trianglegl.polygonOffset(1.0, 1.0);          // Set the polygon offsetgl.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();

应用扩大字符串获取扩大对象

//WEBGL_debug_renderer_info //vendor：ATI Technologies Inc.  //返回值//renderer：ATI Radeon HD 6490M OpenGL Enginefunction 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    };}

查问状态参数

// 获取以后激活的材质枚举值 getParameterconst GLenum ACTIVE_TEXTURE                 = 0x84E0;// 获取材质最大反对数量 getParameterconst 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;// bufferconst 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 类型化数组 Unit8Arrayvoid 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 + 指标色彩 * dfactorvoid blendFunc(GLenum sfactor, //下面               GLenum dfactor);//下面               // 同上 只是离开设置RGB 和 ALPHAvoid 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 和 ALPHAvoid 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 funcconst 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); //useProgram2gl.enable(gl.STENCIL_TEST);gl.stencilFunc(gl.ALWAYS, 1, 0xff); //gl.ALWAYS示意总是通过测试 展现进去的所有都变成1 1与0xFF进行与运算，这里依然失去是1gl.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...