初识WebGL

初识WebGL

前端熊猫2024-10-28 23:19

思路：

构建<canvas>画布节点，获取其的实例。
使用getWebGLContext() 拿到画布上下文。
拿到上下文用clearColor() 设置背景颜色。
最后清空canvas画布,是为了清除颜色缓冲区。

html结构：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="./lib/webgl-utils.js"></script>
  <script src="./lib/webgl-debug.js"></script>
  <script src="./lib/cuon-utils.js"></script>
  <!--第一个webGL上手案例 (webGL的构建流程)-->
  <script src="./js/helloCanvas.js"></script>
</head>

<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>

</html>

javascript脚本：

javascript 复制代码

//helloCanvas.js
function main () {
  /**
   * WebGL程序包括运行在浏览器中的JavaScript和运行在WebGL系统的着色器程序这两个部分。
   */
  const canvas = document.getElementById('canvas');
  const gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('WebGL初始化失败');
    return;
  }
  // 设置背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 清空canvas
  //将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区,那么将使用gl.clearColor()的值(作为预定值)。
  gl.clear(gl.COLOR_BUFFER_BIT);
}

思路：

html结构：

javascript脚本：

最终效果：