回顾

为了在canvas上绘制二维图形，需经过以下三个步骤

  1. 获取canvas元素
  2. 向该元素请求二维图形的绘图上下文
  3. 在绘图上下文上调用相应的绘图函数，以绘制二维图形

最剪短的WebGL程序：清空绘图区

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <canvas id="webgl" width="400" height="400"></canvas>
  11. </body>
  12. </html>
  14. <script>
  15. const canvas = document.getElementById("webgl");
  16. // 获取webgl绘图上下文
  17. const gl = canvas.getContext("webgl");
  18. //指定一个覆盖（清空）canvas的颜色
  19. gl.clearColor(0.0,0.0,0.0,1.0);
  20. //执行清空
  21. gl.clear(gl.COLOR_BUFFER_BIT);
  22. </script>

29676B65-3C64-4FE3-B0AA-FE5009F39AE4.png

它会遵循绘制二维图形的三个步骤： 获取canvas元素， 获取绘图上下文，开始绘图。
刚才我们共做了四步操作：
1.首先从文件中获取了canvas元素
2.为webgl获取绘图上下文，通常来说，我们应该使用canvas.getContext()来获取绘图上下文，但是在获取webgl上下文时，canvas.getContext()在不同的浏览器中会不同，可使用”experimental-webgl”和”webgl”，未来将变为”webgl”。 现在这个绘图环境对象就可以绘制三维图形了。
3.进行绘图操作。清空绘图之前我们需要指定背景颜色。使用gl.clearColor()以RGBA格式设置背景色。由于webgl是继承自opengl的，所以它遵循传统的opengl颜色分量的取值范围，从0.0到1.0。
4.清空canvas，最后可以调用gl.clear()函数，用之前指定的背景色进行清空。gl.clear(gl.COLOR_BUFFER_BIT)
webGL中的gl.clear()方法继承自opengl, 它基于多基本缓冲区模型，比二维绘图上下文复杂的多。清空绘图区实际上是清空颜色缓冲区。传递的参数其实就是告诉webgl清空颜色缓冲区。

gl.clearColor（red,green,blue,alpha）

参数
red 指定红色值（从0.0到1.0）
green 指定绿色值（从0.0到1.0）
blue 指定蓝色值（从0.0到1.0）
alpha 指定透明度值（从0.0到1.0）
如果任何值小于0.0或者大于1.0，则被截断为0.0或1.0

gl.clear(buffer)
指定缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用gl.clearColor()指定的值

参数
buffer 指定待清空的缓冲区，位操作符可用来指定多可缓冲区
gl.COLOR_BUFFER_BIT 指定颜色缓存
gl.DEPTH_BUFFER_BIT 指定深度缓冲区
gl.STENCIL_BUFFER_BIT 指定模板缓冲区

为了方便后续使用，将引入三个工具函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <canvas id="webgl" width="400" height="400"></canvas>
  11. </body>
  12. </html>
  13. <script src="../lib/webgl-util.js" ></script>
  14. <script src="../lib/webgl-debug.js" ></script>
  15. <script src="../lib/cuon-utils.js" ></script>
  16. <script>
  17. const canvas = document.getElementById("webgl");
  18. const gl = getWebGLContext(canvas);
  19. // // 获取webgl绘图上下文
  20. // const gl = canvas.getContext("webgl");
  21. // //指定一个覆盖（清空）canvas的颜色
  22. gl.clearColor(0.0,0.0,0.0,1.0);
  23. //执行清空
  24. gl.clear(gl.COLOR_BUFFER_BIT);
  25. </script>

将在后续文章中解释工具函数的内容，目前只用到获取上下文函数，用来做兼容处理

绘制一个点

在之前学习了如何建立一个webgl程序，如何使用一些简单的webgl相关函数。那后续，将进一步在一个示例程序中绘制一个最简单的图形。一个点。