内卷年代，是该学学WebGL了

向右看齐 2023-09-24 22:56 44阅读 0赞

## 前言 ##

大部分公司的都会有可视化的需求，但是用echarts，antv等图表库，虽然能快速产出成果，但是还是要知道他们底层其实用canvas或svg来做渲染，canvas浏览器原生支持，h5天然支持的接口，而svg相比矢量化，但是对大体量的点的处理没有canvas好，但是可以操作dom等优势。canvas和svg我们一般只能做2d操作，当`canvas.getContext('webgl')`我们就能获取webgl的3d上下文，通过glsl语言操作gpu然后渲染了。理解webgl，可以明白h5的很多三维的api底层其实都是webgl实现，包括对canvas和svg也会有新的认知。

## canvas和webgl的区别 ##

canvas和webgl都可以做二维三维图形的绘制。底层都会有对应的接口获取。cancvas一般用于二维`canvas.getContext("2d")`，三维一般可以通过`canvas.getContext('webgl')`

## 窥探WebGL ##

### 理解建模 ###

如果你有建模软件基础的话，相信3dmax、maya、su等软件你一定不会陌生，本质其实就是点、线、面来组成千变万化的事物。打个比方球体就是无数个点连成线然后每三根线形成面，当然有常见的四边形，其实也是两个三边形组成，为什么不用四边形，因为三边形更稳定、重心可计算、数据更容易测算。

所以核心也就是`点、线、三角面`

### 了解WebGL ###

WebGL可以简单理解为是openGL的拓展，让web端通过js可以有强大的图形处理能力。当然为了与显卡做交互你必须得会glsl语言。

### GLSL ###

glsl着色器语言最重要的就是顶点着色器和片元着色器。简单理解为一个定位置一个添颜色。

### 简单绘制一个点 ###

webgl会有大量的重复性前置工作，也就是创建着色器 -> 传入着色器源码 -> 编译着色器 -> 创建着色器程序 -> 绑定、连接、启用着色器 -> 可以绘制了！

一般而言我们是不会重复写这个东西，封装好了直接调用就行。

function initShader (gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    
        gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);
        gl.shaderS