css Shader,WebGL,GLSL

WebGL & GLSL & CSS Shaders

WebGL

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

由于webgl是基于OpenGL和JavaScript技术结合，而OpenGL与微软DirectX存在着竞争关系，而且微软自身也开发了Silverlight插件，与webgl其实是类似的，所以微软对webgl技术并不支持。这很好理解，好比五阿哥和尔康在争夺心爱的容嬷嬷之前是不可能相互拥抱的。

微软的不支持并不影响webgl的发展，随着firefox、谷歌和苹果等加入，webgl也开始出现了各种应用。

GLSL

GLSL为OpenGL着色语言(GLSL――OpenGL Shading Language),作用就是让 图形的渲染效果更好

CSS Shaders

简而言之，css shaders 让 css技术 具有 3D图形 特性

CSS ShadersAdobe公司推出的一个项目。
这项由Adobe和Apple、Opera合作研发的新标准已经提交至W3C，将为CSS技术带来3D图形特性。

Shader（着色器）可以理解为是一种运行于显卡端的小程序，通常用于游戏和其他图形相关的应用。着色器有两种，一种是顶点着色器，用于控制几何体的顶点以绘制出3D表面网格；另一种是片元着色器，用于控制像素的颜色。CSS Shaders技术将允许开发者同时使用顶点着色器和片元着色器。

在CSS中使用着色器可以制作出很多吸引眼球的动态效果。

Adobe展示了一些Demo视频，在第一个视频中Twitter的页面被渲染成了弯曲的表面；第二个视频更加有趣，将Google地图和街景渲染折叠了起来，像真的纸质地图那样。因为着色器可以作用于所有HTML内容，所以CSS Shaders渲染的元素包括了普通的表格、SVG甚至是HTML5 Video等等。