WebGL 基础知识
// 好像在浏览器中有数量限制,不包括 OffscreenCanvas
坐标系: -1 -> 1
获取全局变量:
p = ctx.getParameter(ctx.CURRENT_PROGRAM)l = ctx.getUniformLocation(p, 'iTime');ctx.getUniform(p, l)
js 的工作:生成字符串 glsl 程序编译给 GPU,将 buffer 交给 GPU 渲染
矩阵进行坐标变换
WebGL API 只会画点,线,三角形
绘制流程:
- 获取顶点坐标(一般软件导出,缓存在显存)
- 图元装配
- 光栅化
图元装配:
- 将顶点传入顶点着色器(由 OpenGL ES 编写,由 js 以字符串的形式定义并传递给GPU生成)
- attribute 修饰符用于声明由浏览器传输 (buffer,且只有一个) 给顶点着色器的变量值;
- 如果是三维坐标,我们则需要将顶点用矩阵转换成屏幕坐标
- 矩阵以修饰符 uniform (相当于全局变量,每次着色器迭代值一样) 传递给顶点着色器
- 有多少顶点,运行了多少次顶点着色器
光栅化:
- 运行在GPU的"片元着色器"(同样是OpenGL ES程序)来给模型"上色"
- 有多少片元,运行多少次片元着色器
WebGL 使用纹理来绘制文本