来看这篇文章的同学一定是被近来的3D场景效果所震撼，抱着‘这TM怎么做的！’的来心态来学习webgl的吧。

也行你已经有threejs或其他3d场景开发框架的使用经验，却不知道webgl原生到底怎么写。本系列将从最简单最基础的原生API入手，手把手教你写webgl

准备webgl上下文

同二维场景一样，我们需要一个画布来绘制，在html中建立一个 canvas 元素。代码如下：

// index.html  
      
        
      

start() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。

// index.jsfunction start() {  var canvas = document.getElementById("main");  // 初始化 WebGL 上下文  var gl = initWebGL(canvas);  // 开始渲染  ......}

function initWebGL(canvas) {  // 创建全局变量  var gl = null;    try {    // 尝试获取标准上下文，如果失败，回退到试验性上下文    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");  }  catch(e) {}    // 如果没有GL上下文，马上放弃  if (!gl) {    alert("WebGL初始化失败，可能是因为您的浏览器不支持。");    gl = null;  }  return gl;}

getContext('context 参数') 返回参数支持的上下文，如果参数无效，则返回 null 。我们在画二维canvas的时候才用的是.getContext('2d')，返回 CanvasRenderingContext2D 对象 ;三维却并不是想当然的'3d'而是canvas.getContext("webgl") 或者 canvas.getContext("experimental-webgl")，返回一个WebGLRenderingContext 对象。不同的浏览器内核支持的参数不同，具体如下：

清屏clearColor

画过canvas的亲应该都会使用一个颜色填充来清理帧画面。webgl同意需要这样一个清理函数在绘制下一画面的时候。webgl才用rgba的四色系统来定义颜色。与我们平时所用的颜色系统不一样的是，RGBA四个分量使用0.0~0.1之间的数值来表示。前三个分量表示三原色的饱和度，最后一个表示不透明度。

值得一提的是，webgl计算都是才用浮点计算，所以数值一般1写为1.0,数值 0 写为 0.0

这里我们需要进行四个初始化步骤

1. 设置清除颜色(蓝色，不透明)

   gl.clearColor(0.0, 1.0, 1.0, 1.0);

2. 深度清理

   gl.clearDepth(1.0);

3. 开启“深度测试”, Z-缓存

   gl.enable(gl.DEPTH_TEST);

4. 设置深度测试，近的物体遮挡远的物体

   gl.depthFunc(gl.LEQUAL);

清理画布的时候调用 gl.clear(gl.COLOR_BUFFER_BIT);来清理画布。