这是我参与「第四届青训营 」笔记创作活动的第17天
数据可视化，是基于视觉表现形式的数据展示，利用图形化的手段清晰、高效的传达信息。在前端开发中，提到数据可视化，就不得不说到WebGL，他让我们的浏览器，也能调用GPU，实现复杂的图形渲染。
初识 WebGL
WebGL 是一种将 JavaScript 和 OpenGL 相结合的技术，他允许开发者使用 JavaScript、OpenGL 语言直接调用 GPU 为浏览器提供渲染，免去了借助网页渲染插件的麻烦。
WebGL 解决了在浏览器上绘制和渲染图形的需求，甚至可以直接在网页上渲染三维图像并进行交互，让网页制作3D游戏、创建虚拟世界成为可能。
重要概念
- 光栅：光栅指的是构成图像的像素阵列，现代的图形系统几乎都是基于光栅来绘制图形的。
- 像素：一个像素对应图像上的一个点，保存了图像在该位置的颜色等信息。
- 帧缓存：在图形的绘制过程中，像素信息会被存放于帧缓存中，帧缓存本质上是一块内存地址。
- CPU：中央处理单元，主要负责逻辑计算。
- GPU：图形处理单元，主要负责图形计算。
WebGL 的优势
WebGL 结合了 JavaScript 和 OpenGL，使得 WebGL 既能与 CPU 交互，也能与 GPU 交互，可以非常方便的调用数据和绘制图形。这也使得 WebGL 具备了创建复杂数据导航、搭建 3D 结构场景的功能。
绘制简单图形
在 HTML 中绘制简单图形需要使用到 canvas 标签，具体步骤如下：
- 在页面中创建一个 canvas 元素
- 获取 canvas 元素并得到其在 WebGL 的上下文环境对象
- 使用 WebGL 对象中的填充颜色 API 实现绘制图形
实现代码
<body>
<canvas id="cvs" width="600px" height="600px"></canvas>
<script type="text/javascript">
// 获取canvas的上下文环境对象
let cvs = document.getElementById('cvs')
let cvsgl = cvs.getContext('webgl')
// 设置填充颜色
cvsgl.clearColor(1.0, 0.0, 0.0, 1.0)
// 填充图形
cvsgl.clear(gl.COLOR_BUFFER_BIT)
</script>
</body>
着色器
着色器是 OpenGL 中的概念，它负责记录像素点的位置和颜色。着色器包括顶点着色器和片段着色器。在 WebGL 中需要使用 GLSL 来编写这两种着色器。
顶点着色器
将输入顶点从原始坐标系转换到WebGL使用的缩放空间坐标系，每个轴的坐标范围从-1.0到1.0，顶点着色器对顶点坐标进行必要的转换后，保存在名称为gl_Position的特殊变量中备用。
片段着色器
在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次，它的功能是确定像素的颜色值，并保存在名称为gl_FragColor的特殊变量中，该颜色值将最终绘制到图形像素的对应位置中。
