前言
课前准备
- 安装webstorm 或vscode 开发工具。
- 安装live-server,用于启服务,安装方法 npm i -g live-server
- 需掌握es6、html、css 的基础知识。
- 数学基础,三角函数和向量(非必须)。
课堂目标
- 对webgl 的概念有一个整体认知
- 掌握webgl 基本绘图原理和流程
知识点
- webgl 概述
- webgl 最短教程 - 在画布上刷底色
- 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.