uncategorized

WebGL 着色器编程实践(一)简介

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上两个令人惊叹的效果

example1

example2


Share