- Daniel's mind paradise

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语言