【WebGL学习日报】22/09/01 : 绘制点

收获

• attribute与uniform：存储限定符，他表示数据将由外部传给着色器程序，而不用事先写死，使用前需要先获取变量的存储地址
• 获取鼠标在webgl中的坐标：浏览器和canvas坐标系原点在左上角，webgl坐标系原点在中心并且最大为1（1,1,1），需转换后使用

/**
 - 获取点在canvas内的x坐标：clientX-rect.x
 - 将canvas坐标系原点平移到canvas中心后的x坐标：(clientX-rect.x) - rect.width/2 
 - webgl坐标系xy最大为1，所以将canvas的x坐标除以x坐标最大值：((clientX - rect.x) - rect.width / 2) /(rect.width / 2)
 */
let mouseXY = (e, type = 'webgl') => {
    let { clientX, clientY } = e
    let rect = e.target.getBoundingClientRect()
    let x = ((clientX - rect.x) - rect.width / 2) /(rect.width / 2)
    let y = (rect.height / 2 - (clientY - rect.y)) / (rect.height / 2)
    return [x, y]
}

• 新的理解：Element.getBoundingClientRect()返回值中的top/y和left/x 其实就是元素的原点在浏览器客户区client中的坐标
• 顶点着色器进行的是逐顶点的操作，片元着色器进行的逐片元的操作
• 缓冲区对象以及使用流程：可存入多个顶点数据，供着色器使用，以创建更复杂的图像。
  1. 创建缓冲区对象 gl.createBuffer()
  2. 绑定缓冲区对象 gl.bindBuffer()
  3. 将数据写入缓冲区 gl.bufferData()
  4. 将缓冲区分配给一个attribute变量 gl.vertexAttribPointer()
  5. 开启attribute变量 gl.enbleVertexAttribArray()

总结

学习webgl已有3天，对webgl的作用和绘图的流程有了一定的理解，可以使用webgl响应点击事件绘制单个点，一只脚已经踏进来，干吧得
遇到的问题：

1. • 控制台报错入参1类型不为webgl_program，检查js代码未发现问题，后排查原来是片段着色器的问题，未设置浮点数精度，着色器代码出错并不会直接打印在控制台，坑！
2. 到底什么是缓冲区？

22-09-02 : 内存中一块预留的存储空间，在webgl中，缓冲区可以用来给顶点着色器传入多个顶点数据以绘制复杂图形

明日计划： 绘制及变换三角形，理解清除缓冲区