01-webgl入门

前言

课前准备

1. 安装webstorm 或vscode 开发工具。
2. 安装live-server，用于启服务，安装方法 npm i -g live-server
3. 需掌握es6、html、css 的基础知识。
4. 数学基础，三角函数和向量（非必须）。

课堂目标

1. 对webgl 的概念有一个整体认知
2. 掌握webgl 基本绘图原理和流程

知识点

1. webgl 概述
2. webgl 最短教程 - 在画布上刷底色
3. webgl 最简单图形 - 画一个点

第一章 webgl概述

1-webgl是什么？

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

我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。

2-webgl行业背景

随着 5G 时代的到来，3D可视化需求大量涌现。3D 游戏，酷炫的活动宣传页，三维数字城市，VR全景展示、3D 产品展示等领域中，很多项目都是用 WebGL 实现的，也只能用WebGL来做，也就是说，WebGL 的时代就在眼前了。

通过一些实际案例，我们可以知道WebGL 能做什么：

• 3D数据可视化：https://cybermap.kaspersky.com/
• 家居卖场：https://showroom.littleworkshop.fr/
• 天猫宣传页：https://shrek.imdevsh.com/show/tmall/
• 汽车模型：https://ezshine.gitee.io/www/showcase/smart3dh5/loader.html
• 趣空间：http://www.3dnest.cn/page/case/case0.html

3-为什么要学习webgl ?

webgl 的行业背景决定了其在市场中具有广大的需求量。

webgl 发展潜力大，不像曾经的flash，学完了，还会面临被淘汰的风险。

webgl 的职场竞争力要比vue、react等主流框架小。

webgl薪资可观，一般只要你理解webgl原理，可以熟练使用three.js，会用react，月薪可达25k+

下面是我在boss 直聘上的截图：

综上所述，对公司而言，webgl 可以解决他们在三维模型的显示和交互上的问题；对开发者而言，webgl 可以让我们是实现更多、更炫酷的效果，让我们即使工作，也可以乐在其中，并且还会有一份不错的薪资。

第二章 webgl 最短教程

接下来咱们说一个在webgl 画布上刷底色的简单栗子。

1-刷底色的基本步骤

1.在html中建立canvas 画布

<canvas id="canvas"></canvas>

2.在js中获取canvas画布

const canvas=document.getElementById('canvas’);

3.使用canvas 获取webgl 绘图上下文

const gl=canvas.getContext('webgl’);

4.指定将要用来清空绘图区的颜色

gl.clearColor(0,0,0,1);

5.使用之前指定的颜色，清空绘图区

gl.clear(gl.COLOR_BUFFER_BIT);

整体代码

<canvas id="canvas"></canvas>
<script>
    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);
</script>

clearColor(r,g,b,a) 中的参数是红、绿、蓝、透明度，其定义域是[0,1]

2-灵活操作webgl中的颜色

css 中有一个“rgba(255,255,255,1)” 颜色，其中r、g、b的定义域是[0,255]，这里要和webgl里的颜色区分一下。

我们可以简单了解一下将css颜色解析为webgl 颜色的原理：

const rgbaCSS = "rgba(255,0,0,1)";
const reg = RegExp(/\((.*)\)/);
const rgbaStr = reg.exec(rgbaCSS)[1];
const rgb = rgbaStr.split(",").map((ele) => parseInt(ele));
const r = rgb[0] / 255;
const g = rgb[1] / 255;
const b = rgb[2] / 255;
const a = rgb[3];

gl.