title: WebGL 着色器编程实践（一）简介 date: 2015-12-28 tags:
WebGL简介
WebGL是一项利用JavaScript API呈现3D电脑图形的技术，有别于过往需加装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。
- 是HTML5特性之一
- 是硬件加速的
- 基于 OpenGL ES 2.0 的 javascript binding
支持情况：
桌面浏览器
- Mozilla Firefox─从4.0开始支持默认激活。
- Google Chrome─从9.0开始支持默认激活。
- Internet Explorer─从11开始支持[2]。较旧的版本可以安装第三方插件来支持，如IEWebGL.[3]
- Safari─在Mac OS X Snow Leopard上的Safari 5.1、OS X Mountain Lion, Mac OS X Lion上的Safari6.0或较新版本开始支持WebGL，默认情况下禁用。 Opera（需自行激活）
移动浏览器：
- Firefox OS
- Firefox for mobile
- Google Chrome
- Opera Mobile
- Tizen
- Ubuntu Touch
- WebOS
- iOS
着色器
着色器是跑在GPU上的小程序，了解着色器（shader）之前，先要了解现代显卡的渲染流程
渲染流程：
- 顶点转换
- model
- view
- projection
- 几何体组装
- 光栅化
- 片元处理
- 深度测试，混合操作，雾，剪切测试和模板测试
- 输出到帧缓冲区
固定功能管线：
可配置，只能给固定的几个接口传递参数
可编程渲染管线：
可编程
可编程渲染管线是硬件编程，我们编写的shader程序实际上是一部分的GPU执行逻辑， 具体来说，是控制了顶点处理和片元处理的逻辑，因此会非常灵活，一般来说我们用shader来自行实现光照和材质，可以用上各种光照和反射模型 ，GPU是多核的，注重于并行计算，现代的GPU的并行计算能力已经超越了GPU，因此也出现了基于GPU的高性能计算接口，比如NVIDIA 的 CUDA
WebGL使用的着色器语言：GLSL
GLSL （OpenGL Shading Language） GLSL的着色器代码分成2个部分：Vertex Shader（顶点着色器）和Fragment（片断着色器），有时还会有Geometry Shader（几何着色器），这两种着色器一种控制顶点处理，一种控制片元处理
GLSL其使用C语言语法作为基础高阶着色语言。但只是语法很相似，由于是跑在GPU上的，GLSL 提供了一些C语言不存在的一些特性，比如内建的向量和矩阵运算。也增加了一些限制，具体大家可以自己去了解
其他着色器语言
webGL只是基于OpenGL ES 的一个web端的接口，而OpenGL只是一个开放的硬件抽象层，与特定的硬件平台无关，除了OpenGL,还有一些基于特定平台的图形库，比较有名的是DirectX (Windows), metal (iOS, OSX),skia (android),使用这些图形库写出来的代码可读性都不好，大量使用了硬件相关的api，属于为了性能舍弃可移植性的选择, 学术界一般只关注OpenGL
HLSL 是基于DirectX上的只能在 windows 上跑的shader语言，在windows上有出色表现
Cg 是由NVIDIA公司开发的高阶着色器语言，Cg程序是运行在OpenGL和 DirectX标准顶点和像素着色的基础上的，像引擎采用的也是Cg语言
在WebGL上的实践
webGL 上基本抛弃了固定功能管线, 除了javascript所控制的逻辑以外，我们可以用GLSL来控制渲染流程，并编程实现我们能想到的任意效果
我们来看看著名 shader 社区 shadertoy上两个令人惊叹的效果