认识WebGL

认识WebGL

作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszs

WebGL是一个跨平台、免费的底层3D绘图API的Web标准,它基于OpenGL ES 2.0标准。WebGL是网页上渲染三维图形图像的技术,它本身是HTML5规范的一部分。WebGL通过HTML5 Canvas元素对外暴露DOM编程接口。

WebGL全称是Web-based Graphics Language,它提供了使用JavaScript与GPU交互的方法。

让我们来回顾一下在WebGL诞生之前的情况。在没有WebGL的日子,我们要在网页上实现三维图形的显示,该怎么办?

当然,首选的是Adobe公司的Flash技术。有了Flash技术,我们可以在网页上显示2D/3D图像,以及动画。但是,浏览器是不能直接显示Flash内容的,于是需要安装插件——Flash Player。

其次就是微软的Silverlight技术,俗称“银光”,银光技术与Flash技术相似,功能也是同样的强大,遗憾的是,银光技术同样的需要在浏览器上安装插件。

除此之外,还有一些非主流的技术,这些技术都不如Flash或者Silverlight,而且同样的都有需要浏览器安装插件的缺点,因此就不再一一列举了。

WebGL是一个伟大的技术,它使得浏览器摆脱了需要插件的麻烦,可以可以让网页渲染直接调用显卡GPU来搞定,大大加快了网页显示的速度,而且编程接口使用的是统一、标准、跨平台的OpenGL接口实现。WebGL技术一出现,就引起了全球的关注,国际主流的IT公司包括Apple、Google、微软等都纷纷支持WebGL规范,推动了WebGL技术的发展。

对于很多想要学习WebGL的爱好者来说,最关心的话题莫过于WebGL该怎样学习,如何才能做到掌握、精通WebGL技术。对于这一点,我总结了一些思路,供大家参考。

要学习WebGL,需要循序渐进的掌握以下内容:

0)熟悉最好是精通JavaScript语言

1)理解模型视图矩阵,以及怎样设置场景

2)掌握渲染和操纵原语

3)理解着色器,精通着色器的功能

4)掌握创建虚拟场景的技术

5)掌握使用基本的物理规则来模拟互动

6)熟悉使用数学模型来渲染粒子系统、地形以及不规则碎片

7)掌握Three.js框架

8)熟悉GLGE和philoGL框架

9)积累WebGL的调试技巧和性能优化技巧

10)熟悉WebGL规范

WebGL的官方主页见:http://cn.khronos.org/webgl

《WebGL编程指南》是博文视点推出的、国内第一本描述WebGL技术的专著,对于需要这方面资料的爱好者来说,你们没有其他选择,只能看这个。这本书我也没看,所以也无从点评其内容。不管怎么样,作为一个新技术的“布道者”或者是“指引者”,这本书还是值得买来一读的。

时间: 2024-09-29 02:13:33

认识WebGL的相关文章

20个不可思议的 WebGL 示例和演示

WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了.在这篇文章中20个不可思议的 WebGL 示例来增强你对于这个新技术的理解. 1. Aquarium Image Source:www.webglsamples.org Created by Greggman an

WebGL递归处理和移动?旋转?缩放

3D世界只有三种运动方式:移动.旋转.放大缩小. 使用setTimeout函数可以实现反复的循环处理,那么具体的做法是怎样的呢?setTimeout函数的第一个参数是调用的函数,第二个参数是需要经过多长时间(毫秒)后调用这个函数.如果第一个参数指定为当前所运行的函数的话,那么就可以实现持续循环了.    ?函数A被调用    ?在函数A中,使用setTimeout,并传入函数A作为参数    ?经过指定的时间后,函数A被调用    按照上面的步骤,把WebGL中绘图部分写成递归函数,就可以持续循

初学WebGL引擎-BabylonJS:第0篇-起因

学习WebGL的BabylonJS是在一次偶然的情况下进行的,主要为了满足个人对全栈开发的欲望. 言归正传,下面开始简单说说相关过程 WebGL是什么?WebGL是基于html的客户端页面技术,基于html5的canvas(画布)展开的实施渲染.可完成游戏开发,场景演示等很多效果 为什么不选择threejs?因为太火,所以不喜欢(容我任性一下).最后选择了有微软基因的babylonJS引擎完成我的目标. 学习前提:国内对于Babylon相对太少,很多事情需要摸索,作者我目前仅仅是会初略的JS与J

无插件纯Web 3D机房,HTML5+WebGL倾力打造

前言 最近项目开发任务告一段落,刚好有时间整理这大半年的一些成果.使用html5时间还不久,对js的认识还不够深入.没办法,以前一直搞java,对js的一些语言特性和概念一时还转换不过来. 上一篇介绍了项目中做的一个彩虹爆炸图,主要用了 html5的canvas的2d绘制技术.这一回我想介绍一下项目中的一个亮点技术:html5的3D,以及如何用它打造精美的3D机房监控系统. 目标效果图 下图是客户给找的一张的效果参考图,希望机房至少能达到下面的3D效果. 懂的人都知道,这可是一张设计公司出的装修

三、在Canvas中使用WebGL

上一篇介绍了如何在<canvas>标签中绘制2d图形:接下来,我们看看如何在<canvas>中使用WebGL来绘制3d图形. 我们开始编写一个最短的WebGL程序:Hello WebGL;这个程序的功能非常简单,使用指定颜色清空<canvas>标签的绘图区下图显示了程序运行的效果,清空(用黑色)了<canvas>定义的矩形区域. 我们来看下代码,先看一下Hello WebGL.html: 1 <!doctype html> 2 <html&

[WebGL入门]二十四,补色着色

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 着色方法 上次介绍了反射光,反射光是实现光泽的不可缺少的概念,到此为止,基本的光照效果都已经封装完毕了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次稍微换个视点,看一下着色,着色是

WebGL 支持检测与已支持浏览器版本汇总

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 是否我的浏览器支持 WebGL http://caniuse.com 在页面搜索 webgl,找到  WebGL - 3D Canvas grap

如何在WebGL全景图上做标记

WebGL可以用来做3D效果的全景图呈现,例如故宫的全景图.但有时候我们不仅仅只是呈现全景图,还需要增加互动.故宫里边可以又分了很多区域,例如外朝中路.外朝西路.外朝东路等等.我们需要在3D图上做一些标记表示某个小的区域.当点击这个标记时,界面切换到对应标记区域的全景图.下图是实现此功能的一个小DEMO: 如何实现这样的功能?通过本篇的介绍,我们可以了解到以上交互过程的代码实现方式.这里我先提出几个问题 1).如何获取3D全景图某个地址的3D坐标? 2).如何将获取的地址的3D坐标转换为屏幕上的

three.js是什么,能干嘛,和webgl什么关系

如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用.你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上创建各种交互组件.现在这个功能集合里又有了一个新成员,即支持webGL.通过webgl可以直接使用显卡的计算资源,创建高性能的二维和三维计算机图形,然后在JavaScript里直接使用webGL编程,创建三维场景并生成动画,这个过程非常复杂,而且容易出错.three.js库可以简化这个过程. ----摘自<Three.js开发指南> 看了上面的摘文

webgl 网站demo

网络上的一些经典的WebGL资源网站和WebGL开源引擎整理 http://www.babylonjs.com/ http://threejs.org/ http://www.finalmesh.com/webglexamples.htm http://www.glge.org/category/demos/ http://www.visualiser.fr/index.php http://www.babylonjs.com/Demos/Retail/ http://oos.moxiecode