【webgl】绘制一个三角形

【webgl】绘制一个三角形

文章同时发布于：王鹏飞的个人网站。

作为webgl的第一篇文章，首先我推荐几个学习webgl（opengl）的资源：

learnopengl中文官网：https://learnopengl-cn.github.io/, 这个教程是学习opengl最好的地方，因为webgl是基于opengl的，所以我认为这也是学习webgl最好的地方，如果你熟悉C++的话，建议根据这个教程学习。

webgl理论基础：https://webglfundamentals.org/webgl/lessons/zh_cn/, 这个教程是讲解webgl的，从原理上讲解webgl，但是我认为这个教程没有learnopengl中文官网的教程详细，很多地方直接帖代码，并没有讲解清楚。但是它的确是我所看到的讲解webgl中不错的教程。

learnwebgl: http://learnwebgl.brown37.net/index.html, 一套完整的webgl教程，但是只有英文版本，我也只是看了其中的几篇文章，内容讲解的很详细。

这篇文章主要讲解webgl的完整的绘制过程。

一. 绘制过程

gl的绘制过程可以分为以下四个步骤：

• 准备工作：这个阶段主要工作是一些开始工作，例如创建WebGLRenderingContext、清屏、设置z缓冲、告诉webgl绘制的窗口尺寸大小等。
• 创建着色器程序：使用GLSL语言编写着色器代码，编译着色器，链接着色器程序。
• 传递数据：给之前创建的着色器程序，传递数据（attributes，uniform）。
• 绘制：调用drawArrays或者drawElements方法绘制。

二. 准备阶段

这个阶段首先是创建WebGLRenderingContext，你可以将其看作是一根画笔，我们可以利用它完成三维图形的绘制。

const gl = canvas.getContext("webgl");
if (!gl) {
   
   
    alert("你不能使用webgl");
}

告诉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的颜色，清屏

三.创建着色器程序