前言
你是前端吗？你会搞3D可视化吗？
不会没关系
此文带你三分钟入手WebGL
概念
WebGL，全称(Web Graphics Library)，直译过来（网络 图形 库），是一种3D绘图协议。
WebGL可以运行在不同硬件上的浏览器，在保留Web应用的便利性的同时，添加了酷炫的3D功能，实现三维互动网页。 也就是一种web端的3D技术。
通过WebGL，你可以做什么实现什么❓
- 交互式动画
- 三维产品配置器
- 交互式演示文稿
- 在线商店
- 产品功能展示应用
- 三维互动课件
- 3D游戏
- ...等等
操作
手摸手牵你入门
创建canvas画布
<canvas id="canvas"></canvas>
获取画布
const canvas = document.getElementById('canvas');
获取webgl绘图上下文
const gl = canvas.getContext('webgl');
清空绘图区的颜色
gl.clearColor(0,0,0,1);
清空绘图区算法
gl.clear(gl.COLOR_BUFFER_BIT);
最后得到
换个红色的绘图区
gl.clearColor(255,0,0,1);
手摸手牵你入第二道门（加了着色器）
WebGL在电脑的GPU中运行。因此需要能够在GPU上运行的代码。
这种代码需要提供成对的方法。一个是顶点着色器，一个是片段着色器。每一对组合起来叫做着色程序。
那么在代码中加入这两种着色器的代码，如下：
创建以及获取着色器
顶点着色器
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0)
gl_PointSize = 100.0
}
<script>
片段着色器
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0)
}
</script>
分别获取这两种着色器的文本
const vsSource = document.getElementById("vertexShader").innerText
const fsSource = document.getElementById("fragmentShader").innerText
初始化着色器
建立程序对象
const program = gl.createProgram()
根据着色类型 创建着色器对象
顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertexShader, vsSource) // 将着色器源文件传入着色器对象中
gl.compileShader(vertexShader) // 编译着色器对象
片段着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragmentShader, fsSource) // 将着色器源文件传入着色器对象中
gl.compileShader(fragmentShader) // 编译着色器对象
将顶点着色器和片段着色器放入程序对象中
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
把webgl上下文和程序对象连接起来, 并把程序对象挂到webgl上下文中
gl.linkProgram(program)
gl.useProgram(program)
绘制顶点
gl.drawArrays(gl.POINTS, 0, 1)
最后得到效果就是在画布中间有一片方正的青青草地，为什么是绿色呢，就是我们片段着色器给什么颜色就出什么颜色，由于绿色是#00FF00, 对应的就是vec4(0.0, 1.0, 0.0, 1.0)
这个例子简单吧，要是想要酷炫的例子，可以看看这个网站，保证能激发起你学webgl的巨大兴趣和决心。
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天 点击查看活动详情
