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

//后面的0表示的是当转换为浮点数时是否应该将整数数值归一化到特定的范围。

//最后一个参数0表示的是偏移量,为0即可。

gl.drawArrays(gl.LINE_LOOP , 0, 4);

//使用线条的模式去渲染。从第1个点始,绘制4个顶点。

最终的矩形就被绘制出来了。

总结:

矩形绘制的每一行代码基本上都有说明。WebGLApi提供了CPU和GPU之间的通讯桥梁。

gl.drawArrays前面我们用到了点的渲染模式,本章节中我们使用到了线的渲染模式。那么对应的ThreeJs中,也有点模型和线模型的绘制方式。这似乎在threejs中找到了webgl的影子~

webgl中,原点的位置默认是画布的中心点。所以我们上面定义的点坐标都是基于中心点来渲染的,所以我们也看到了一个垂直居中的矩形被绘制出来了。

以上是今天所有的分享内容。喜欢的请点赞关注,不喜欢的解散~~

推荐阅读