webgl入门之一：概述

WEBGL是什么

WEBGL是内嵌在浏览器中的一个程序组件，用于在网页上绘制三维图形，它来源于OPENGL，OPENGL是操作系统环境下开发独立的三维图形程序的函数库，将OPENGL的一个子集移植到浏览器平台，就成了WEBGL.

WEBGL开发环境

WEBGL是内嵌在浏览器中，无需安装插件和库就可以直接使用它，同时，由于是基于浏览器的，如同开发其他类型的网页程序一样，只需要使用HTML定义网页静态内容，并使用javascript操作动态内容即可，所以，你只需要一个文本编辑器和浏览器即可以开始开发WEBGL三维程序，相对于OPENGL，更方便，更快捷，无需专用的集成开发环境（比如微软VS），没有编译链接等等繁琐的要求。

WEBGL程序结构

• 创建html文件，html文件是浏览器人口文件，在浏览器地址栏输入此html文件的链接，即可访问webgl程序，在html文件中静态定义canvas元素（也可通过javascript动态创建），此canvas元素定义了webgl绘图区间，所有三维图形信息最终都映射绘制到此canvas二维平面空间；
• 创建javascript文件，通过html文件中的canvas元素获取webgl上下文，此上下文即webgl编程接口，所有webgl函数都是通过此上下文进行调用，有了此上下文，就可以使用javascript调用webgl函数进行三维绘图操作；
• 定义着色器，可定义在html文件中或javascrupt文件中，也可定义在单独的文本文件中，着色器是专用于webgl内部渲染引擎的程序片段，有其独立的编程语法体系，采用类C语言语法，以字符串的形式进行定义，然后通过webgl函数进行编译、链接和启用；

着色器是什么

着色器是webgl的核心特征，如果不使用着色器，webgl将不能绘制任何三维图形；webgl系统对外提供两种方式与用户程序交互，一种是普通api函数，另外一种就是着色器；所以，如果想要掌握webgl，一方面要学习webgl普通api函数的用法，另外一面，还需要掌握着色器的编写；

普通api函数主要用于webgl绘图环境建立、绘图参数设定、绘图数据准备等等操作，这些操作基本发生在webgl启动实际的绘图之前的绘图准备阶段，目的是对webgl渲染引擎进行绘图前的配置和设定；

由于webgl的渲染引擎非常之复杂，仅仅通过普通api函数在绘图之前进行参数设定的方式不太容易完全控制渲染引擎的行为，这就需要一种更加细粒度的控制机制，使得用户在webgl进行更底层的细节处理过程中，也能够通过程序去控制渲染引擎的行为，这个机制就是着色器；

着色器会在两个时间点被webgl系统反复调用，根据被调用的时机和处理数据的种类，着色器也就被分为两种类型：

• 顶点着色器，在webgl系统对每个顶点数据进行运算处理时，顶点着色器的逻辑被执行一遍，执行次数与传给webgl的顶点数目一致，在此着色器中，主要执行与每个顶点相关的操作，比如需要画两个点连成的线段，这就需要传送两个顶点数据给webgl，webgl在画直线之前，会对这两个顶点各自调用一次顶点着色器程序；通过顶点着色器，用户就有机会有针对性的处理所有顶点数据；
• 片元着色器，在webgl系统对每个像素点进行运算处理时，片元着色器的逻辑被执行一遍，执行次数与所需处理的像素点数目一致；比如画两点连成的直线段，这条直线显示在canvas上有多少个像素点，片元着色器逻辑就会被执行多少次；通过片元着色器，用户可以干预每个像素点的颜色计算；

JavaScript程序与着色器程序如何协同工作

• 首先需要以字符串源代码的方式在JavaScript中定义着色器；
• JavaScript将字符串源代码形式的着色器加工(编译、链接、绑定等等)成可执行的着色器对象，存在于webgl系统内部待用；
• JavaScript给着色器准备好需要的数据，数据传递有两种方式，一种是传递单一值的方式，另外一种是通过缓冲区机制批量传递多个值的方式；
• JavaScript启动绘图操作，在webgl系统内部，着色器程序会被自动调用，着色器程序会按照JavaScript所指定的方式来读取数据进行处理运算；

示例演示

• 示例一：使用最简单的程序来演示webgl开发环境，帮助大家对webgl开发建立起初步的概念；查看演示
• 示例二：通过最简单的着色器代码，帮助大家初步了解着色器开发；查看演示
• 示例三：通过attribute变量向顶点着色器传递顶点坐标位置，初步了解javascript是如何传递数据给着色器程序；查看演示
• 示例四：通过多次调用绘图操作来绘制多个不同位置的点，进一步理解javascript如何向顶点着色器传递数据；查看演示
• 示例五：通过uniform变量向片元着色器传递片元颜色数据，初步了解javascript是如何传递数据给片元着色器程序；查看演示