2024-03-18 18:53:10
webgl就是在网页上绘制和渲染图形(3D图形),并允许用户与之进行交互;
游戏开发中优化性能，它在web上可以开发直接查看效果，便于转化到游戏开发中理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03 绘制和变换</title>
</head>
<body onl oad="main()">
<canvas id = "webgl",width = "400" , height="400"></canvas>
<script src="libs/webgl-utils.js"></script>
<script src="libs/webgl-debug.js"></script>
<script src="libs/cuon-utils.js"></script>
<script src = "RotateTriangle.js"></script>
</body>
</html>
<RotateTriangle.js>
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);
}
上面引用的库地址:https://gitee.com/JingEra/web-gl-common-library，请自行下载。
当然你如果不想用封装好的库你可以自己写，下面我也放一个参考项目吧。地址:https://gitee.com/JingEra/web-gl-common-library/tree/master/03
我是因为封装好的库在看书学习过程中有些方法调用比较方便。
好像没什么好解释的，主要就是：