WEBGL的初步认识和实践

提到WEBGL会知道他是实现3D渲染效果的，能够展现给我们许多很炫的视觉体验，但是这些3D的效果WEBGL是怎么一步步去实现的呢，下面会有答案：

什么是WEBGL：

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。

优点：
第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

WEBGL实现3D效果的原理：

WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色。三角形是用于绘制模型的最基本的元素，WebGL中需要通过使用JavaScript来生成绘制信息，这些绘制信息包括指定在什么位置绘制三角形、如何绘制三角形、这些三角形的外观长的什么样子（颜色、形状、纹理等等）。然后将这些信息传递给到GPU端，GPU进行处理，最后再返回绘制结果。

WEBGL代码实现：

这里主要做了初始化对象工作，然后执行绘制图形。具体每个函数的执行内容如下：

（1）initGL（canvas）；初始化WEBGL

（2）initShaders()；  getShader()

initShaders使用了getShader来从网页文件的脚本中载入片元着色器和顶点着色器，所以他们可以被编译并传送给WebGL，然后提供给稍后进行的3D场景渲染时使用

getShader函数来获取两样东西，一个是“片元着色器”（Fragment Shader），另一个是“顶点着色器”（Vertex Shader）;

（3）initBuffers():

主要实现把Javascript列表转换成可以传递给WebGL的形式以便填充到当前数组对象中。
triangleVertexPositionBuffer.itemSize = 3;       //每个顶点由3个数字组成
triangleVertexPositionBuffer.numItems = 3;     //3个不同的顶点位置

（4）drawScene()；

检测浏览器是否支持WebGL网址：http://webglreport.sourceforge.net/