by zhangxinxu from http://www. 一、前面的所以然技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了。新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全貌还是很有必要的。虽不是时代缔造者,也不至于落后于时代发展大潮。 互联网的发展相当的神速,其他不说,就前端技术这块,出现的些新名词或生名词就让人眼花缭乱,应接不暇,比如说:HTML5 Canvas, WebGL, CSS Shaders, GLSL等。你是否有这样的疑问:这些都是些什么玩意?是喜欢打酱油还是客串CCTV群众演员?他们之间是否有暧昧,或是跨辈分的恩怨情仇? 好吧,我就八卦下这些前端前沿技术相关名字。 二、各自庐山面目HTML5 Canvas 目前在web实际项目中已有不少应用。例如图像的旋转,圆角的生成等。低版本的IE浏览器不支持该元素,还在可以通过调用如下JS可以让其支持部分canvas的功能:excanvas.js OpenGL OpenGL使用简便,效率高。它具有七大功能:建模、变换、颜色模式设置、光照和材质设置、纹理映射(Texture Mapping)、位图显示和图象增强图象功能和双缓存动画(Double Buffering)。 具体可参见OpenGL百科 WebGL 由于webgl是基于OpenGL和JavaScript技术结合,而OpenGL与微软DirectX存在着竞争关系,而且微软自身也开发了Silverlight插件,与webgl其实是类似的,所以微软对webgl技术并不支持。这很好理解,好比五阿哥和尔康在争夺心爱的容嬷嬷之前是不可能相互拥抱的。 微软的不支持并不影响webgl的发展,随着firefox、谷歌和苹果等加入,webgl也开始出现了各种应用。例如小有名气的基于webgl技术的谷歌人体浏览器(Google Body Browser)实验项目,用户可以查看3D人体结构(下图来自cnbeta)。 GLSL CSS Shaders Shader(着色器)可以理解为是一种运行于显卡端的小程序,通常用于游戏和其他图形相关的应用。着色器有两种,一种是顶点着色器,用于控制几何体的顶点以绘制出3D表面网格;另一种是片元着色器,用于控制像素的颜色。CSS Shaders技术将允许开发者同时使用顶点着色器和片元着色器。 在CSS中使用着色器可以制作出很多吸引眼球的动态效果。 Adobe展示了一些Demo视频,在第一个视频中Twitter的页面被渲染成了弯曲的表面;第二个视频更加有趣,将Google地图和街景渲染折叠了起来,像真的纸质地图那样。因为着色器可以作用于所有HTML内容,所以CSS Shaders渲染的元素包括了普通的表格、SVG甚至是HTML5 Video等等。 CSS目前已经可以制作一些3D动画效果,但是着色器这个关键角色的加入,将使这项技术变得更加灵活,提高了可编程性。CSS Shaders可以与Adobe Edge配合使用,制作出更多动态效果的网页。Adobe称未来Edge将拥有更强的表现力,而CSS Shaders正是为了达到这个目的而推出的。 CSS Shaders内置了一些常用的滤镜,包括设置模糊、阴影、色调、翻转、灰度、透明度、Gamma值等。另外也允许开发者自己编写着色器代码,使用的语言——不出所料,和WebGL一样——是GLSL。 有人可能会疑问,貌似CSS Shaders跟WebGL作用和接近,使用语言也一致,会不会发生冲突啊。根据Adobe的某些人员的说法,WebGL只能作用于一个Canvas,而CSS Shaders适用于任何Web内容。CSS的本意就是用来定义网页样式的,Shader的加入毋庸置疑可以大大增加灵活度,让开发者有更多的方式去创造出更具想象力的网页。两者是没有冲突滴~~ 目前,貌似没有浏览器鸟这厮,俺们需要静观些时日。 三、关系整理上面的表述中多少透露个各个名词之间的关系。所谓一图胜前言,什么妈妈的二姑的三舅妈的小外孙家的一条狗身上的虱子之类的话就免了,直接上图: 恩,为避免唠叨之嫌,其他我就不多说什么了。 四、文章提及&参考页面· HTML 5 Canvas 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.] (本篇完) 如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
相关文章
分享到:
标签: canvas, CSS Shaders, GLSL, HTML5, OpenGL, WedGL, 滤镜 这篇文章发布于 2011年10月10日,星期一,17:14,归类于 canvas相关。 阅读 29637 次, 今日 10 次 |
|