如何编写一个WebGL程序 - WebGL

如何编写一个 WebGL 程序

1. 通过 canvas 创建 WebGL 绘图上下文环境

2. 着色器创建(顶点着色器和片元着色器)

   • 创建着色器

   • 加载着色器代码(GLSL)

     • gl_Position: 指定栅格位置
     • gl_FragColor: 指定栅格颜色

   • 着色器代码编译

3. 创建着色器程序

   • 挂载顶点着色器
   • 挂载片元着色器
   • 链接程序

4. 查找着色器变量位置(用来绑定状态数据)

5. 创建缓冲区(用来存储状态数据)

6. 绑定缓存区(将指定状态位置绑定到缓冲区)

7. 缓冲区存入数据(将 js 数据存入 webgl 缓冲区)

8. 指定可视区域

9. 指定当前绘制程序

10. 启用变量属性(着色器变量)

11. 指定着色器变量数据读取方式

12. 指定绘制类型及顶点绘制数量

13. 绘制