webgl基础

1.导入相关文件

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>

2.在html元素中创建Canvas画布，并且对其css进行相关设置。该画布具有2D绘图和3D绘图的功能。

<canvas id="webgl"></canvas>

3.通过JavaScript获取上面创建的Canvas元素返回一个Canvas对象。Canvas对象也可以不通过标签创建，然后id方式获取，也可以通过DOM直接创建。

//获取
var canvas= document.getElementById('webgl')
//直接创建后添加
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

4.获取Canvas上下文，执行canvas.getContext('2d')返回对象具有一系列绘制二维图形的方法，比如绘制直线、圆弧等API。执行canvas.getContext('webgl');返回对象具有一系列绘制渲染三维场景的方法，也就是WebGL API。

var c =canvas.getContext('2d');
var gl=canvas.getContext('webgl');

5.编写着色器文件

可以直接将着色器文件写成字符串

var vertexShaderSource = '' +    
    'void main(){' + 
    '   gl_PointSize=20.0;' +   
    '   gl_Position =vec4(0.0,0.0,0.0,1.0);' +    
    '}';

或者将着色器文件写在