WebGL工作流程解读，一个三角形的诞生

Posted 2021-04-25 奇舞精选

编者按：本文作者姚伟，奇舞团前端开发工程师。

本文示例：(https://code.h5jun.com/jayow/edit?html,js,output)

本文会把WebGL工作的具体流程梳理一遍，WebGL到底是如何渲染出一个三角形的。我们常说把大象装进冰箱需要三步，那么写一个WebGL程序应该也只需要三步：1、把数据放入缓冲区，2、把缓冲区的数据给着色器，3、着色器把数据给GPU。

下面是梳理的一个WebGL程序的大致流程图：

创建WebGL上下文

一切的前提那一定是WebGL上下文了。

<canvas id="canvas-gl" width="512" height="512"></canvas>

function main(){
    const canvas = document.getElementById('canvas-gl')
    const gl = canvas.getContext("webgl")
    if(!gl)return
    gl.viewport(0, 0, canvas.width, canvas.height)
    gl.clearColor(1.0, 1.0, 1.0, 1.0)
}

在创建WebGL上下文后，紧接着又用gl.viewport()函数设置了视口，前两个参数表示视口左下角距画布左下角的偏移量，后面两个是视口的宽和高。这里把视口的大小和canvas的大小设为一样。

举个