清空绘图区

<script>
    /***
     * 1. 获取canvas元素
     * 2。 获取WebGL绘图上下文
     * 3。 设置背景色
     * 4。 清空canvas
     * */
    const canvas = document.querySelector('canvas')
    // 换取WebGL绘图环境
    const gl = canvas.getContext('webgl');

    // 设置清空颜色缓冲（背景色）时的颜色。
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 使用预设值清空颜色缓冲
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>

Canvas

HTML5 引入 canvas标签。

着色器

WebGL需要两种着色器：

Vertex shader

顶点着色器用来描述顶点特性（如位置、颜色等）的程序

Fragment shader

进行逐片元处理的程序

必须包含一个main函数，void表示没有返回值。glPosition表示顶点的位置，glPointSize表示大小。

绘制一个点

WebGL的坐标系统

Attiribute变量

将位置信息从Js传给顶点着色器。

at tribute 与 uniform变量

区别

attribute变量是一种GLSL变量，从外部向顶点内传输数据，只有顶点着色器能使用它。

如何使用？

uniform 变量

定义

获取uniform变量

传值uniform

三角形

构成三维模型的基本单位是三角形。不管三维模型多么复杂，都是由三角形组成的，只不过更多了而已。