初识WebGL

思路:

  1. 构建<canvas>画布节点,获取其的实例。
  2. 使用getWebGLContext() 拿到画布上下文。
  3. 拿到上下文用clearColor() 设置背景颜色。
  4. 最后清空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);
}

最终效果:

相关推荐
烛阴6 小时前
Mix
前端·webgl
烛阴1 天前
Tile Pattern
前端·webgl
平行云3 天前
实时云渲染将UE像素流嵌入业务系统,实现二维管理系统与数字孪生三维可视化程序的无缝交互
unity·webgl·数字孪生·云渲染·虚幻引擎·实时云渲染·像素流送
烛阴5 天前
Mod
前端·webgl
烛阴6 天前
Fract - Grid
前端·webgl
cos7 天前
从像素到粒子:p5.js 图像转动态粒子的设计与实现
前端·javascript·webgl
山海鲸可视化10 天前
模型材质一键替换~轻松还原多种三维场景
webgl·数字孪生·材质·3d模型·三维渲染
Perfumere12 天前
【WebGPU学习杂记】Uniform和Stroage的区别和适用场景
前端·webgl
蓝婷儿12 天前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
Perfumere12 天前
【WebGPU学习杂记】缓冲区是个啥?内存?闪存?
前端·webgl