课前准备

安装vscode开发工具
安装live-server,用于启动服务，（npm i -g live-server）
需要掌握html、css、js的基础知识
最好有一定的高中数学和大学数学基础

第一章 webgl概述

1、webgl是什么

webgl是在网页上绘制和渲染三维图形的技术，可以让用户与其交互。

第二章 webgl最短教程

以下为在webgl上刷底色的简单例子

1、刷底色的完整代码

<style>
  body {
    margin: 0;
    overflow: hidden;
  }
  /* 通过css给画布设置背景色 */
  /* css设置背景色与webgl刷底色有本质区别，
  通过css设置的背景色无法与webgl的图形做运算及合成（如透明度合成） */
  /* #canvas {
    background-color: antiquewhite;
  } */
</style>
<body>
  <!-- 1：在html中建立canvas画布 -->
  <canvas id="canvas"></canvas>
</body>
<script>
  // 2：在js中获取canvas画布
  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  // 3：使用canvas获取webgl绘图上下文对象
  const gl = canvas.getContext('webgl');

  // 4：指定将要用来清空绘图区的颜色（仅用来声明颜色）
  // clearColor(r,g,b,a)中的参数是红、绿、蓝、透明度，定义域是[0,1]
  gl.clearColor(0,0,0,1)

  // 5：使用指定的颜色清空绘图区（刷底色）
  gl.clear(gl.COLOR_BUFFER_BIT)
</script>

2、灵活操作webgl中的颜色

如：css中有一个rgba(255,0,0,1)的颜色，其中r、g、b的定义域是[0, 255]。接下来我们实现将css颜色转化为webgl颜色的原理：

  // 1、声明css颜色
  const rgbaCss = 'rgba(255,100,0,1)'
  // 2、定义正则
  const reg = RegExp(/\((.*)\)/);
  // 3、捕捉数据
  const rgbaStr = reg.exec(rgbaCss)[1];
  // 4、加工数据
  const rgbaArr = rgbaStr.split(',').map(item=>parseInt(item))
  const r = rgbaArr[0]/255;
  const g = rgbaArr[1]/255;
  const b = rgbaArr[2]/255;
  const a = rgbaArr[3];
  
  gl.clearColor(r,g,b,a)
  gl.clear(gl.COLOR_BUFFER_BIT)

3、多姿多彩的画布

注意：要加type='module';

<script type="module">
  // 1、引入color对象
  import { Color } from 'https://unpkg.com/three/build/three.module.js';

  const canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  const gl = canvas.getContext('webgl');
  gl.clearColor(0,0,0,1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  //2、实例化Color对象
  const color = new Color('rgba(255,100,0,1)')

  gl.clearColor(color.r, color.g, color.b,1)
  gl.clear(gl.COLOR_BUFFER_BIT);

  !(function ani() {
    color.offsetHSL(0.005, 0, 0) //(色相，饱和度，亮度)
    gl.clearColor(color.r, color.g, color.b,1)
    gl.clear(gl.COLOR_BUFFER_BIT);
    requestAnimationFrame(ani)//动画驱动（基于浏览器渲染去驱动动画）
  })()
</script>

4、webgl坐标系和canvas2D坐标系

webgl画布的建立和获取，和canvas 2d是一样的。

一旦我们使用canvas.getContext()方法获取了webgl 类型的上下文对象，那这张画布就不再是以前的canvas 2d 画布。

当然，它也不会变成三维的，因为我们的电脑屏幕始终是平的。

那这张画布有什么不一样了呢？

它的坐标系变了。

canvas 2d 画布和webgl 画布使用的坐标系都是二维直角坐标系，只不过它们坐标原点、y 轴的坐标方向，坐标基底都不一样了。

4-2canvas 2D坐标系

canvas 2d 坐标系的原点在左上角，坐标系的y 轴方向是朝下的。

canvas 2d 坐标系的坐标基底有两个分量，分别是一个像素的宽和一个像素的高，即1个单位的宽便是1个像素的宽，1个单位的高便是一个像素的高。

4-1 webgl坐标系

webgl坐标系的坐标原点在画布中心，坐标系的y 轴方向是朝上的。

webgl坐标基底中的两个分量分别是半个canvas的宽和canvas的高，即1个单位的宽便是半个个canvas的宽，1个单位的高便是半个canvas的高。

webgl入门教程