一、WebGl基础
1.什么是webgl
webgl是一种3D绘图协议**，**衍生于 OpenGL ES2.0，可以结合 Html5 和 JavaScript 在网页上绘制和渲染二/三维图形。
2.webgl的用途
可以用做数据可视化、图形/游戏引擎、VR、物品3d展示、地图等等...
3.与canvas api的区别
同样是使用canvas.getContext()获取绘制对象
canvas api绘制的是2D内容，主要通过CanvasRenderingContext2D接口来完成webgl绘制的是3D内容，主要通过WebGLRenderingContext接口来完成
js
const canvas=document.querySelector('canvas')
// canvas api传入参数为 "2d"
const ctx=canvas.getContext('2d')
// webgl传入参数为 "webgl"
const gl=canvas.getContext('webgl')4.基础语法
html
<html>
<canvas width="800" height="500"></canvas>
</html>
<script>
const canvas=document.querySelector('canvas')
// 获取webgl绘制上下文
const gl=canvas.getContext('webgl')
// 指定将要用来清空绘图区的颜色
gl.clearColor(0,0,0,1) // 参数为r,g,b,a
// 使用之前指定的颜色，清空绘图区
gl.clear(gl.COLOR_BUFFER_BIT)
</script>5.清空缓冲
5.1 clearColor()
5.1.1 作用
指定将要用来清空绘图区的颜色，也就是给canvas设置背景色
5.1.2 语法
js
void gl.clearColor(red, green, blue, alpha);5.1.3 参数
以下参数都为0.0-1.0的数字，默认值为0
- red：红色值
- green：绿色值
- blue：蓝色值
- alpha：透明度
要获取当前的清除颜色，传入 COLOR_CLEAR_VALUE 常量，返回 Float32Array。
js
gl.getParameter(gl.COLOR_CLEAR_VALUE); // Float32Array[1, 0.5, 0.5, 1]5.2 clearDepth()
5.2.1 作用
用于设置深度缓冲区的深度清除值
5.2.2 语法
js
void gl.clearDepth(depth);5.2.3 参数
- depth：当清除深度缓冲区的时候使用。范围在
0.0-1.0，默认值为 1。
若要获取当前深度清除值，查询DEPTH_CLEAR_VALUE 常量。
js
gl.getParameter(gl.DEPTH_CLEAR_VALUE); // 0.55.3 clearStencil()
5.3.1 作用
指定了 模板缓冲区
5.3.2 语法
js
clearStencil(s)5.3.3 参数
- s：一个
GLint，指定清除模具缓冲区时使用的索引。 默认值：0。范围在0.0-1.0
若要获取当前模具清除值，请查询常量。STENCIL_CLEAR_VALUE
js
gl.getParameter(gl.STENCIL_CLEAR_VALUE); // 15.4 clear()
5.4.1 作用
使用预设值来清空缓冲
5.4.2 语法
js
void gl.clear(mask);5.4.3 参数
mask：一个用于指定需要清除的缓冲区的 GLbitfield (en-US) 。可能的值有：
gl.COLOR_BUFFER_BIT //颜色缓冲区gl.DEPTH_BUFFER_BIT //深度缓冲区gl.STENCIL_BUFFER_BIT //模板缓冲区
clear() 方法可接受复合值
js
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);要获得当前的清除值，传入 COLOR_CLEAR_VALUE、DEPTH_CLEAR_VALUE 或 STENCIL_CLEAR_VALUE 常量。
gl.getParameter(gl.COLOR_CLEAR_VALUE);
gl.getParameter(gl.DEPTH_CLEAR_VALUE);
gl.getParameter(gl.STENCIL_CLEAR_VALUE);