webgl学习之路(一)——基础概念shader

首先是shader，这个名词经常听，其实它就是一段代码。

然后有专门编写shader的语言，比如：

1. 基于OpenGL的OpenGL Shading Language，简称GLSL。
2. 基于DirectX的High Level Shading Language,简称HLSL。
3. 还有NVIDIA公司的C for Graphic，简称Cg语言。

---

shader分为：顶点shader和片段（片元）shader

顶点shader顾名思义就是负责坐标中的顶点。还有每个顶点的颜色值。

当然它还负责将一些变量从顶点shader送往片段shader，比如将顶点颜色值送往片段shader。

片段shader的作用是渲染每个像素的颜色，当然这个颜色不单纯只字面意思的那种颜色，包括纹理等在每个像素上的颜色。

---

下面放一段shader代码

<script id="vertex_shader" type="shader/x-vertex">
    // 一个属性变量，将会从缓冲中获取数据
   attribute vec4 a_Position;

    // 所有着色器都有一个main方法
    void main() {
      // gl_Position 是一个顶点着色器主要设置的变量
      gl_Position = vec4(1.0, 1.0, 0.5, 1);
      gl_PointSize = 10.0;
    }
</script>
<script id="fragment_shader" type="shader/x-vertex">
   // 片断着色器没有默认精度，所以我们需要设置一个精度
    // mediump是一个不错的默认值，代表“medium precision”（中等精度）
    precision mediump float;
    void main() {
       // gl_FragColor是一个片断着色器主要设置的变量
       gl_FragColor = vec4(1, 0, 0.5, 1);
   }
</script>

vertex_shader这一段是顶点shader，fragment_shader这一段是片段shader。这一段代码的作用是渲染一个点。