常用方法

getWebGLContext // 获取 WebGL 绘图上下文

1 2	const canvas = document.getElementById('webgl'); const gl = getWebGLContext(canvas);

clearColor // 指定清空 canvas 颜色

1	gl.clearColor(0,0,0,1)

clear // 清空
- gl.COLOR_BUFFER_BIT // 颜色缓存区
- gl.DEPTH_BUFFER_BIT // 深度缓冲区
- gl.STENCIL_BUTTFER_BIG // 模版缓存区

1	gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓存区，不是绘图区的canvas，clear 继承自OpenGL，基于基本缓存区模型。

initShaders // 初始化着色器
- VSHEADER_SOURCE // 顶点着色器程序
- FSHEADER_SOURCE // 片元着色器程序，可以理解成像素

1	initShaders(gl, VSHEADER_SOURCE, FSHEADER_SOURCE)

drawArrays // 绘制
- mode
  - gl.POINT 点
  - gl.LINES 线段
  - gl.LINE_STRIP 线条
  - gl.LINE_LOOP 回路
  - gl.TRIANGLES 三角形
  - gl.TRIANGLE_STRIP 三角带
  - gl.TRIANGLE_FAN 三角扇
- first // 0, 表示从第一个顶点
- count // 1，数量，顶点着色器将被执行 count 次

1 2	gl.drawArrays(gl.POINTS, first, count)

attribute 变量：包含顶点的数据
uniform 变量：与顶点无关的数据
getAttribLocation // 获取 attribute > a_Position 变量的存储位置
- gl.program 包含顶点着色器、片元着色器的着色器程序对象

1	const a_Position = gl.getAttribLocation(gl.program, 'a_Position');

vertexAttrib3f // 将顶点位置传输给 attribute 变量

同族函数
gl.vertexAttrib1f(a_Position, 0.0)
gl.vertexAttrib2f(a_Position, 0.0, 0.0)
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)
gl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 1.0)

getUniformLocation // 获取 uniform > u_FragColor 变量的存储位置

1
2
3

const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor); // 颜色
const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation') // 位移，平移
const

uniform4f 指定颜色

同族函数
gl.uniform1f(u_FragColor, 0.0)
gl.uniform2f(u_FragColor, 0.0, 0.0,)
gl.uniform3f(u_FragColor, 0.0, 0.0, 0.0)
gl.uniform4f(u_FragColor, 0.0, 0.0, 0.0, 1.0)

gl.uniform1f(u_Translation, x)
gl.uniform2f(u_Translation, x, y,)
gl.uniform3f(u_Translation, x, y, z)
gl.uniform4f(u_Translation, x, y, z, 0.0)

绘制多个点 - 缓冲区对象

gl.createBuffer  // 创建缓冲区对象
gl.bindBuffer //绑定缓冲区对象
gl.bufferData // 将数据写入缓冲区对象
gl.vertexAtrribPointer // 将缓冲区对象分配给一个 attribute 变量
gl.enableVertexAttribArray // 开启 attribute 变量

旋转 90 度

const ANGLE = 90;
const radian = Math.PI * ANGLE / 180 // 转为弧度制
const cosB = Math.cos(radian);
const sinB = Math.sin(radian);

方式一
const u_CosB = gl.getUniformLocation(g.program, 'u_CosB');
const u_SinB = gl.getUniformLocation(g.program, 'u_SinB');
gl.uniform1f(u_CosB, cosB)
gl.uniform1f(u_SinB, sinB)

方式二：矩阵
const xformMatrix = new Float32Array([
    cosB, sinB, 0, 0,
    -sinB, cosB, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
])
const u_xformmatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
gl.uniformmatrix4fv(u_xformmatrix, false, xformMatrix)

Matrix4 矩阵
···
Matrix4.setIdentity()
Matrix4.setTranslate(x, y, z)
Matrix4.setRotate(angle, x, y, z)
Matrix4.setScale(x, y, z)
Matrix4.translate(x, y, z)
Matrix4.rotate(angle, x, y, z)
Matrix4.scale(x, y, z)
Matrix4.set(m)
Matrix4.elements

前缀 set：将结果写入到 Matrix4 对象中国
无 set：将结果写入自身中
···

requestAnimationFrame
requestAnimation 只有在标签页处于激活状态才生效，requestAnimationFrame 是新引入的方法，还没有实现标准化。google webgl-utils.js 隐藏了浏览器间的差异。
createTexture 纹理对象

const texture = gl.createTexture() // 创建纹理对象
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 将纹理图像进行反转
gl.activeTexture(gl.TEXTURE0) // 开启0号纹理单元
gl.bindTexture(gl.TEXTURE_2D, texture); // 绑定纹理对象
gl.textParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) // 配置纹理参数
gl.textImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGEND_BYTE, image) // 配置纹理图像，image = new Image()
gl。uniform1i(u_Sampler, 0) // 将0号纹理传递给色器中的取样器变量