开茶会的树洞

主题

WebGL 常用 ​

canvas ​

getContext ​

获取上下文

js
/**
 * @param {String} contextType 2d webgl webgl2 bitmaprenderer
 * @param {Object} contextAttributes 上下文属性
 *
**/
canvas.getContext(contextType, contextAttributes)

gl ​

clearColor ​

设置清空颜色缓冲时的颜色值,但这里不会执行清空，需要执行gl.clear才可以

js
gl.clearColor(red, green, blue, alpha);

gl.getParameter(gl.COLOR_CLEAR_VALUE);
// Float32Array[red, green, blue, alpha]

clear ​

使用预设值来清空缓冲

js
// gl.COLOR_BUFFER_BIT   //颜色缓冲区
// gl.DEPTH_BUFFER_BIT   //深度缓冲区
// gl.STENCIL_BUFFER_BIT  //模板缓冲区
l.clear(mask)
// 相对应的值
gl.getParameter(gl.COLOR_CLEAR_VALUE);
gl.getParameter(gl.DEPTH_CLEAR_VALUE);
gl.getParameter(gl.STENCIL_CLEAR_VALUE);

drawArrays ​

绘制

js
// mode 指定绘制图元的方式
//   gl.POINTS: 绘制一系列点。
//   gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
//   gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
//   gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
//   gl.TRIANGLE_STRIP：绘制一个三角带。 绘制顺序是012，213，234，第二个三角形并不是123，这是为了保证绘制顺序一直是逆时针的
//   gl.TRIANGLE_FAN：绘制一个三角扇。
//   gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
// first 指定从哪个点开始绘制。
// count  指定绘制需要使用到多少个点。

gl.drawArrays(mode, first, count);

getAttribLocation ​

返回了给定WebGLProgram对象中某属性的下标指向位置。

js
gl.getAttribLocation(program, 'vColor');

vertexAttrib1f ​

可以为顶点attibute变量赋值

js
gl.vertexAttrib1f(index, v0);
gl.vertexAttrib2f(index, v0, v1);
gl.vertexAttrib3f(index, v0, v1, v2);
gl.vertexAttrib4f(index, v0, v1, v2, v3);

gl.vertexAttrib1fv(index, value);
gl.vertexAttrib2fv(index, value);
gl.vertexAttrib3fv(index, value);
gl.vertexAttrib4fv(index, value);
js
const a_foobar = gl.getAttribLocation(shaderProgram, 'foobar');
//either set each component individually:
gl.vertexAttrib3f(a_foobar, 10.0, 5.0, 2.0);
//or provide a Float32Array:
const floatArray = new Float32Array([10.0, 5.0, 2.0]);
gl.vertexAttrib3fv(a_foobar, floatArray);

getUniformLocation ​

返回了给定WebGLProgram对象中某属性的下标指向位置。

js
gl.getUniformLocation(program, name)

uniform[1234][fi][v] ​

js
gl.uniform1f(location, v0) // float
gl.uniform1fv(location, value) //float数组 float32或array
gl.uniform1i(location, v0) // int 整数
gl.uniform1iv(location, value) // 整数数组

gl.uniform2f(location, v0, v1)
gl.uniform2fv(location, value)
gl.uniform2i(location, v0, v1)
gl.uniform2iv(location, value)

gl.uniform3f(location, v0, v1, v2)
gl.uniform3fv(location, value)
gl.uniform3i(location, v0, v1, v2)
gl.uniform3iv(location, value)

gl.uniform4f(location, v0, v1, v2, v3)
gl.uniform4fv(location, value)
gl.uniform4i(location, v0, v1, v2, v3)
gl.uniform4iv(location, value)

createBuffer ​

一个用于储存顶点数据或着色数据的WebGLBuffer对象

js
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var buffer = gl.createBuffer();

deleteBuffer ​

删除

js
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var buffer = gl.createBuffer();
gl.deleteBuffer(buffer);

bindBuffer ​

绑定buffer

js
// gl.ARRAY_BUFFER: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
// gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

bufferData ​

向缓冲区写入数据

js
// tartget
// gl.ARRAY_BUFFER: 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
// gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的Buffer。
// usage
// gl.STATIC_DRAW: 缓冲区的内容可能经常使用，而不会经常更改。内容被写入缓冲区，但不被读取。
// gl.DYNAMIC_DRAW: 缓冲区的内容可能经常被使用，并且经常更改。内容被写入缓冲区，但不被读取。
// gl.STREAM_DRAW: 缓冲区的内容可能不会经常使用。内容被写入缓冲区，但不被读取。
var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
// 常用用法
    var points = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
    var n = 3;

    // buffer对象
    var vertexBuffer = gl.createBuffer();

    // 绑定对象到缓冲区指针(顶点数据)上
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // 写入数据到缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
    // 指定attribute变量解析规则
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    // 启用attribute变量 => 即链接缓冲区到attribute变量上
    gl.enableVertexAttribArray(a_Position);

vertexAttribPointer(index, size, type, normalized, stride, offset) ​

告诉显卡从当前绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据。

js
// index 指定要修改的顶点属性的索引。 gl.getAttribLocation
// size 指定每个顶点属性的组成数量，必须是1，2，3或4。
// type 指定数组中每个元素的数据类型可能是：
    // gl.BYTE:  有符号的8位整数，范围[-128, 127]
    // gl.SHORT: 有符号的16位整数，范围[-32768, 32767]
    // gl.UNSIGNED_BYTE: 无符号的8位整数，范围[0, 255]
    // gl.UNSIGNED_SHORT: 无符号的16位整数，范围[0, 65535]
    // gl.FLOAT: 32位IEEE标准的浮点数
// normalized 当转换为浮点数时是否应该将整数数值归一化到特定的范围
    // 对于类型gl.BYTE和gl.SHORT，如果是true则将值归一化为[-1, 1]
    // 对于类型gl.UNSIGNED_BYTE和gl.UNSIGNED_SHORT，如果是true则将值归一化为[0, 1]
    // 对于类型gl.FLOAT和gl.HALF_FLOAT，此参数无效
// stride 一个GLsizei，以字节为单位指定连续顶点属性开始之间的偏移量(即数组中一行长度)。不能大于255。如果stride为0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。
// offset 指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。

enableVertexAttribArray ​

打开属性数组列表中指定索引处的通用顶点属性数组。

disableVertexAttribArray ​

关闭顶点属性数组

uniformMatrix[234]fv() ​

js
gl.uniformMatrix2fv(location, transpose, value);
gl.uniformMatrix3fv(location, transpose, value);
gl.uniformMatrix4fv(location, transpose, value);
// location uniform位置索引
// transpose 指定是否转置矩阵。必须为 false
// value Float32Array 型或者是 GLfloat 序列值.假定值以列主要顺序提供.
gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);

createTexture ​

创建并初始化了一个WebGLTexture

deleteTexture ​

删除材质

pixelStorei(pname, param) ​

js
// pname ，表示处理的方式。
    // gl.UNPACK_FLIP_Y_WEBGL 如果为true 将图片进行y轴翻转
    // gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL 将rgb颜色值的每个分量乘以A，默认为false
    // gl.PACK_ALIGNMENT
    // gl.UNPACK_ALIGNMENT
    // gl.UNPACK_COLORSPACE_CONVERSION_WEBGL
// param 表示 pname 处理方式的参数

activeTexture ​

用来激活指定的纹理单元。

js
gl.activeTexture(gl.TEXTURE1);

bindTexture(target, texture) ​

将给定的 WebGLTexture 绑定到目标（绑定点）。 这里完成了两个事情，一个是开启纹理对象，二是将纹理对象绑定到纹理单元上

js
// arget 可能的值：
//     gl.TEXTURE_2D: 二维纹理。
//     gl.TEXTURE_CUBE_MAP: 立方体映射纹理。
// texture WebGLTexture 对象
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

texParameter[fi] ​

用于设置纹理参数.

js
void gl.texParameterf(GLenum target, GLenum pname, GLfloat param);
void gl.texParameteri(GLenum target, GLenum pname, GLint param);
// target 指定绑定点(目标)。可能的值：
//     gl.TEXTURE_2D: 二维纹理.
//     gl.TEXTURE_CUBE_MAP: 立方体纹理.
// pname    param   参数名，参数值，不同参数有相对应的值
// gl.TEXTURE_MAG_FILTER	纹理放大滤波器 gl.LINEAR (默认值),
//                                        gl.NEAREST.
// gl.TEXTURE_MIN_FILTER	纹理缩小滤波器 gl.LINEAR,
//                                        gl.NEAREST,
//                                        gl.NEAREST_MIPMAP_NEAREST,
//                                        gl.LINEAR_MIPMAP_NEAREST,
//                                        gl.NEAREST_MIPMAP_LINEAR (默认值),
//                                        gl.LINEAR_MIPMAP_LINEAR.
// gl.TEXTURE_WRAP_S	纹理坐标水平填充 s	    gl.REPEAT (默认值),
//                                            gl.CLAMP_TO_EDGE,
//                                            gl.MIRRORED_REPEAT.
// gl.TEXTURE_WRAP_T	纹理坐标垂直填充 t	        gl.REPEAT (默认值),
//                                                gl.CLAMP_TO_EDGE,
//                                                gl.MIRRORED_REPEAT.
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

texImage2D ​

指定了二维纹理图像

js
// 有多种参数配置形式
gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels)
// target  指定纹理的绑定对象.可能的值:
//     gl.TEXTURE_2D: 二维纹理贴图.
    // gl.TEXTURE_CUBE_MAP_POSITIVE_X:立方体映射纹理的正X面。
    // gl.TEXTURE_CUBE_MAP_NEGATIVE_X: 立方体映射纹理的负X面。
    // gl.TEXTURE_CUBE_MAP_POSITIVE_Y: 立方体映射纹理的正Y面。
    // gl.TEXTURE_CUBE_MAP_NEGATIVE_Y: 立方体映射纹理的负Y面。
    // gl.TEXTURE_CUBE_MAP_POSITIVE_Z: 立方体映射纹理的正Z面。
    // gl.TEXTURE_CUBE_MAP_NEGATIVE_Z: 立方体映射纹理的负Z面
// level 指定详细级别. 0级是基本图像等级，n级是第n个金字塔简化级.
// internalformat 指定纹理中的颜色组件.
// format  指定texel数据格式。在 WebGL 1中，它必须与 internalformat 相同
    // gl.ALPHA: 抛弃红色、绿色和蓝色组件并读取alpha组件。
    // gl.RGB:抛弃alpha组件，读取红色、绿色和蓝色组件。
    // gl.RGBA: 从颜色缓冲区读取红色、绿色、蓝色和alpha组件。
    // gl.LUMINANCE: E每个颜色组件是一个亮度组件，alpha值为1.0。
    // gl.LUMINANCE_ALPHA: 每个组件都是亮度/alpha组件。
// type  指定texel数据的数据类型。可能的值:
    // gl.UNSIGNED_BYTE:  gl.RGBA每个通道8位
    // gl.UNSIGNED_SHORT_5_6_5: 5 bits红, 6 bits绿, 5 bits蓝
    // gl.UNSIGNED_SHORT_4_4_4_4: 4 bits红, 4 bits绿, 4 bits蓝, 4 alpha bits.
    // gl.UNSIGNED_SHORT_5_5_5_1: 5 bits红, 5 bits绿, 5 bits蓝, 1 alpha bit.

enable ​

对上下文开启某种特性。

js
// gl.BLEND	激活片元的颜色融合计算。参见 WebGLRenderingContext.blendFunc().
// gl.CULL_FACE	激活多边形正反面剔除。参见WebGLRenderingContext.cullFace().
// gl.DEPTH_TEST	激活深度比较，并且更新深度缓冲区。参见WebGLRenderingContext.depthFunc().
// gl.DITHER	激活在写入颜色缓冲区之前，抖动颜色成分。

// gl.POLYGON_OFFSET_FILL	激活添加多边形片段的深度值偏移。参见WebGLRenderingContext.polygonOffset().

// gl.SAMPLE_ALPHA_TO_COVERAGE	激活通过 alpha 值决定的临时覆盖值计算。（抗锯齿）

// gl.SAMPLE_COVERAGE	激活使用临时覆盖值，位和运算片段的覆盖值。参见 WebGLRenderingContext.sampleCoverage() (en-US).

// gl.SCISSOR_TEST	激活剪裁测试，即丢弃在剪裁矩形范围外的片段。WebGLRenderingContext.scissor().

// gl.STENCIL_TEST	激活模板测试并且更新模板缓冲区。参见WebGLRenderingContext.stencilFunc() (en-US).

disable ​

关闭某种特性

polygonOffset(factor, units) ​

给每个顶点z值的偏移量，计算公式为：m * factor + r * units，m为表面相对于观察者的视线角度，r表示硬件能够区分两个Z值之差的最小值。

drawElements(mode, count, type, offset) ​

js
// mode
// 枚举类型 指定要渲染的图元类型。可以是以下类型：
// gl.POINTS: 画单独的点。
// gl.LINE_STRIP: 画一条直线到下一个顶点。
// gl.LINE_LOOP: 绘制一条直线到下一个顶点，并将最后一个顶点返回到第一个顶点。
// gl.LINES: 在一对顶点之间画一条线。
// gl.TRIANGLE_STRIP
// gl.TRIANGLE_FAN
// gl.TRIANGLES: 为一组三个顶点绘制一个三角形。
// count
// 整数型 指定要渲染的元素数量。
// type
// 枚举类型 指定元素数组缓冲区中的值的类型。可能的值是：
// gl.UNSIGNED_BYTE
// gl.UNSIGNED_SHORT
// 当使用 OES_element_index_uint (en-US) 扩展时：
// gl.UNSIGNED_INT
// offset
//  字节单位 指定元素数组缓冲区中的偏移量。必须是给定类型大小的有效倍数。
gl.drawElements(gl.POINTS, 8, gl.UNSIGNED_BYTE, 0);

createShader ​

用于创建一个 WebGLShader 着色器对象

js
// type
// 参数为gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER两者中的一个。
gl.createShader(type);

deleteShader ​

删除一个参数提供的 WebGLShader对象。如果该WebGLShader对象已经被删除，该方法不会有任何作用,如果该着色器仍在使用，那么它会在程序不再使用该着色器后删除

shaderSource ​

用于设置 WebGLShader 着色器（顶点着色器及片元着色器）的 GLSL 程序代码

js
// void gl.shaderSource(shader, source);
// shader
// 用于设置程序代码的 WebGLShader（着色器对象）。
// source
// 包含 GLSL 程序代码的字符串。

var shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, originalSource);

var source = gl.getShaderSource(shader);

compileShader ​

用于编译一个 GLSL 着色器，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用。

js
   var shader = gl.createShader(gl.VERTEX_SHADER);
   gl.shaderSource(shader, shaderSource);
   gl.compileShader(shader);

getShaderParameter ​

返回给定的着色器信息

js
any gl.getShaderParameter(shader, pname);
//  shader
// 需要获取信息的着色器对象
// pname
// 指定要查询的信息属性名称
// values:
// gl.DELETE_STATUS:标示着色器是否被删除，删除（GL_TRUE）未删除（GL_FALSE）.
// gl.COMPILE_STATUS: 标示着色器是否编译成功，是（GL_TRUE）不是（GL_FALSE）
// gl.SHADER_TYPE: 标示着色器类型，是顶点着色器 (gl.VERTEX_SHADER) 还是片段着色器 (gl.FRAGMENT_SHADER)

getShaderInfoLog ​

获取shader 指定的着色器的信息日志，一般用来编译报错

createProgram ​

创建程序对象

js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
  var info = gl.getProgramInfoLog(program);
  throw 'Could not compile WebGL program. \n\n' + info;
}

deleteProgram ​

删除程序对象 如果正在使用，则等待使用完成后删除

attachShader ​

负责往 WebGLProgram 添加一个片段或者顶点着色器。

js
var program = gl.createProgram();

// 添加一个预先定义的着色器
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
  var info = gl.getProgramInfoLog(program);
  throw "Could not compile WebGL program. \n\n" + info;
}

detachShader ​

从一个 WebGLProgram中分离一个先前附加的片段或者顶点着色器（WebGLShader ）.

js
//顶点着色器
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexSrc);
    gl.compileShader(vertexShader);
    //片元着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//创建 WebGLShader。
    gl.shaderSource(fragmentShader, fragmentSrc); //fragmentSrc 设置一个 WebGLShader 的源码。
    gl.compileShader(fragmentShader);

    //WebGLProgram
    var program = gl.createProgram();//创建 WebGLProgram
    gl.attachShader(program, vertexShader); //往 WebGLProgram 添加一个片段或者顶点着色器。
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);//链接给入的 WebGLProgram 对象
    gl.detachShader(program, vertexShader); //从一个 WebGLProgram 中分离一个先前附加的片段或者顶点着色器;
    gl.detachShader(program, fragmentShader);
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);

linkProgram ​

链接给定的WebGLProgram，从而完成为程序的片元和顶点着色器准备 GPU 代码的过程。

js
var program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(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);
}

getProgramParameter ​

返回WebGLProgram的信息。如果连接成功，则获取一个二进制可执行模块，如果连接失败，可以调用gl.getProgramInfoLog读取报错日志

getProgramInfoLog ​

获取指定程序对象的日志信息

useProgram ​

告知webgl 使用哪个程序绘制

blendFunc ​

定义了一个用于混合像素算法的函数。

js
gl.blendFunc(sfactor, dfactor);
// sfactor
// 为源混合因子指定一个乘数。默认值是 gl.ONE. 有关可能的值，查看下面。
// dfactor
// 为源目标合因子指定一个乘数。默认值是 gl.ZERO. 有关可能的值，查看下面。
名称计算方式描述
gl.ZERO0,0,0,0所有颜色乘 0.
gl.ONE1,1,1,1所有颜色乘 1.
gl.SRC_COLORRS, GS, BS, AS将所有颜色乘上源颜色。
gl.ONE_MINUS_SRC_COLOR1-RS, 1-GS, 1-BS, 1-AS每个源颜色所有颜色乘 1
gl.DST_COLORRD, GD, BD, ADS将所有颜色与目标颜色相乘。
gl.ONE_MINUS_DST_COLOR1-RD, 1-GD, 1-BD, 1-AD将所有颜色乘以 1 减去每个目标颜色。
gl.ONE_MINUS_SRC_ALPHA1-AS, 1-AS, 1-AS, 1-AS将所有颜色乘以 1 减去源 alpha 值。
gl.ONE_MINUS_DST_ALPHA1-AD, 1-AD, 1-AD, 1-AD将所有颜色乘以 1 减去目标 alpha 值。
gl.DST_ALPHAAD, AD, AD, AD将所有颜色与目标 alpha 值相乘。
gl.CONSTANT_COLORRC, GC, BC, AC将所有颜色乘以一个常数颜色。
gl.ONE_MINUS_CONSTANT_COLOR1-RC, 1-GC, 1-BC, 1-AC所有颜色乘以 1 减去一个常数颜色。
gl.CONSTANT_ALPHAAC, AC, AC, AC将所有颜色乘以一个常数。
gl.ONE_MINUS_CONSTANT_ALPHA1-AC, 1-AC, 1-AC, 1-AC所有颜色乘以 1 减去一个常数。
gl.SRC_ALPHA_SATURATEmin(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1将 RGB 颜色乘以源 alpha 值或 1 减去目标 alpha 值中的较小值。alpha 值乘以 1.
gl.SRC_ALPHAAS, AS, AS, AS将所有颜色乘以源 alpha 值。

depthMask ​

设置是否启用写入深度缓冲。 如果设置为false，则会锁定当前深度缓冲区，如果设置为true，则会释放当前深度缓冲区

createFramebuffer ​

创建和初始化WebGLFramebuffer 对象。

deleteFramebuffer ​

用来删除给定的WebGLFramebuffer 对象。如果帧缓冲区已被删除，则此方法无效。.

createRenderbuffer ​

创建并初始化一个 WebGLRenderbuffer 对象。

deleteRenderbuffer ​

用来删除给定的 WebGLRenderbuffer 对象。如果渲染缓冲区已被删除，则此方法无效。

bindRenderbuffer ​

给定的 WebGLRenderbuffer 绑定到一个目标，它必须是 gl.RENDERBUFFER

renderbufferStorage ​

创建和初始化一个渲染缓冲区对象的数据存储。

js
gl.renderbufferStorage(target, internalFormat, width, height);
// target 指定一个渲染缓冲区对象。可能的值：gl.RENDERBUFFER
// internalFormat 指定渲染缓冲区的内部格式。可能的值：
// gl.RGBA4: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits.
// gl.RGB565: 5 red bits, 6 green bits, 5 blue bits.
// gl.RGB5_A1: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit.
// gl.DEPTH_COMPONENT16: 16 depth bits.
// gl.STENCIL_INDEX8: 8 stencil bits.
// gl.DEPTH_STENCIL
// width 指定渲染缓冲区的宽度 (以像素为单位).
// height 指定渲染缓冲区的高度 (以像素为单位).

bindFramebuffer() ​

将给定的 WebGLFramebuffer 绑定到目标。

js
// gl.FRAMEBUFFER: 收集用于渲染图像的颜色，alpha，深度和模板缓冲区的缓冲区数据存储。
// 当使用 WebGL 2 context 时，可以使用以下值：
// gl.DRAW_FRAMEBUFFER: 相当于gl.FRAMEBUFFER， 用作绘图，渲染，清除和写入操作。
// gl.READ_FRAMEBUFFER: 用作读取操作的资源。

framebufferTexture2D ​

指定纹理对象关联到绑定在target目标上的帧缓冲区

js
framebufferTexture2D(target, attachment, textarget, texture, level)
// target 同bindFramebuffer   gl.FRAMEBUFFER
// attachment gl.COLOR_ATTACHMENT0 颜色关联对象
//            gl.DEPTH_ATTACHMENT 深度关联对象
//            gl.STENCIL_ATTACHMENT 模型关联对象
// textarget 同textureImage2D 第一个参数 gl.TEXTURE_2D gl.TEXTURE_CUBE
// texture 纹理对象
// level 指定为0 使用mipmap纹理时指定纹理的层级

framebufferRenderbuffer ​

js
framebufferRenderbuffer(target, attachment, renderbuffertarget, renderbuffer)
// target 同bindFramebuffer   gl.FRAMEBUFFER
// attachment gl.COLOR_ATTACHMENT0 颜色关联对象
//            gl.DEPTH_ATTACHMENT 深度关联对象
//            gl.STENCIL_ATTACHMENT 模型关联对象
// renderbuffertarget 指定被关联的渲染缓冲区对象
// renderbuffer

checkFramebufferStatus ​

检查帧缓冲区是否正确配置

viewPort ​

用来设置视口，即指定从标准设备到窗口坐标的 x、y 仿射变换。

js
void gl.viewport(x, y, width, height);
// x 用来设定视口的左下角水平坐标。默认值：0。
// y 用来设定视口的左下角垂直坐标。默认值：0。
// width 用来设定视口的宽度。默认值：canvas 的宽度。
// height 用来设定视口的高度。默认值：canvas 的高度。

vs ​

js
vec4 gl_Position // 顶点位置
float gl_PointSzie // 点的尺寸(像素数)

fs ​

js
vec4 gl_FragColor // 片元颜色
vec4 gl_FragCoord // 片元的窗口坐标，也就是屏幕坐标
vec4 gl_PointCoord // 片元在被绘制的点内坐标 从0到1 坐标原点在左上，1，1点在右下，只在绘制点的时候有效
vec4 texture2D(sampler2D sample, vec2 coord) // 从指定的纹理上获取coord指定的纹理坐标的像素颜色

概念 ​

齐次坐标 ​

齐次坐标使用如下符号描述：(x,y,z,w),他便等价于(x/w,y/w,z/w),所以如果齐次坐标第四个分量是1，那就可以当他是三维坐标去使用。w的值必须大于等于0，如果w越趋近于0，那么它所表示的点越趋近无穷远，所以在齐次坐标系中有无穷远的概念。齐次坐标，使得用矩阵乘法来描述顶点变换成为可能，三维图形系统在计算过程中，通常使用齐次坐标表示顶点的三维坐标

平移矩阵 ​

js

// 矩阵在左
[x1  y1  z1  1] =  [
                    1  0  0  Tx
                    0  1  0  Ty
                    0  0  1  Tz
                    0  0  0  1
                              ] * [x  y  z  1]

var translateMatrix = new Float32Array([// webgl中矩阵是列主序
		1.0, 0.0, 0.0, 0.0,
		0.0, 1.0, 0.0, 0.0,
		0.0, 0.0, 1.0, 0.0,
		tx, ty, tz, 1.0
	]);

旋转矩阵 ​

js

// 矩阵在左
[x1  y1  z1  1] =  [
                    cosB  -sinB  0  0
                    sinB  cosB   0  0
                    0     0      1  0
                    0     0      0  1
                              ] * [x  y  z  1]

var rotateMatrix = new Float32Array([// webgl中矩阵是列主序
		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
	]);

缩放矩阵 ​

js

// 矩阵在左
[x1  y1  z1  1] =  [
                    Sx  0   0   0
                    0   Sy  0   0
                    0   0   Sz  0
                    0   0   0   1
                              ] * [x  y  z  1]

var scaleMatrix = new Float32Array([// webgl中矩阵是列主序
		sx, 0.0, 0.0, 0.0,
		0.0, sy, 0.0, 0.0,
		0.0, 0.0, sz, 0.0,
		0.0, 0.0, 0.0, 1.0
	]);

几何形状的装配与光栅化 ​

以一个三角形举例

  1. 执行顶点着色器，将缓冲区的点传给attribute a_Position,有几个点就会执行几次顶点着色器。
  2. 当所有的点传入后，开始装配图形，根据gl.drawArrays的第一个参数决定如何装配，即要画什么形状，这里是三角形。
  3. 将上一步装配的图形转化为片元，这个过程叫做光栅化，光栅化后获得组成这个三角形的所有片元，这里的片元就是像素。光栅化过程中，会将顶点着色器传过来的varying 颜色 进行内插。
  4. 光栅化结束后，执行片元着色器，假如上一步得到的片元是n个，那么这里要执行n次片元着色器，并写入颜色缓冲区。在这里获取到的varying颜色已经是完成插值过的，所以这里的varying变量与顶点中的是不一样的。

少参数与多参数创建矢量 ​

js
vec4 v4 = vec4(1.0) // vec4(1.0,1.0,1.0,1.0) 将所有值设置为此
vec4 v4 = vec4(1.0,0.1) // 这样会报错

glsl 中 矩阵为列矩阵 ​

js
vec v2_1 = vec2(1.0,3.0);
vec v2_2 = vec2(2.0,4.0);
mat2 m2_1 = mat2(v2_1,v2_2);
// 1.0,2.0
// 3.0,4.0

webgl绘制顺序 ​

webgl在默认情况下会按照缓冲区的先后顺序进行绘制图形，而且后绘制的图形覆盖先绘制的图形，webgl提供了隐藏面消除功能，这个功能会帮助我们消除那些被遮挡的表面，那些远处的物体会自动被近处的物体挡住，不会被绘制出来。也就是清除深度缓冲区

漫反射 ​

  1. 针对平行光与点光源，漫反射的反射光在各个角度是均匀的。
  2. 漫反射的反射光取决于 入射光颜色、物体表面的颜色、入射光与表面形成的夹角（入射角定义为入射光与表面法线的夹角）
  3. 漫反射光颜色 = 入射光颜色 X 表面基地色 X cos θ
  4. cos θ = 光线方向 · 法线方向 （点积)
  5. 漫反射光颜色 = 入射光颜色 X 表面基地色 X (光线方向 · 法线方向)

环境光（反射） ​

  1. 环境反射是环境光，环境光反射的方向可以认为就是入射光的反方向。
  2. 环境光照射物体的方式个方向均匀，1相等的，所以反射光是各向均匀的
  3. 环境反射光颜色 = 入射光颜色 X 表面基地色

initShader ​

  1. 创建着色器对象 gl.createShader()
  2. 向着色器对象填充着色器程序的源码 gl.shaderSource()
  3. 编译着色器 gl.compileShader()
  4. 创建程序对象 gl.createProgram()
  5. 为程序对象分配着色器 gl.attachShader()
  6. 连接程序对象 gl.linkProgram()
  7. 使用程序对象 gl.useProgram()

坐标计算 ​

模型矩阵 乘以顶点坐标 等于世界坐标 顶点坐标是直接传进去的坐标，也就是未进行模型矩阵变换的坐标

js
u_ModelMatrix * a_Position

透明与不透明物体共存 ​

该思路主要是将透明与不透明的东西分开绘制，先绘制所有不透明的，再绘制所有透明的

  1. 开启隐藏面消除功能 gl.DEPTH_TEST
  2. 绘制所有不透明的物体（a为1.0）这里指先绘制，并不是在着色器里控制，而是在外部控制绘制
  3. 锁定用于进行隐藏面消除的深度缓冲区，使之只读 gl.depthMask(false)
  4. 绘制所有半透明的物体，这里需要根据深度进行排序，从后向前绘制。
  5. 释放深度缓冲区，使之可读可写 gl.depthMask(true)

帧缓冲区对象和渲染缓冲区对象 ​

帧缓冲区是用来顶替颜色缓冲区或者深度缓冲区的，一个帧缓冲区有三个关联对象：颜色关联对象、深度关联对象、模型关联对象，分别代替颜色、深度、模型缓冲区。每个关联对象又可以分为两个类型，纹理对象和渲染缓冲区对象，前者存储纹理对象，后者是一种更加通用的绘图区域，可以向其中写入多种类型的数据

帧缓冲区渲染纹理 ​

  1. 创建帧缓冲区对象 gl.createFramebuffer
  2. 创建纹理对象并设置其尺寸和参数 gl.createTexture gl.bindTexture gl.texImage2D gl.Parameteri
  3. 创建渲染缓冲区对象 gl.createRenderbuffer
  4. 绑定渲染缓冲区对象并设置其尺寸 gl.bindRenderbuffer gl.renderbufferStorage
  5. 将帧缓冲区的颜色关联对象指定为一个纹理对象 gl.framebufferTexture2D
  6. 将帧缓冲区的深度关联对象指定为一个渲染缓冲区对象 gl.framebufferRenderbuffer
  7. 检查帧缓冲区是否正确配置 gl.checkFramebufferStatus
  8. 在帧缓冲区中进行绘制 gl.bindFramebuffer

gl_FragCoord的z值 ​

gl_FragCoord的xy指的是屏幕坐标值，z指的是片元深度，是通过(gl_Position.xyz/gl_Position.w)/2.0+0.5 计算出来的，这个值是被归一到[0.0,1.0]区间的，如果z为0.0，则表示该片元在近裁剪面，如果是1.0，则表示片元在远裁剪面上。

基础

更新于:

夜茶 2020 ~ 2026