一: 什么是WEBGL
学习一项新技术以前咱们有必要了结一下咱们到底在学习啥, 以下摘自“百度词条”:
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
是不是看着就觉得他写了个啥,他说的是啥,我是谁我在哪,其实笔者在第一次接触的时候也是一脸懵逼。接着说下自己的理解吧, 关键词**:可编程渲染管线技术,**这个时候可能又会说这个是啥了,别急慢慢说。
对于可编程渲染管线这一词,咱们得说一下什么是**“渲染管线”:决定在给定虚拟相机、三维物体、光源、照明模式,以及纹理等诸多条件情况下生成或绘制一幅二维图像的过程。咱们这样想一下将所谓的“渲染管线”当作一条流水线,我们的目的是产生一个像素**(片段),那么流水线就必然有其步骤,首先我们得准备**源数据,这里的源数据你可以认为就是所谓的顶点数据,**一般来说顶点数据包含 1:构成物体形体的坐标 2:颜色信息RGB 3:纹理贴图的uv坐标。
那么这一块数据需要打个包,这里所谓的包就引出了我们webgl中的buffer的概念,buffer可以看成就是一块内存用于存放各种数据,我们使用gl.createBuffer()来创建,我们会在下一篇文章中来详细说说如何用代码来构建管线以达到可编程的目的
数据准备好了后接下来会进入几何处理阶段,所谓的几何处理无非做了两件事 1:坐标变换
2:光照计算 。 坐标计算中可能会进行投影变换或者裁剪再或者进行将本地坐标转换到世界坐标的变换这个咱们也打算另起一章来说(webgl真的知识量太大了),光照计算中会将顶点数据中的RGB数据取出根据光照的角度/强度/以及物体本身的反射系数来决定最后的颜色(可怕的webgl,这个也得另开一章)
完成几何处理阶段后我们会进行光栅化的处理,所谓的光栅化就是确定生成多少个像素的过程,因为最后的图像需要映射到canvas上,webgl需要确定我这4个(6个)顶点构成的正方形展示到画布上需要多少个像素。
最后到了像素处理阶段,主要进行的就是一些逐片元(像素)操作,先后是模板测试,深度测试,混合,最后写入帧缓存。
完成以上流程后我们就可以在图上看到我们绘制的图形了,我原本打算说好多话的,但是我仔细一想这个内容太多了,所以打算开一个长期线,在下也是第一次写文章,文章中有什么不对的地方希望大家可以多多指出