一、初始化工程
首先新建一个空的文件夹，在其中创建index.html；在index.html中创建建一个div作为canvas的容器。
html, body, #app {
height: 100%;
margin: 0;
padding: 0;
}
<div id="app"></div>
二、获取webgl上下文
webgl是以canvas为载体，若想获取webgl上下文则需要先创建canvas；创建完成后可以通过canvas的getContext的方法获取webgl上下文。
注意在创建时候canvas的大小要乘上devicePixelRatio，防止在高分屏（移动端设备上渲染模糊）；为了防止给canvas设置了乘上比例的宽高导致撑开父元素；可以通过style在给canvas的大小重置回去。
function createCanvas(clientWidth: number, clientHeight: number) {
const canvas = document.createElement('canvas');
// 为什么要乘上 devicePixelRatio 是因为；在高分屏（移动端设备）如果不乘比例渲染出来的图像就会变得模糊
canvas.width = clientWidth * devicePixelRatio;
canvas.height = clientHeight * devicePixelRatio;
// 乘上比例后canvas的宽高就会很大，可以通过style在给重置回去
canvas.style.width = `${clientWidth}px`;
canvas.style.height = `${clientHeight}px`;
return canvas;
}
三、设置gl的背景色
通过 clearColor 给canvas添加
clearColor(red, green, blue, opacity); 参数的取值范围都是0-1，其中前三个分别表示颜色的色值，第四个表示透明度
// 设置背景色
gl.clearColor(0.5, 0.5, 0.5, 1);
// 将背景色作用于gl
gl.clear(gl.COLOR_BUFFER_BIT);
四、webgl的坐标系统
webgl是右手系，其中坐标原点是在canvas的中心点，向上为x轴的正方向，向右为y轴的正方向，从屏幕向外为z轴的正方向。坐标的取值范围是[-1, 1];
完整代码地址：gitee.com/lily.self/l…
tag分支：0.first
示例文件：src/examples/0.first.ts
仓库的相关说明看readme.md
