WebGL介绍及基础使用|青训营笔记

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

一、本堂课重点内容：

• WebGL是什么

• WebGL制作的基本步骤

二、介绍：

WebGL介绍

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。

GPU

WebGL 高性能的原因在于它使用了 GPU。 GPU和CPU针对两种不同的应用场景。你可以把 CPU 想象成一个无所不知的教授，而 GPU 是一群只会做一些简单计算的小学生，所以对于大量的简单计算，GPU 的执行速度要比 CPU 大得多。

坐标系

WebGL的坐标系和canvas 2d的坐标系不一样。因为 WebGL 是 OpenGL 的子集，所以 WebGL 坐标系与 OpenGL 坐标系具有相同的值。

三、基础使用：

1.创建WebGL上下文

Create WebGL Context

const canvas = document.querySelector("canvas");
    const gl = canvas.getContext("webgl");

设置着色器

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0, 0, 0, 0); // 设定clearColor的颜色缓冲
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // 用clearColor的颜色，清屏
    // 顶点着色器代码
    const vertex_source = `
    attribute vec3 aPos;
    void main() {
        gl_Position = vec4(aPos, 1);
    }
`;

设置 Shaders

    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertex_source); // 绑定着色器代码
    gl.compileShader(vertexShader); // 编译着色器
    // 片段着色器代码
    const fragment_source = `
    precision mediump float;
    uniform vec3 uColor;
    void main() {
        gl_FragColor = vec4(uColor, 1.0);
    }
`;

2.创建WebGL Program

  
    // 创建片段着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragment_source); // 绑定着色器代码
    gl.compileShader(fragmentShader); // 编译着色器
    // 链接着色器程序
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader); // 添加着色器
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);

3.将数据存入缓冲区

 // 三角形的顶点数据
    const vertexs = [-1, -1, 1, 1, -1, -1];
    const aPosAttLocation = gl.getAttribLocation(program, "aPos"); // 获得变量位置
    const aPosAttBuffer = gl.createBuffer(); // 创建缓冲
    gl.bindBuffer(gl.ARRAY_BUFFER, aPosAttBuffer); // 绑定缓冲到指定类型
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexs), gl.STATIC_DRAW); // 传入数据

4.将缓冲区数据读取到GPU

gl.vertexAttribPointer(aPosAttLocation, 3, gl.FLOAT, false, 0, 0); // 告诉gl如何解析数据
gl.enableVertexAttribArray(aPosAttLocation); // 启用数据

5.GPU执行WebGL程序，输出结果

    //设置好颜色
    const uColorLocation = gl.getUniformLocation(program, "uColor");
    gl.uniform3f(uColorLocation, 1.0, 0.0, 0.0, 1.0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

效果图：

四、总结：

总结webGL使用的基本步骤：

1.创建WebGL上下文

2.创建WebGL Program

3.将数据存入缓冲区

4.将缓冲区数据读取到GPU

5.GPU执行WebGL程序，输出结果

WebGL 的基本图元包括：点、线段、三角形。

本次学习了解了webGL的原理以及基础使用，与之前的前端学习相比，webGL会更加难理解，想要学会webGL需要花更多时间去了解并且去尝试。