持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
WebGL是什么
首先看MDN对webGL的介绍
WebGL（Web 图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。
也就是说，webGL是一套让我们在让我们在浏览器环境下绘制2d、3d图形的API
WebGL的基础
- 前端html、JS
- GLSL
- 计算机图形学
- 基础线性代数
如何准备WebGL环境
类似canvas2d，WebGL也应用于canvas中，首先我们要有一块画布
<canvas id="c" width="640" height="480"></canvas>
随后通过JS获取WebGl上下文
const canvas = document.getElementById("c");
// 初始化 WebGL 上下文，没有考虑兼容性问题
const gl = canvas.getContext("webgl");
使用WebGL开始绘图
接下来就是绘画，由于WebGL是基于GPU的，因此无法直接利用API绘画，需要经过GLSL这样一个面向GPU语言告诉计算机所绘制的点的位置和颜色。GLSL着色器语言分为顶点着色器和片元着色器。这类语言的语法很像c语言，可以在shadertoy练习和学习。
const shader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(shader, `
attribute vec4 v_position;//传入的变量
void main() {//主函数
gl_Position = v_position; // 设置顶点位置
}
`)
gl.compileShader(shader)
在完成shader的编译后，我们就需要添加着色器到环境中
const program = gl.createProgram()
gl.attachShader(program, shader)
gl.linkProgram(program)
gl.useProgram(program)
const position = gl.getAttribLocation(program, 'v_position')//设置着色器变量
const pBuffer = gl.createBuffer() // 顶点缓冲对象
gl.bindBuffer(gl.ARRAY_BUFFER, pBuffer)
// 将这个顶点缓冲对象绑定到 gl.ARRAY_BUFFER
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0, 0.5,
0.5, 0,
-0.5, -0.5
]),) // 三角形的三个顶点
gl.vertexAttribPointer( // 告诉 OpenGL 如何从 Buffer 中获取数据
position, // 顶点属性的索引
2, //向量长度
gl.FLOAT, // 数据类型
false, // 是否归一化到特定的范围
0, // stride 步长
0 // offset 字节偏移量。
)
gl.enableVertexAttribArray(position);
// 开启 attribute 变量额，使顶点着色器能够访问缓冲区数据
gl.clearColor(0, 1, 1, 1) // 设置清空颜色缓冲时的颜色值
gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区，也就是清空画布
// 语法 gl.drawArrays(mode, first, count); mode - 指定绘制图元的方式 first - 指定从哪个点开始绘制 count - 指定绘制需要使用到多少个点
gl.drawArrays( gl.TRIANGLES, 0, 3 )//三角图元
这里提供的代码仿照WebGL 概念和基础入门，为了简单起见进行了修改，只考虑了顶点着色器，片元着色器流程类似。
WebGL框架
WebGL虽然提供了充足的API供人使用，但和opengl类似，因为太过底层且复杂使得难以上手，因此当下Web浏览器端的3D可视化大多基于WebGL的框架。
-
Three.js
- 最常用的前端3D库
- 简单易学
- 社区完善
- 文档内容充足
-
Filament
- 移动端优先
- 使用C++，性能优越
-
playCanvas
- 轻量
- 游戏引擎
- 基于Web图形编辑
- 丰富的输入事件
- 与物理引擎ammo.js集成
最后用码上掘金展示一下上面的代码，此代码基于概念和基础入门，但是片元着色器设置为渐变。
