前端图形学(二十三)——你真的只需要了解的原生的WebGL( 五 )
//后面的0表示的是当转换为浮点数时是否应该将整数数值归一化到特定的范围。
//最后一个参数0表示的是偏移量,为0即可。
gl.drawArrays(gl.LINE_LOOP , 0, 4);
//使用线条的模式去渲染。从第1个点始,绘制4个顶点。
最终的矩形就被绘制出来了。
总结:
矩形绘制的每一行代码基本上都有说明。WebGLApi提供了CPU和GPU之间的通讯桥梁。
gl.drawArrays前面我们用到了点的渲染模式,本章节中我们使用到了线的渲染模式。那么对应的ThreeJs中,也有点模型和线模型的绘制方式。这似乎在threejs中找到了webgl的影子~
webgl中,原点的位置默认是画布的中心点。所以我们上面定义的点坐标都是基于中心点来渲染的,所以我们也看到了一个垂直居中的矩形被绘制出来了。
以上是今天所有的分享内容。喜欢的请点赞关注,不喜欢的解散~~
推荐阅读
- 人类|能绘制复杂函数图像,玩家在《我的世界》里打造了巨型图形计算器
- 原神|《原神》玩家用一张图形容魈在1.3版本的处境,实在太真实了!
- 另一个伊甸超越时空的猫第二十三章|另一个伊甸超越时空的猫第二十三章【突入次元漩涡!来自幻影的回响】剧情攻略
- 帝国时代3决定版|帝国时代3决定版图形质量再次升级
- CPU|iPhone12这下牛了!A14图形性能提升72%,亿万果粉掌声雷鸣
- 除了X60 5G 基带 高通推出射频前端 ultraSAW 滤波器技术
- 国产手机巨头发力,小米10这几性能领跑行业前端
- 一加持续发力前端技术,电致变之外,还有备用隐藏相机方案!
- 如何用PPT制作一个“照相机”图形?
- 2020年的前端工程师请收下这几个Vue.js开源框架