前端图形学（二十三）——你真的只需要了解的原生的WebGL_欢迎来到【畅哥聊技术】前端图形学相关

欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上一章节，我们讲到了原生的WebGL的一些概念和涉及到的一些名词，比如着色器。我们讲到的所有的原生WebGL知识点都是为了后面的ThreeJs打下基础！

这一章节的内容会介绍一些新的API以及CPU和GPU之间的通讯交互。不必过于深究代码本身大家只需要知道其中的过程即可，本章节中的代码我也会一一解释。

绘制一个矩形

看这矩形，多正~

联想一下我们的canvas2d中绘制矩形的方法。一是直接调用API context.strokeRect(x,y,w,h);二是，描绘出4个点，然后依然连线。

那么在原生的webgl当中，没有直接可以调用绘制矩形的接口。因此，我们要创建4个点来绘制出矩形来。

从上一章节我们知道，我们的顶点是通过WebGL API去编译着色器代码然后发送给GPU进行绘制的，上一节我们绘制的是一个点。于是我们很轻松的在顶点着色器中把这个点坐标写死。

前端图形学（二十三）——你真的只需要了解的原生的WebGL