常用方法

  • getWebGLContext // 获取 WebGL 绘图上下文
plaintext
1
2
const canvas = document.getElementById('webgl');
const gl = getWebGLContext(canvas);
  • clearColor // 指定清空 canvas 颜色
plaintext
1
gl.clearColor(0,0,0,1)
  • clear // 清空
    • gl.COLOR_BUFFER_BIT // 颜色缓存区
    • gl.DEPTH_BUFFER_BIT // 深度缓冲区
    • gl.STENCIL_BUTTFER_BIG // 模版缓存区
plaintext
1
gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓存区，不是绘图区的canvas，clear 继承自OpenGL，基于基本缓存区模型。
  • initShaders // 初始化着色器
    • VSHEADER_SOURCE // 顶点着色器程序
    • FSHEADER_SOURCE // 片元着色器程序，可以理解成像素
plaintext
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 次
plaintext
1
2
gl.drawArrays(gl.POINTS, first, count)

  • attribute 变量：包含顶点的数据
  • uniform 变量：与顶点无关的数据
  • getAttribLocation // 获取 attribute > a_Position 变量的存储位置
    • gl.program 包含顶点着色器、片元着色器的着色器程序对象
plaintext
1
const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  • vertexAttrib3f // 将顶点位置传输给 attribute 变量
plaintext
1
2
3
4
5
同族函数
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 变量的存储位置
plaintext
1
2
3
const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor); // 颜色
const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation') // 位移，平移
const
  • uniform4f 指定颜色
plaintext
1
2
3
4
5
6
7
8
9
10
同族函数
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)
  • 绘制多个点 - 缓冲区对象
plaintext
1
2
3
4
5
gl.createBuffer  // 创建缓冲区对象
gl.bindBuffer //绑定缓冲区对象
gl.bufferData // 将数据写入缓冲区对象
gl.vertexAtrribPointer // 将缓冲区对象分配给一个 attribute 变量
gl.enableVertexAttribArray // 开启 attribute 变量
  • 旋转 90 度
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 纹理对象

plaintext
1
2
3
4
5
6
7
8
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号纹理传递给色器中的取样器变量

  • pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) // 将纹理图像进行反转

// TODO