WebGL | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

WebGL是一种渲染技术，与GPU和3D渲染相关，但GPU≠WebGL≠3D，WebGL并不像其他前端技术一样简单。

1、初始WebGL

计算机如何进行图形展示？

当计算机需要绘制图像时，首先提取轮廓将提取到的轮廓进行网格化，也就是将复杂的图形转换成简单的点线结构；再进行光栅化变成一个一个像素，然后将数据存放到帧缓存中，最终设备从帧缓存中读取数据将图形渲染出来。

CPU Vs GPU

CPU的逻辑处理功能强大，但是在处理图像这方面不需要复杂的计算。

GPU由大量的小运算单元构成，每个运算单元只需处理简单的计算，每个运算单元彼此独立，因此计算机可以并行处理，更适合处理图形。

2、如何使用WebGL进行渲染？

过程

1. 创建WebGL上下文
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区的数据读取到GPU
5. GPU执行WebGL程序，输出结果

Create WebGL Context

const canvas = document.querySelector('canvas')
const gl = canvas.getContext('webgl')

function create3DContent (canvas, options) {
    const names = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl']
    if (options.webgl2) names.unshift('webgl2');
    let context = null
    for (let ii = 0; ii < names.length; ++ii) {
        try {
            context = canvas.getContext(names[ii], options);
        } catch (e) {

        }
        if (context) {
            break;
        }
    }
    return context;
}

The Shaders

//Vertex Shader
attribute vec2 position;
void main(){
    gl_PointSize=1.0
    gl_Position=vec4(position,1.0,1.0);
}

//Fragment Shader
precision mediump float;

void main(){
    gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}

Frame Buffer to GPU

const vPosition = gl.getAttribLocation( program, ' position');//获取定点着色器中的position变量的地址
gl.vertexAttribPointer( vPosition,2,gl.FLOAT,false,0,0 );//给变量设置长度和类型
gl.enableVertexAttribArray ( vPosition);//激活这个变量

相较于2D来说，因为2D是一种命令式的绘图方式，生成一个图形通过点线就可以快速实现，但在WebGL中要实现图形渲染代码更复杂。

更多案例：Three.js – JavaScript 3D Library (threejs.org)

总结

WebGL是一种渲染的技术，与2D相比，代码实现起来较为复杂，但是效果看上去比2D的渲染更为美观，除此之外WebGL可以使用封装的库文件来简化操作。