webgl入门到成仙【入门-04wegbl的实际绘图思路】

04webgl的实际绘图思路

知识点

webgl的绘图思路

1. 找一台电脑
   • 浏览器里内置的webgl渲染引擎，负责渲染webgl图形，只认GLSL ES语言
2. 找一块手绘板
   • 程序对象，承载GLSL ES语言，翻译GLSL ES语言和js语言，使两者相互童心
3. 找一只触控笔
   • 通过canvas获取的webgl类型的上下文对象，可以向手绘板传递绘图命令，并接收手绘板的状态信息
4. 开始画画
   • 通过webgl类型的上下文对象，用js画画

webgl的绘图步骤

1. 在html中建立canvas画布

2. 在js中获取画布

const canvas = document.querySelector("#canvas")

3. 使用canvas获取webgl上下文

const gl = canvas.getContext(“webgl”)

4. 在script中建立顶点着色器和片元着色器，用的是glsl es语言
   • 顶点着色器：描述顶点的特征，如位置、颜色等。
     • gl_Position = vec4(0.0, 0.0, 0.0, 1.0);表示点的位置，默