绘制步骤

1.初始化一个画图

<canvas id='webgl' width  height>

2. 创建一个webgl上下文

const gl = document.querySelector('#webgl').getContext('webgl')

3.创建着色器程序

const vertexShader = gl.createShader(gl_VERTEX_SHADER) // 顶点着色器

const  fragmentShader = gl.createShader( gl_FRAG.EMT_SHADER ) // 片元着色器

绑定数据源

const vertexShaderSource = `
    attribute vec4 a_position;
    uniform mat4 u_mat;
    void main() {
        gl_Position = a_position;
    }
`
【解释：顶点着色器必须要有main 函数，是强类型语言，每段代码必须加;这里定义一个vec4 的顶点位置，传给 gl_Position, 至于为什么是 a_position 是为了区分 是属性变量 还是全局变量，还是关于纹理的，比如：uniform mat4 u_mat; 表示矩阵】

const  fragmentShaderSource = `
    void main() {
     gl_FragColor = vec4(1.0,0.0,0.0, 1);
    }
【其实就是给每个像素上红色， vec4 ===  rgba(r, g , b, alpha) 这里就是上纯红色 】
//绑定数据

gl_shaderSource(vertexShader. vertexShaderSource)
gl_shaderSource(fragmentShader, fragmentShaderSource)

//编译使用着色器

gl.compilerShader(vertexShader)
gl.compilerShader(fragmentShader)

const program = gl.createProgram() 
gl.attachShader(program , vertexShader)
gl_attachShader(program , fragmentShader)

gl.linkProgram(program)
gl.useProgram(program)

如何判断语法是否正确？
【
const success = gl.getProgramParameter(program, gl.LINK_STATUS)
if (success) {
  gl.useProgram(program)
  return program
}
console.error(gl.getProgramInfoLog(program), 'test---')
gl.deleteProgram(program)
**getProgramParameter** 这个方法用来判断 我们着色器 **glsl** 语言写的是不是对的， 然后你可以通过 **getProgramInfoLog**这个方法 类似于打 日志 去发现错误了。
】
`
// 写入缓冲区数据
const buffer = gl_createBuffer()
gl.bindBuffer(gl_ARRAY_BUFFER， buffer)
//gl.bindBuffer()函数把标识符buffer设置为**当前缓冲区**，后面的所有的数据都会都会被放入当前缓冲区，**直到bindBuffer绑定另一个当前缓冲区**。
const data = new Float32Array([0.0, 0.0, -0.3, -0.3, 0.3, -0.3]) //顶点数据
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)
// 从缓冲区读取数据
const gaLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertextAttribArray(gaLocation);
//绑定指向
gl.vertexAttribPointer(gaLocation, 2, gl.FLOAT, false, 0 ,0)

//开始渲染
gl.clearColor = (0,0,0,0);
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0 ,3)

矩阵的使用

//顶点着色器中添加 uniform mat4 u_mat; //矩阵代码 const matLocation = gl.getUniformLocation(program, 'u_mat') //得到 uniform 位置 const mat = new Float32Array([ Tx, 0.0, 0.0, 0.0, 0.0, Ty, 0.0, 0.0, 0.0, 0.0, Tz, 0.0, 0.0, 0.0, 0.0, 1.0, ]) //Tx, Ty, Tz 对应的其实就是 x y z 轴缩放的比例。 gl.uniformMatrix4fv(matLocation, false, mat) // p1: 全局变量位置 p2：是否转置矩阵 p3：矩阵数据

WEBGL学习-绘制三角形操作及原理