WebGL笔记第二章入门

最新推荐文章于 2024-08-12 13:45:33 发布

georgetmac

最新推荐文章于 2024-08-12 13:45:33 发布

阅读量440

点赞数

分类专栏： webGL 文章标签： webgl

本文链接：https://blog.csdn.net/georgetmac/article/details/52777942

版权

webGL 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一首先你需要知道的

首先，你得有个chrome浏览器或者FireFoxF浏览器。
其次，我这里用的是WebStorm，比较好用

WebGL 绘制在html5 的 canvas标签上
以后的例子基本都是这个标签，这里写个例子

<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>

绘制的内容，写到js文件当中（当然也可以写到html文件中，如果你们领导不揍你的话）
运行程序，告诉浏览器在<body> 加载完成之后执行main()函数，这里写个例子

<body onload="main()">

下面开始写一个简单的例子用黑色填充<canvas> 区域
代码

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);
}

最后的执行结果，就是一张黑色的方块

运行结果

开始讲解：
main()函数的执行流，包含了以下四个步骤

获取<canvas>元素
- 这里使用了 document.getElementById() 函数，传入参数为 webgl，对应<canvas> 的ID
- 函数的返回值存储在变量 canvas 中（此处跟<canvas> 元素不是同一个意思）
获取WebGL绘图上下文
- 一般来说应该使用canvas.getContex()来获取上下文，不同浏览器接受的参数不同，这里我们写了一个函数来隐藏不同浏览器之间的差异
设置<canvas>的背景颜色
- gl.clearColor()` 来设置RGBA的背景颜色，4个参数分别代表R（红色）G（绿色）B（蓝色）A（透明度）分量，取值范围从0.0到1.0，值越高颜色越亮（越不透明）。
- 指定背景色之后，背景色会驻存在WebGL系统中，在下一次调用gl.clearColor()方法钱不会改变。
清空<canvas>
- 使用 gl.clear() 函数，用之前设定的背景色来填充绘图区域
- 可选参数：
  - gl.COLOR_BUFFER_BIT 指定颜色缓存
  - gl.DEPTH_BUFFER_BIT 指定深度缓冲区
  - gl.STENCIL_BUFFER_BIT 指定模板缓冲区