常用方法
getWebGLContext // 获取 WebGL 绘图上下文
1 2 const canvas = document.getElementById('webgl'); const gl = getWebGLContext(canvas);
clearColor // 指定清空 canvas 颜色
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 变量
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 变量的存储位置
1 2 3 const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor); // 颜色 const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation') // 位移,平移 const
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)
1 2 3 4 5 gl.createBuffer // 创建缓冲区对象 gl.bindBuffer //绑定缓冲区对象 gl.bufferData // 将数据写入缓冲区对象 gl.vertexAtrribPointer // 将缓冲区对象分配给一个 attribute 变量 gl.enableVertexAttribArray // 开启 attribute 变量
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:将结果写入自身中 ···
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