来看这篇文章的同学一定是被近来的3D场景效果所震撼，抱着‘这TM怎么做的！’的来心态来学习webgl的吧。
也行你已经有threejs或其他3d场景开发框架的使用经验，却不知道webgl原生到底怎么写。本系列将从最简单最基础的原生API入手，手把手教你写webgl
准备webgl上下文
同二维场景一样，我们需要一个画布来绘制，在html中建立一个 canvas 元素。代码如下：
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Webgl Hello world!</title>
</head>
<body onload="start()">
<canvas id='main' width=500 height=400></canvas>
<script src="./index.js"></script>
</body>
</html>start() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。
// index.js
function 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
这里我们需要进行四个初始化步骤
-
设置清除颜色(蓝色，不透明)
gl.clearColor(0.0, 1.0, 1.0, 1.0); -
深度清理
gl.clearDepth(1.0); -
开启“深度测试”, Z-缓存
gl.enable(gl.DEPTH_TEST); -
设置深度测试，近的物体遮挡远的物体
gl.depthFunc(gl.LEQUAL);
清理画布的时候调用 gl.clear(gl.COLOR_BUFFER_BIT);来清理画布。
这样我们便准好了一个webgl的画布可以开始绘图了。
demo地址：http://codepen.io/leanneCC/pe...