webGL第二课

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lzwdlut/article/details/51941134

看完论坛的第一个例子之后，论坛网址。发现该作者的系列讲解比老外讲解的好多了，虽然思路和实现方法不一样，但不失为一个入门接触webGL的好教材。还是先了解，再系统性学习。今天进行第二课的学习

概述

该例子介绍了如何给图形绘制颜色。原理和绘制图形是一样的。

一般流程

1. 首先创建着色器。顶点着色器中包含gl_Position变量，片段着色器中包括gl_FragColor变量。
2. 然后将数据通过index绑定到程序对象上。bindAttribLocation(),貌似去掉这一步也没影响。还是不能去掉的，如果定义两个index=0,1，凑巧没有影响，但是如果改为其他数，则必须进行绑定了。在老外教程的第一个例子上，把locationattribute直接当作程序对象的属性来用的。这个属性可以连接到不同的顶点着色器上，即gl_Position。
3. 创建两个数组，并将两个数组传送到webGL中并绑定。
4. 打开index,并将数据流接到index上。
5. 绘制图形。

启示

所以，通过这节课，我们可以创建很多的图形和颜色的源码，也就是像这样的：

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

这样，就可以对不同的图形绑定不同的颜色。可以参见老外的example2.

学习webGL编程指南之第六章openGL ES 着色器语言(GLSL ES)

• GLSL ES 是GLSL(openGL 着色器语言)的简化版，更高效，减少性能开销。
• 和C语言非常相似，包括了计算机图形学相关的特性和函数，包括对矢量和矩阵类型的支持。

看起来好熟悉～

学习openGL ES 2.0 Programming Guide之4.Shaders and Programs

1. Shaders and Programs
   看到这句话时，瞬间明白了这俩货的本质The best way to think of a shader object and a program object is by comparison to a C compiler and linker.
   原来就是编译器和连接器的作用啊，看来之前的硕士和Intesim确实没白学习。所以，上网查了一下gcc的基础，这里供大家参考
   所以，在创建着色器时，用到了shaderSource()和compileShader()两个函数 —-用来把源代码附着并进行编译；
   还用到了attachShader()和linkProgram()两个函数—-用来把编译后的对象进行链接，生成可执行代码。
   *一个program 对象有且只能有一个顶点着色器对象和一个片段着色器对象。该program对象链接完成之后，即可用于渲染工作。
2. Uniforms and Attributes
   
   • Uniforms are variables that store read-only constant values that are passed in by the application through the OpenGL ES 2.0 API to the shader
   • 离线或在线编译工具？ 我们现在例子中用的是在线编译工具，但是也课程某些厂商仅支持二进制码的编辑，所以要提供离线编译工具。