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

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

坐标系

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

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

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

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

基本图元

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

1. 点（gl.POINTS）:每一个顶点被显示的大小至少是一个像素。

2. 线段（gl.LINES）:这种图元把相继的顶点配对后解释为线段的两个端点（两两配对）。

3. 折线（gl.LINE_STRIP,gl.LINE_LOOP）想要让相继的顶点相连，可使用折线图元。曲线能够经过合适的折线来近似。若是但愿折线闭合，能够吧最后一个顶点设置与第一个顶点重合，也可使用gl.LINE_LOOP类型，它会在最后一个顶点和第一个顶点之间画一条线，获得一个环路。

4. 三角形（gl.TRIANGLE）:相继的三个顶点组合在一块儿，

5. 三角形条带和三角形扇（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>