webgl （原生）基础入门指南【二】

本章介绍一些三维图形学中的基本概念为后文的绘图做个科普
本文重点参考了《交互式计算机图形学-第七版》第2章的内容。想要更深入学习的同学可以自己去翻一翻

坐标系

在我们现实世界中，每个东西都有它的长、宽、高等度量分量，那么我们对它进行建模的时候会使用到一个对象坐标系。将这个对象放入现实世界，那么它就存在于现实世界中的世界坐标系。我们将它显示在我们的系统设备上，则它存在于应用程序坐标系。

我们把应用程序中度量顶点位置的数值称为顶点坐标。

用显示器上单位度量出的数值起初叫做物理设备坐标或者叫设备坐标。对于光栅设备，我们使用的术语是窗口坐标或者屏幕坐标。屏幕坐标总是用某种整数类型来表示，因为帧缓存中任何像素中心都必须位于固定的网格点上。

看了这么多的坐标是不是有点懵逼了！哈哈哈=。= 没有懵逼吗？很聪明，那我们继续~

基本图元

在webgl中，所有的几何图元都是由点、线段和三角形这样的基本图元组成。
webgl 提供了多种点和线段图元，相应的type参数如下

点（gl.POINTS）:每个顶点被显示的大小至少是一个像素。
线段（gl.LINES）:这种图元把相继的顶点配对后解释为线段的两个端点（两两配对）。
折线（gl.LINE_STRIP,gl.LINE_LOOP）想要让相继的顶点相连，可以使用折线图元。曲线可以通过合适的折线来近似。如果希望折线闭合，可以吧最后一个顶点设置与第一个顶点重合，也可以使用gl.LINE_LOOP类型，它会在最后一个顶点和第一个顶点之间画一条线，得到一个环路。
三角形（gl.TRIANGLE）:相继的三个顶点组合在一起，
三角形条带和三角形扇（gl.TRIANGLE_STRIP,gl.TRIANGEL_FAN）
......

着色器

着色器使用一种类似C语言的OpenGL ES 着色语音（GLSL）编写。在js中，我们可以写成字符串交由底层处理。同样使用script标签保存这些代码字符也是可行的。

顶点着色器

顶点缓冲区对象中存储的唯一信息就是每个点的位置。当执行gl.drawArrays()函数的时候顶点就会经过我们编写的着色器处理。它必须完成的最低限度的任务是把顶点的位置发送到光栅化的模块中去。初学者为了不饶进这些理论去，可以先理解为决定点的位置。我们看一下简单的案例：

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    
    void main(void) {
      gl_Position = vPosition;
    }
</script>

这里我们定义了一个变量 vPosition，顶点位置即变量位置。下篇我们会详细介绍这个变量的使用。

片元着色器

上文讲述了顶点，由顶点构成了图元。那么处理图元中的每个片元都需要我们片元着色器的处理。作为菜鸟的我们可以理解为每个像素点。

片元着色器通过Webgl的内置变量gl_FragColor为每个片元指定一个思维的RGBA颜色。注意：这里的rgba值为[0.0,1.0]而不是我们网页所使用的[0,255]。
着色器示例：

<script id="shader-fs" type="x-shader/x-fragment">
    void main(void) {
      gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
  </script>