一、初始化工程
首先新建一个空的文件夹,在其中创建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