HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系 - 张鑫旭

互联网的发展相当的神速，其他不说，就前端技术这块，出现的些新名词或生名词就让人眼花缭乱，应接不暇，比如说：HTML5 Canvas, WebGL, CSS Shaders, ... 张鑫旭-鑫空间-鑫生活 it'smywholelife! 网站首页 我的微码 建议反馈 前端技术 CSS JavaScript HTML 生活与创作 生活 散文 日紫烟 前端在线资源 jQuery1.4 Canvas中文API Searchfor: HTML5Canvas,WebGL,CSSShaders,GLSL的暧昧关系 这篇文章发布于2011年10月10日，星期一，17:14，归类于Canvas相关。

阅读106012次,今日8次9条评论   byzhangxinxufromhttp://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1987 一、前面的所以然 技术的发展日新月异，说不定回家钓几天鱼，就出来个新东西了。

新事物新技术发展的初期，你无法预见其未来之趋势，生命诚可贵，没有必要花过多时间深入研究这些新东西，不过，知道了大概，了解个全貌还是很有必要的。

虽不是时代缔造者，也不至于落后于时代发展大潮。

互联网的发展相当的神速，其他不说，就前端技术这块，出现的些新名词或生名词就让人眼花缭乱，应接不暇，比如说：HTML5Canvas,WebGL,CSSShaders,GLSL等。

你是否有这样的疑问：这些都是些什么玩意？是喜欢打酱油还是客串CCTV群众演员？他们之间是否有暧昧，或是跨辈分的恩怨情仇？ 好吧，我就八卦下这些前端前沿技术相关名字。

二、各自庐山面目 HTML5Canvas 这个想必听过的人不少，所以这里匆匆数行带过。

HTML5Canvas实际上就是个画布元素，使用JavaScript在上面画图形，像是折线啊，圆形，渐变之类。

目前在web实际项目中已有不少应用。

例如图像的旋转，圆角的生成等。

低版本的IE浏览器不支持该元素，还在可以通过调用如下JS可以让其支持部分canvas的功能：excanvas.js OpenGL 标题中并未出现OpenGL，一是因为标题已经很长了，而是这个东东并不专属于web前端领域。

OpenGL（全写OpenGraphicsLibrary）是个定义了一个跨编程语言、跨平台的编程接口的规格，它用于三维图象（二维的亦可）。

OpenGL是个专业的图形程序接口，是一个功能强大，调用方便的底层图形库，是行业领域中最为广泛接纳的2D/3D图形API，是个与硬件无关的软件接口，其自诞生至今已催生了各种计算机平台及设备上的数千优秀应用程序。

OpenGL使用简便，效率高。

它具有七大功能：建模、变换、颜色模式设置、光照和材质设置、纹理映射(TextureMapping)、位图显示和图象增强图象功能和双缓存动画(DoubleBuffering)。

具体可参见OpenGL百科 WebGL WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

由于webgl是基于OpenGL和JavaScript技术结合，而OpenGL与微软DirectX存在着竞争关系，而且微软自身也开发了Silverlight插件，与webgl其实是类似的，所以微软对webgl技术并不支持。

这很好理解，好比五阿哥和尔康在争夺心爱的容嬷嬷之前是不可能相互拥抱的。

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

例如小有名气的基于webgl技术的谷歌人体浏览器(GoogleBodyBrowser)实验项目，用户可以查看3D人体结构（下图来自cnbeta）。

GLSL GLSL为OpenGL着色语言(GLSL――OpenGLShadingLanguage)（后面的可以不用看，都是专业术语，一个头，两个大）。

是开发人员用来在OpenGL中着色编程编写的短小的自定义程序，他们是在图形卡的GPU（GraphicProcessorUnit图形处理单元）上执行的，代替了固定的渲染管线的一部分。

比如：视图转换、投影转换等。

GLSL（GLShadingLanguage）的着色器代码分成2个部分：VertexShader（顶点着色器）和Fragment（片断着色器），有时还会有GeometryShader（几何着色器）。

负责运行顶点着色的是顶点着色器。

它可以得到当前OpenGL中的状态，GLSL内置变量进行传递。

CSSShaders CSSShaders是上周举行的AdobeMax上，Adobe公司推出的一个全新的项目。

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

Shader（着色器）可以理解为是一种运行于显卡端的小程序，通常用于游戏和其他图形相关的应用。

着色器有两种，一种是顶点着色器，用于控制几何体的顶点以绘制出3D表面网格；另一种是片元着色器，用于控制像素的颜色。

CSSShaders技术将允许开发者同时使用顶点着色器和片元着色器。

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

Adobe展示了一些Demo视频，在第一个视频中Twitter的页面被渲染成了弯曲的表面；第二个视频更加有趣，将Google地图和街景渲染折叠了起来，像真的纸质地图那样。

因为着色器可以作用于所有HTML内容，所以CSSShaders渲染的元素包括了普通的表格、SVG甚至是HTML5Video等等。

CSS目前已经可以制作一些3D动画效果，但是着色器这个关键角色的加入，将使这项技术变得更加灵活，提高了可编程性。

CSSShaders可以与AdobeEdge配合使用，制作出更多动态效果的网页。

Adobe称未来Edge将拥有更强的表现力，而CSSShaders正是为了达到这个目的而推出的。

CSSShaders内置了一些常用的滤镜，包括设置模糊、阴影、色调、翻转、灰度、透明度、Gamma值等。

另外也允许开发者自己编写着色器代码，使用的语言——不出所料，和WebGL一样——是GLSL。

有人可能会疑问，貌似CSSShaders跟WebGL作用和接近，使用语言也一致，会不会发生冲突啊。

根据Adobe的某些人员的说法，WebGL只能作用于一个Canvas，而CSSShaders适用于任何Web内容。

CSS的本意就是用来定义网页样式的，Shader的加入毋庸置疑可以大大增加灵活度，让开发者有更多的方式去创造出更具想象力的网页。

两者是没有冲突滴~~ 目前，貌似没有浏览器鸟这厮，俺们需要静观些时日。

三、关系整理 上面的表述中多少透露个各个名词之间的关系。

所谓一图胜前言，什么妈妈的二姑的三舅妈的小外孙家的一条狗身上的虱子之类的话就免了，直接上图： 恩，为避免唠叨之嫌，其他我就不多说什么了。

四、文章提及&参考页面 ·HTML5Canvas ·HTML5CanvasCheatSheet ·OpenGL百科 ·WebGL百科 ·10款webgl应用演示网站 ·使用GPU加速CSS？Adobe推出CSSShaders！ ·IntroducingCSSshaders:Cinematiceffectsfortheweb ·GLSL百科 本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址：http://www.zhangxinxu.com/wordpress/?p=1987 （本篇完） 相关文章腾讯开源的酷炫动画播放解决方案Vap初体验(0.902)使用CSS将图片转换成模糊(毛玻璃)效果(0.114)3DLUT滤镜颜色映射原理剖析与JS实现(0.114)IE6下png背景不透明问题的综合拓展(0.075)JavaScript实现新浪微博文字放大显示动画效果(0.075)翻译-IE7/8@font-face嵌入字体与文字平滑(0.075)cssSandpaper-兼容IE的CSS3JavaScript库(0.075)CSS实现跨浏览器的box-shadow盒阴影效果(2)(0.075)CSS3+js实现多彩炫酷旋转圆环时钟效果(0.075)IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展(0.075)简单了解HTML5中的WebNotification桌面通知(RANDOM-0.023) «上一篇翻译：web响应设计，乏味！ 关于一个JS功能实现的思维方式下一篇» 分享到： 标签：canvas,CSSShaders,GLSL,HTML5,OpenGL,WedGL,滤镜  发表评论（目前9条评论） 点击这里取消回复。

名称(必须) 邮件地址(不会被公开)(必须) 网站 悦心说道： 2019年08月28日15:54 【膜拜中~】 回复 Dall说道： 2015年10月9日16:17 总算搞清楚这几个家伙的关系了。

。

回复 陶留军说道： 2013年10月13日20:04 目前，貌似没有浏览器鸟这厮，俺们需要静观些时日。

CSSShaders如果被广大浏览器接受，那css确实又上一层楼了。

对张鑫旭同学的招聘推荐，大专学历可否试下？ 回复 declong说道： 2011年10月24日13:49 好强了，学习了。

回复 alex说道： 2011年10月17日11:54 lz说得很不错哦。

清晰明了。

。

。

最后那个图很好！！ 回复 小辛说道： 2011年10月13日10:43 能交个朋友吗我的QQ523275333目前也从事于前端制作 回复 小辛说道： 2011年10月13日10:31 你们那还招前端设计吗 回复 birdstudio说道： 2011年10月10日23:01 谢谢分享。

:) 回复 enzolinc说道： 2011年10月10日20:04 看得我晕头转向..硬着头皮看完了 回复 张鑫旭more，09年华中科技大学毕业，现上海，就职于阅文集团，专注web前端偏前领域，著有《CSS世界》《CSS选择器世界》《CSS新世界》 邮箱：[email protected] 关注我：微信和公众号微博掘金知乎头条B站Gitee 文章分类 CSS相关(382) Design相关(13) Graphic相关(71) Canvas相关(30) SVG相关(40) HTML相关(49) JS相关(232) jQuery相关(46) JSAPI(50) JS实例(114) Mobile相关(15) Web综合(49) 外文翻译(36) 文章存档 文章存档 选择月份 2022年三月 (2) 2022年二月 (4) 2022年一月 (3) 2021年十二月 (4) 2021年十一月 (3) 2021年十月 (3) 2021年九月 (4) 2021年八月 (5) 2021年七月 (6) 2021年六月 (2) 2021年五月 (5) 2021年四月 (4) 2021年三月 (3) 2021年二月 (14) 2021年一月 (3) 2020年十二月 (4) 2020年十一月 (3) 2020年十月 (11) 2020年九月 (2) 2020年八月 (3) 2020年七月 (4) 2020年六月 (4) 2020年五月 (3) 2020年四月 (5) 2020年三月 (5) 2020年二月 (3) 2020年一月 (7) 2019年十二月 (3) 2019年十一月 (5) 2019年十月 (3) 2019年九月 (5) 2019年八月 (9) 2019年七月 (4) 2019年六月 (7) 2019年五月 (5) 2019年四月 (5) 2019年三月 (4) 2019年二月 (4) 2019年一月 (9) 2018年十二月 (11) 2018年十一月 (8) 2018年十月 (7) 2018年九月 (4) 2018年八月 (6) 2018年七月 (10) 2018年六月 (7) 2018年五月 (9) 2018年四月 (3) 2018年三月 (9) 2018年二月 (7) 2018年一月 (3) 2017年十二月 (7) 2017年十一月 (4) 2017年十月 (3) 2017年九月 (5) 2017年八月 (4) 2017年七月 (5) 2017年六月 (4) 2017年五月 (6) 2017年四月 (1) 2017年三月 (5) 2017年二月 (5) 2017年一月 (4) 2016年十二月 (2) 2016年十一月 (7) 2016年十月 (2) 2016年九月 (3) 2016年八月 (6) 2016年七月 (5) 2016年六月 (6) 2016年五月 (2) 2016年四月 (2) 2016年三月 (4) 2016年二月 (3) 2016年一月 (6) 2015年十二月 (2) 2015年十一月 (7) 2015年十月 (1) 2015年八月 (4) 2015年七月 (3) 2015年六月 (3) 2015年五月 (3) 2015年四月 (3) 2015年三月 (7) 2015年二月 (4) 2015年一月 (4) 2014年十二月 (7) 2014年十一月 (1) 2014年十月 (3) 2014年九月 (1) 2014年八月 (4) 2014年七月 (3) 2014年六月 (4) 2014年五月 (1) 2014年四月 (5) 2014年三月 (3) 2014年二月 (3) 2014年一月 (3) 2013年十二月 (3) 2013年十一月 (6) 2013年十月 (1) 2013年九月 (6) 2013年八月 (3) 2013年七月 (7) 2013年六月 (3) 2013年五月 (7) 2013年四月 (5) 2013年三月 (5) 2013年二月 (4) 2013年一月 (10) 2012年十二月 (5) 2012年十一月 (4) 2012年十月 (4) 2012年九月 (5) 2012年八月 (5) 2012年七月 (5) 2012年六月 (5) 2012年五月 (6) 2012年四月 (4) 2012年三月 (9) 2012年二月 (6) 2012年一月 (4) 2011年十二月 (5) 2011年十一月 (7) 2011年十月 (3) 2011年九月 (9) 2011年八月 (5) 2011年七月 (6) 2011年六月 (7) 2011年五月 (8) 2011年四月 (8) 2011年三月 (6) 2011年二月 (6) 2011年一月 (5) 2010年十二月 (7) 2010年十一月 (8) 2010年十月 (7) 2010年九月 (10) 2010年八月 (10) 2010年七月 (10) 2010年六月 (8) 2010年五月 (11) 2010年四月 (14) 2010年三月 (11) 2010年二月 (1) 2010年一月 (15) 2009年十二月 (13) 2009年十一月 (7) 2009年十月 (6) 2009年九月 (5) 2009年八月 (12) 最新文章 介绍8个和滚动相关的CSS属性 CSSaccent-color属性简介 被低估的border-image属性 CSSoverflow-clip-margin属性简介 CSS:not()伪类选择器已支持复杂参数 HTMLinputmode与iOSAndroid软键盘类型测试 CSSbackground背景图标的变色技巧 纯CSS实现未读消息超过100自动显示为99+ 还有完没完，怎么又来了个scrollbar-gutter？ JS标签模板（Taggedtemplates）什么时候使用？ 今日热门 介绍8个和滚动相关的CSS属性(345) 理解CSS3transform中的Matrix(矩阵)(162) CSSaccent-color属性简介(131) jQuery页面滚动图片等元素动态加载实现(129) 去除inline-block元素间间距的N种方法(128) css行高line-height的一些深入理解及应用(117) jQuerypowerFloat万能浮动层下拉层插件(116) 杀了个回马枪，还是说说position:sticky吧(115) 漫谈js自定义事件、DOM/伪DOM自定义事件(100) 小tip:如何让contenteditable元素只能输入纯文本(95) 今年热议关于《CSS新世界》这本书(30)密码强度效果最佳实现一定是HTMLmeter元素(21)借助ffmpeg.wasm纯前端实现多音频和视频的合成(20)纯CSS实现未读消息超过100自动显示为99+(16)借助HTMLping属性实现数据上报(14)腾讯开源的酷炫动画播放解决方案Vap初体验(14)还有完没完，怎么又来了个scrollbar-gutter？(12)JS判断图像背景颜色单一还是丰富(11)深入JSgetRandomValues和Math.random方法(10)为什么HTML元素很少见人使用？(10) 我的应用 - 工具与应用 SVG在线压缩合并工具 图片转base64(拖进来) 在线二维码生成 任意字符转HTML编码 GIF在线生成工具 电影级别照片调色工具 在线资源 jQuery1.4API中文版 Snap.svg中文文档 stylus中文版参考文档 CSS3中文共享参考指南 非主流字符及字符图案   我的应用 我的应用 文章RSS订阅 返回顶部 登录