一 首先你需要知道的
首先,你得有个chrome浏览器或者FireFoxF浏览器。
其次,我这里用的是WebStorm,比较好用
WebGL 绘制在html5 的 canvas标签上
以后的例子基本都是这个标签,这里写个例子
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
绘制的内容,写到js文件当中(当然也可以写到html文件中,如果你们领导不揍你的话)
运行程序,告诉浏览器在
<body>
加载完成之后执行main()函数,这里写个例子
<body onload="main()">
- 下面开始写一个简单的例子 用黑色填充
<canvas>
区域
代码
function main() {
// 获取<canvas>元素
var canvas = document.getElementById('webgl');
// 获取WebGL绘图上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 指定清空<canvas>颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空 <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
}
- 最后的执行结果,就是一张黑色的方块
- 开始讲解:
main()函数的执行流,包含了以下四个步骤
获取
<canvas>
元素这里使用了
document.getElementById()
函数,传入参数为 webgl,对应<canvas>
的ID函数的返回值存储在变量 canvas 中(此处跟
<canvas>
元素不是同一个意思)
获取WebGL绘图上下文
- 一般来说应该使用
canvas.getContex()
来获取上下文,不同浏览器接受的参数不同, 这里我们写了一个函数来隐藏不同浏览器之间的差异
- 一般来说应该使用
设置
<canvas>
的背景颜色- gl.clearColor()` 来设置RGBA的背景颜色,4个参数分别代表R(红色)G(绿色)B(蓝色)A(透明度)分量,取值范围从0.0到1.0,值越高颜色越亮(越不透明)。
- 指定背景色之后,背景色会驻存在WebGL系统中,在下一次调用
gl.clearColor()
方法钱不会改变。
清空
<canvas>
- 使用
gl.clear()
函数,用之前设定的背景色来填充绘图区域 - 可选参数:
- gl.COLOR_BUFFER_BIT 指定颜色缓存
- gl.DEPTH_BUFFER_BIT 指定深度缓冲区
- gl.STENCIL_BUFFER_BIT 指定模板缓冲区
- 使用
下一节,介绍着色器