新一代图形技术WebGL

迷南。 2022-06-11 01:54 657阅读 0赞

WebGL，是一项用来在网页上绘制和渲染图形(3D图形)，并允许用户进行交互的技术。在传统意义上，通常只有高配置的计算机才能渲染图形。但是现在，随着个人计算机和浏览器的性能越来越强，使用通用便捷的web技术来在页面渲染图形已成为可能。WebGL结合HTML5和Javascript，使得开发者在网页上创建和渲染三维图形成为可能。这项技术在下一代易用直观用户界面和互联网内容展示上将发挥重要作用。下面有源码时代H5学科讲师为大家讲如以下几个实例：  
[http://helloracer.com/webgl/][http_helloracer.com_webgl]  
[http://mrdoob.com/lab/javascript/webgl/clouds/][http_mrdoob.com_lab_javascript_webgl_clouds]  
[http://madebyevan.com/webgl-water/][http_madebyevan.com_webgl-water]  
[http://alteredqualia.com/three/examples/materials\_cars.html][http_alteredqualia.com_three_examples_materials_cars.html]  
绚丽的界面、跟随鼠标的交互界面，立刻让我们感受到与以前Web技术的不同，给我们留下深刻的印象。可以预见，在接下来几年中，WebGL将在传统个人计算机、手机、平板电脑上等设备上会有所应用。  
HTML5作为新一代HTML标准，扩展了HTML的特性，如二维图形、数据存储、地理位置等，正是他的到来使得浏览器展示更复杂的界面成为可能，但是人们不仅仅满足于二维图形的网页。WebGL的出现使得网页上设计三维图形成为可能。  
WebGL是内嵌在浏览器中，因此我们可以在多种平台上使用它，如高配的计算机、平板电脑、智能手机等。  
1.WebGL优势  
传统的HTML5的canvas只能画一些二位的图形、如三角形、奔跑的兔子、实时更新地图等。而WebGL则可以在网页上显示和操控三维图形，他使得我们可以开发三维用户界面、三维网页游戏等等。而他的开发也没有我们想象中的复杂，仅需要一个编辑器、浏览器、还有WebGL的API，就可以帮我们实现绚丽的三位界面。  
WebGL是网页的一部分，因此它允许我们在上面放置按钮、弹出对话框、绘制文本、播放视频等，与以前我们网页开发无异。  
WebGL技术规范继承于开源的OpenGL标准，而OpenGL在过去20多年中被广泛应用于各种平台，因此我们可以利用OpenGL的相关资料来加深我们对WebGL的理解。  
2.WebGL来源  
OpenGL最初由SGI开发，在1992年发布为开源标准。WebGL根植于OpenGL，实际他是有OpenGL ES中派生出来的。OpenGL ES在2007年(ES 2.0)和2012(ES 3.0)年进行了两次升级，而WebGL就是基于OpenGL ES 2.0的。从2.0开始，OpenGL支持了一项非常重要的特性，即可编程着色器方法。该特性成为了WebGL1.0标准的核心部分。  
着色器方法，使用一种类似于C的编程语言实现的精美视觉效果。编写着色器的语言称之为着色器语言(shading language)，OpenGL ES 2.0基于OpenGL着色器语言。Web GL也使用GLSL着色器语言。  
3.WebGL程序的结构  
在HTML中，传统的网页包括HTML和Javascript两种语言。引入WebGL后，还需要加入着色器语言GLSL ES，现在Web页面包含了三种语言：HTML5、Javascript和GLSL ES。虽然GLSL ES是以字符串的形式在Javascript中编写的，但是WebGL保持了与传统网页相同的结构，只用到HTML文件和Javascript文件。

未完待续......

本文来源：http://bbs.itsource.cn/thread-1557-1-1.html

[http_helloracer.com_webgl]: http://helloracer.com/webgl/
[http_mrdoob.com_lab_javascript_webgl_clouds]: http://mrdoob.com/lab/javascript/webgl/clouds/
[http_madebyevan.com_webgl-water]: http://madebyevan.com/webgl-water/
[http_alteredqualia.com_three_examples_materials_cars.html]: http://alteredqualia.com/three/examples/materials_cars.html