webGL总结

来源：互联网发布：sqlserver exists用法编辑：程序博客网时间：2024/06/06 02:42

WebGL学习汇报

一、WebGL简介

WebGL 和3D图形规范OpenGL、OpenCL一样来自Khronos Group，而且免费开放。它是一种3D绘图标准，是针对万维网的即时三维绘图API，这种绘图技术标准允许把JavaScript和OPenGL ES 2.0结合在一起，为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器里更流畅地展示3D场景和模型了。WebGL的好处就是免去了浏览器插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

WebGL 1.0标准已经赢得了AMD、NVIDA、高通、苹果、Google、Mozilla、OPERA等多家半导体和浏览器厂商的支持。Firefox 4.0 Beta、Chrome 9.0、Opera预览版、Safari每日构建版都已经提供了对WebGL 1.0的支持，AMD的催化剂显卡驱动自从去年的10.7版本也开始支持WebGL 1.0。

中间件生态系统对WebGL的支持也已经非常广泛，开发人员可以轻松得到大量的相关工具，包括C3DL、CopperLicht、EnergizeGL、CammaJS、GLGE、GTW、O3D、OSG.JS、SceneJS、SpiderGL、TDL、Three.js、X3DOM。

WebGL如何实现Web页面交互式三维动画渲染

现在主流的Web交互式动画由Flash等浏览器插件调用DirectX、OpenGL等操纵系统图形接口实现图形渲染，调用了硬件加速。但缺点是必须下载插件，如下图所示：

而WebGL可以直接以OpenGL接口实现HTML5的Canvas标签调用，以统一的OpenGL标准，从Web脚本生成利用硬件加速功能的Web交互式3D动画的图形渲染。如图所示：

Web 应用不断扩大的市场份额显示着它在未来的重要性，而图形元素则是任何一张有吸引力的Web页面都不可或缺的。随着Web应用的进一步复杂化，普通的平面静态图形已不能满足应用的需要。于是，用于Web页面的交互式三维动画应运而生。

但早期的技术非常不成熟，比如Java Applet实现的简单交互式三维动画，不仅需要下载一个巨大的支持环境，而且画面非常粗糙，性能也很差。究其原因，就在于早期的这些交互式三维动画在做图形渲染时，并没用直接利用到图形硬件本身所带的加速功能，也就是，即使安装了性能很高的显卡，对于Web页面的交互式三维动画的显卡也起不了什么作用。

后来，Adobe的Flash Player浏览器插件几乎在一夜之间，占据了Web交互式三维动画的半壁江山。和Java Applet 不同的是，它直接利用操作系统提供的图形应用程序接口，来调用图形硬件的加速功能，实现了高性能的图形渲染。这么一来，交互式三维动画几乎可以瞬时加载完成，而且对于相当复杂的交互和三维动画而言，它都表现不俗。

可是，这样的解决方法也有不少的问题。首先，它是通过浏览器插件来实现的，这就意味着对于每种不同的操作系统和浏览器的组合，都需要下载特顶板的插件，对于手持设备上运行的比较特殊的操作系统的操作系统和浏览器，就可能没有对应版本的插件；其次，对于操作系统上的图形应用程序接口的调用，它并不是遵循一个公开的标准。比如，在Windows平台上，Flash是通过调用DirectX来实现，而Mac OS上则是调用AGL。

这两点不足，很大程度上限制了Web交互式三维动画的应用范围。微软推出的Silverlight，本质上也无法解决这个问题。因此，开发一种无需浏览器插件支持、通过统一的图形应用程序接口调用来实现Web交互式三维动画图形渲染的技术，就变得很有必要，而这正是WebGL的革命意义所在。

尽管HTML5中引入了canvas标签，这个标签本身支持Web交互式三维动画的制作，但是，如果没有WebGL的支持，它并不能调用图形硬件加速功能。因此，此前虽然很多浏览器支持canvas标记，但由于性能不够好，无法得到广泛的应用。可是，一旦加入了WebGL的支持，它的面貌就焕然一新了。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

这意味着，以后不需要通过任何浏览器插件，仅仅用HTML和JavaScript，就可以作出性能丝毫不亚于现在用Flash、Silverlight等做出来的Web交互式三维动画，而且在任何平台式都能以同样的方式运作。

解析WebGL--3D图形硬件加速技术

WebGL是什么？Web+GL,这二者相加的结果是一整套针对浏览器的3D图形硬件加速解决方案，类似于O3D，后者是Google为了丰富网页的3D体验而开发的Open--Source图形硬件加速技术。

伴随着WebGL发布的一个热门话题“这可能预示着O3D将渐渐的成为一个鸡肋，并最终淡退江湖”。没错，发出这样感叹的人不占少数。当初Google的目标是利用O3D建立一套适用于浏览器3D的标准。其实对于O3D有着过分忧虑的人可以缓解一下，毕竟WebGL

毕竟稚嫩，要在短时间内达到普及的程度将非常困难，其还存在很多需要克服的困难。WebGL的主要发展方向是整合JavaScript和OpenGL ES 2.0,而JavaScript将成为其主要的瓶颈，它无法高效的处理大量的数据运算，速度很慢。当然这仅仅是以目前的条件来分析，相信以后对于运算效率的问题将会有很大改善。

WebGL必须要面对和克服的困难：

因为OpenGL ES 2.0并没用被大多数的硬件平台所支持，所以将会导致很多设备无法运行WebGL

另外，OpenGL ES 2.0对JavaScript的依赖达到了100%，其利用JavaScript来处理应用程序的场景绘图，例如：1）计算场景中子父物体间的矩阵运算。2）Culling Calculating（计算不需要绘制的内容）。3)分类计算，用于处理透明对象等。4）计算场景所包含的所有动画数据。这些应用因为JavaScript的计算瓶颈而受到不同程度的限制。无法高效利用JavaScript处理Skinning，如果利用GPU的运算能力来处理，势必会占用过多GPU的资源，从而无法更好协调其他效果，例如：Shadow mapping(绘制软边的阴影图算法）。

借用一个例子来更一步的剖析，例如：处理一个带有phong材质的物体，每一帧的渲染就近多达10次以上的GL调用：

一、给shader传递所包含的Matrix信息(通常1-5个Matrices).

二、每个需要传递的Color参数信息都将占有一次GL调用，对于Phone材质而言，至少需要两次调用（Color &Shininess)。然而如果追求效果的最大化，那么可以把五个参数都用上（Emissive, Ambient, Diffuse, Specular, Shininess) 一共产生五次GL调用。

三、处理定点坐标。

四、处理法线信息。

五、如果模型包含有贴图信息，那么还需要增加一次GL调用来传递UV信息。

六、最后再次执行GL调用完成对模型的绘制。

从上面的结果来看，最少也需要5次调用GL，最多可以达到14次。如果结合最终项目的需求以每秒30帧的频率来计算，其效率可想而知。

WebGL并没有积极的去解决数据导入问题。目前为止，仅仅可以利用IMG tags来嵌入材质信息，暂不支持DXT图片压缩格式（而EXT已经被大多数的3D显卡硬件所支持）.暂无预处理技术，依然是在裸奔。在一个独立的File中不支持CubeMaps（是一个以较低性能损耗来描绘静态物体对周围环境的反射效果的捷径）。除了利用JavaScript的数组以外，没有更好的方式传递几何信息。

WebGL目前存在的技术上的问题

1、浏览器：全屏

全屏是一种可以让内容覆盖整个屏幕的视图模式，没有窗口边框和其他多余的装饰

重要性

PC上的游戏通常都是用全屏模式来显示。每款游戏总是尽力去提供一种增强用户沉浸感的体验，而移除地址栏、滚动条和操作系统菜单等等的可能会使玩家分心的元素。

言论

“我认为全屏对于制作吸引人的web game来说是一个决定性因素。”--Mikael Emtinger

(ROME,技术总监)

“WebKit今天开始支持全屏了。Chrome也会尽快增加这一特性。我想Firefox应该也正在开发这一功能吧。”――Gregg Tavares（Google I/O大会WebGL主题演讲者）

“为了制作一款好的游戏，我们并不需要最新的GPU技术，但是我们无法离开全屏和鼠标捕获。”――Cedric Pinson（WebGL框架osg.js开发者）

现状

浏览器通常会支持一系列的全屏模式，但这其实并不算是真正的全屏。它通常不能覆盖整个屏幕，或者会留下地址栏和其他一些窗口的装饰。对于HTML5应用来说，也不可能请求切换到全屏模式。

如何解决

浏览器应当提供一个API来允许Java请求切换到全屏模式，然后让用户选择是否允许。就像让用户选择是否允许网站的弹出窗口一样。

许多操作系统和窗口管理器都将一些自带的装饰强加给用户界面。为了摆脱这些多余的视觉元素，应用必须切换到一个完全不同的模式显示。

2、输入：鼠标捕获

鼠标捕获是一种凭借鼠标与用户产生互动的模式，但它与鼠标指针在屏幕上的位置并无直接关系。这是一种称为“鼠标视角”（Mouse Look）的技术，其中操作系统里的鼠标指针被隐藏起来，并且移动鼠标也不会把鼠标指针移出应用程序的显示范围。重要性：

想要把内容呈现在用户眼前，游戏制作者有很多选择。最流行的一种就是第一人称视角（FPS），其中鼠标用来控制视角方向。这类游戏通常都使用了鼠标捕获，因为：视角方向与鼠标指针在屏幕上的坐标位置无关，鼠标指针碰到了屏幕边缘或者是否在游戏区域内对游戏控制来讲没有任何意义。如果显示鼠标指针，会使用户分心。

言论

“各家浏览器都在试图寻找一种最好的解决方案，既可以引入鼠标捕获技术，又可以防止一些网站‘偷走’你的鼠标。浏览器对全屏技术的支持有助于解决这一问题。” ――Gregg Tavares（Google I/O大会WebGL主题演讲者）

现状

目前，浏览器尚不支持Java捕捉鼠标输入。原因非常简单，他们不想让用户失去对鼠标的控制。如果使用了鼠标视角，当鼠标指针离开了内容区域或者碰到了屏幕边缘会导致一系列问题。

如何解决

Java必须向浏览器指明使用鼠标捕获的目的。浏览器必须询问用户是否允许程序使用鼠标捕获。应当默认使用Esc键来退出鼠标捕获模式。

鼠标提供了一种可以映射到屏幕上每一像素的高质量的输入方式。目前一种简单、甚至可以说是幼稚的解决方法就是永远将鼠标指针位置固定在屏幕中央。而FPS游戏通常吸引并推动用户来提高鼠标的灵敏度。对于鼠标视角来说，固定鼠标指针位置只会导致愚蠢和粗糙的用户体验。

3、WebGL：多重渲染目标（Multiple Render Targets）

多重渲染目标（Multiple Render Targets）是一种一次性将渲染输出储存在多个纹理中的技术。在OpenGL中可以查询gl_MaxDrawBuffers的值来实现此技术，而WebGL 1.0标准则支持在GLSL中使用gl_FragData来实现多重渲染目标。

重要性

这是一种类似于延期着色（Deferred Shading）和屏幕空间环境光遮蔽（Screen-Space Ambient Occlusion）的技术，它们依赖于渲染通道中产生的数据，比如每个片元的颜色、法线和位置。

如果不能支持多重渲染目标，场景必须渲染多次（使用多个渲染通道）来获取这些数据，这将大大提高资源的开销。

言论

“如果当OpenGL ES 3.0推出的时候，如果能支持多重渲染目标，那么也许WebGL 2.0也会支持。” ――Gregg Tavares（Google I/O大会WebGL主题演讲者）

“在多通道中渲染有时会拖慢运行速度。”――Mikael Emtinger (ROME, 技术总监)

现状

因为WebGL 1.0标准及其实现缺乏一种指定被绑定的纹理到目标索引的方法，多重渲染目标实际上是不可用的。（译者注：也就是说目前Frame Buffer Object只能绑定一个渲染目标（Render Target），虽然着色器支持多目标渲染，但是外部一次却只能设置一个渲染目标。另外一方面，理论上gl_FragData并不是专为MRT准备的，所以WebGL在不支持MRT的情况下支持这个关键字, 无可厚非。）

如何解决

Khronos可以修正WebGL标准以实现多重渲染目标。Google可以更新他们的ANGLE项目以允许开发者用OpenGL 2.0或Direct3D 9.0实现多重渲染目标。

4、WebGL：几何体实例化（Geometry Instancing）

几何体实例化（Geometry Instancing）这项技术允许在需要多次绘制具有相同性质的物体时，只调用一次绘制命令。作为OpenGL的扩展之一，实例化绘制（Draw Instanced）从2008年开始支持这一特性。

重要性

游戏场景中经常需要在每一帧中都绘制相同的物体许多次，比如植被、粒子、化身和物理刚体等。如果没有实例化绘制，渲染需要调用多次绘制命令或大量更新缓冲区（假实例化），这会导致性能大幅下降。

桌面和移动终端都会从这一特性中受益。实例化的替代方案是使用Java进行大量运算再将数据更新到GPU，或者单独调用多次绘制命令。

言论

“如果这项技术能在那些不支持它的硬件上被相对容易的模拟出来，那么就很有可能被添加到WebGL中。” ――Gregg Tavares（Google I/O大会WebGL主题演讲者）

现状

目前WebGL 1.0标准中不包含任何用于实例化绘制的API。

如何解决

Khronos可以修订WebGL标准以实现实例化绘制。Google可以更新他们的ANGLE项目以允许开发者用OpenGL 2.0或Direct3D 9.0实现实例化绘制。

5、WebGL：顶点纹理查找

可编程的硬件渲染需要两个步骤来生成一幅图像：顶点着色器和片元着色器。从传统上来讲，只有片元着色器可以从纹理中取样。从Direct3D 9.0和OpenGL 2.0开始，顶点纹理查找被正式支持。

重要性

这项技术在位移贴图、物理草地波动和粒子效果中都能用到。

言论

“ANGLE项目正在着手添加对顶点着色器纹理查找的支持。” ――Gregg Tavares（Google I/O大会WebGL主题演讲者）

现状

Windows（r686）平台上的新版本的ANGLE运行库已经支持这一特性。Firefox 6使用了这一版本的运行库。Google Chrome 12还没有使用这一版本的运行库。

如何解决

Google可以更新Chrome并使用他们自己的新版本的ANGLE运行库。

6、WebGL：浮点纹理（Floating point textures）

传统上，在每个通道中纹理被限制在1个字节里。也就是说每个通道只能有256个不同状态。而浮点纹理在每个通道中使用了4个字节，这足够实现IEEE标准的浮点值。从Direct3D 9.0和OpenGL 2.0开始，浮点纹理被正式支持。

重要性

在高动态范围渲染（HDR）、延期着色、屏幕空间环境光遮蔽和阴影映射等技术中，都需要用到浮点级别的精确度。如果没有浮点纹理，会导致开发者必须人工手动设置渲染，或者渲染效果根本无法实现。

言论

“我将向ANGLE项目提出（支持浮点纹理的）请求，看看他们怎么说。” ――Gregg Tavares（Google I/O大会WebGL主题演讲者）

现状

Windows（r686）平台上的新版本的ANGLE运行库已经支持这一特性。Firefox 6使用了这一版本的运行库。Google Chrome 12还没有使用这一版本的运行库。

如何解决

Google可以更新Chrome并使用他们自己的新版本的ANGLE运行库。

7、浏览器：在Windows平台上使用本地OpenGL、ANGLE 还是Direct3D？

OpenGL这套API标准获得了大多数显卡制造商的良好支持（ATI、NVIDIA和Intel）。Direct3D是微软的标准，用于和OpenGL竞争。而ANGLE则是Google提出的用于将OpenGL转换到Direct3D 9.0的项目。

“ANGLE项目的目标是通过将OpenGL ES 2.0 API转换成DirectX 9 API，从而允许Windows用户无缝运行WebGL内容。”――ANGLE Project

重要性

有一个重要的现实是，目前众所周知，这个概念缺乏3D硬件驱动的支持，并且即使是支持的驱动也很不可靠。同样对于Direct3D也是这样，它经常过期、充满bug或者不可用。

除了NVIDIA的硬件之外，其他硬件的OpenGL驱动都很烂。许多WebGL内容可以借助本地OpenGL运行的很好，但即使没有用到那些ANGLE（Direct3D）支持的不好的特性，却也不能借助Direct3D运行。能买来这么好的显卡玩游戏或者进行他3D任务的用户，通常都会配备很好的硬件和相应的驱动。对于同样是最新的OpenGL驱动和Direct3D来说，经常是OpenGL运行效果的更好。

言论

“不，这个问题对于一般用户来说太复杂了。也许应该让开发者去选择，其中哪个能通过Java得到更酷的效果，这样选项就清晰明了了。” ――Mikael Emtinger (ROME, 技术总监)

“OpenGL可以制作出3A级游戏。OpenGL的支持从来都不是一个问题。”――Mikkel Gjol （图形程序员，就职于Splash Damage，参与制作了3A级游戏《边缘战士》）

现状

默认情况下，Chrome和Firefox在Windows平台上使用了ANGLE/Direct3D。虽然用户可以更改这一设置，但是改起来非常困难和不便。

存在的问题

Firefox混合使用Direct2D和Direct3D，如果开启了本地OpenGL支持会降低页面渲染性能。

当下如何解决

浏览器应当作出明确的抉择，OpenGL和Direct3D哪一个驱动更好，而不是默认使用Direct3D。WebGL程序可以指定使用其中一个对于程序来说更合适的驱动。

用户可以全局或针对单个站点指定使用哪一个驱动，而不依赖于浏览器或WebGL程序的设置。

最终如何解决

PC制造商应当负责提醒用户及时升级最新的驱动程序。显卡制造商应当提高驱动程序的质量。

二、OpenGL

OpenGL (Open Graphics Library)是个定义了一个跨编程语言、跨平台的编程接口的规格，它用于三维图像或二维图像。OpenGL是个专业的图形程序接口，是一个功能强大，调用方便的底层图形库。

OpenGL是行业领域中最为广泛接纳的2D/3D 图形API,其自诞生至今催生了各种计算机平台及设备上的数千优秀应用程序。OpenGL是独立与视窗操作系统或其它操作系统的，亦是网络透明的。

OpenGL是个与硬件无关的软件接口，可以在不同的平台如Windows 、Unix、Linux之间移植。因此，支持OpenGL的软件具有很好的移植性，可以获得广泛地应用。由于OpenGL是图形的基层图形库，没有提供几何实体图元，不能直接用以描述场景。但是，通过一些转换程序，可以方便地将AutoCAD,3DS/3DSMAX等3D图形设计软件制作的DXF和3DS模型文件转换成OpenGL的顶点数组。

特点及功能

OpenGL是一个开放的三维图形软件包，它独立于窗口系统和操作系统，以它为基础开发的程序可以十分方便地在各种平台间移植；OpenGL可以与visual c++紧密接口，便于实现有关计算和图形算法，可保证算法的正确性和可靠性；OpenGL使用简便，效率高。它具有七大功能：

1、建模：OpenGL图形库除了提供基本的点、线、多边形的绘制函数外，还提供了复杂的三维物体（球、锥、多面体、茶壶等）以及复杂曲线和曲面绘制函数。

2、变换：OpenGL图形库的变换包括基本变换和投影变换。基本变换有平移、旋转。变比镜像四种变换，投影变换有平行投影（又称正射投影）和透视投影两种变换。其变换方法有利于减少算法的运行时间，提高三维图形的显示速度。

3、颜色模式设置：OpenGL颜色模式有两种：即RGBA模式和颜色索引（Color Index).

4、光照和材质设置：OpenGL光有辐射光（Emitted Light），环境光（Ambient Light)、漫反射光（Diffuse Light) 和镜面光（Specular Light)。材质是用光反射率来表示。场景（Scene）中物体最终反映到人眼的颜色是光的红绿蓝分量与材质红绿蓝分量的反射率相乘后形成的颜色。

5、纹理映射（Texture Mapping)。利用OpenGL纹理映射功能可以十分逼真地表达物体表面细节。

6、位图显示和图像增强功能除了基本的拷贝和像素读写外，还提高融合（Blending)、反走样（Antialiasing)和雾(fog)的特殊图像效果处理。以上三条可使被仿真物更具真实感，增强图形演示的效果。

7、双缓存动画（Double Buffering)双缓存即前台缓存和后台缓存，简言之，后台缓存计算场景、生成画面，前台缓存显示后台缓存已画好的画面。

此外，利用OpenGL还能实现深度暗示（Depth cue)、运动模糊（Motion Blur)等特殊效果。从而实现了消隐算法。OpenGL的结构如图。

从图中可以看出，OpenGL的功能就是连接场景图形接口和GPU，通过OpenGL,场景图形才能在显示器上显示。

三、WebGL框架

通过使用框架，使得在WebGL中画图更简单。目前，SceneJS,Three.JS和PhiloGL是WebGL很流行的框架。这三种框架的效率怎么样呢？

今年3月一个程序员做了一个小测试，他做了一个N个立方体，循环移动的透视的小测试，得到了下图表：（来自http://steffe.se/?p=475 FPS：每秒帧数 frames per second）

从图表中，我们可以看到Three.js和SceneJS在处理这个程序时，在大约600个立方体时FPS下降到60以下。WebGL的响应的场景图的数据是1000，而非浏览器的OpenSceneGraph(OSG)数据是3000。

结论：当从OpenGL移到WebGL上时，我们性能会下降66%。当我们用一个框架，效率会下降更多，也许WEB对于重量级的3D图形还没有做好准备。

框架用法说明：所有的场景图形库都有很好的API。SceneJS的API和JSON相似，它学习起来很简单。Three.js是一种类型的API，它相对要小一点，不用JSON。PhiloGL增加了额外的功能帮助你可以使用本地的WebGL,这个WebGL的接口不是百分之百的被封装好了的，这使得学习PhiloGL困难一点，下面来看一下WebGL常用的几个框架。

（一）PhiloGL

Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构架WebGL应用。PhiloGL是WebGL的一个先进的数据可视化框架，

特点：

1、基于JavaScript

PhiloGL是以JavaScript为基础的，提供了一款强大的API。

2、集中在性能

PhiloGL一直在尝试着尽可能地接近GL(graph library),给WebGL提供了一款

3、提供所有你需要的模型

PhiloGL 提供了丰富的模型系统，覆盖了程序和渲染管理到XHR，JSONP。

4、资源开放

PhilloGL有一套完整的API 文档，描述了很多模型和类的方法和接口。 PhiloGL的核心：PhiloGL提供了全球的 PhiloGL 方法来创建WebGL 应用，静态方法PhiloGL.hasWebGL()来检查浏览器是否支持WebGL,,静态方法PhiloGL.unpack()用来把模型倒入全局空间。

API

1、PhiloGL Static Method:hasWebGL

返回ture 或则false，当浏览器支持WebGL 时返回true,否则返回false.

语法结构：PhiloGL.hasWebGL()

2、PhiloGL Static Method:unpack

Vec3,Mat4,Quat,Camera,Program,WebGL,O3D,Scene,Shaders,IO,Events,WorkerGroup,FX 模型和类，这样他们可以通过全局范围内互相访问，而不是通过PhiloGL.moduleName 访问。

语法结构：PhiloGL.unpack()

3、PhiloGL 方法：构造函数

建立一个PhiloGL 应用程序。这个PhilGL 提供一个WebGL的环境，一个程序、一个照相机、一个场景和事件的提交和选择，使用纹理或其它的效果。

语法结构：PhiloGL(canvasId,options)

参数：canvasId (string) canvas元素的ID

Options (object) 一个通过选择WebGL环境时就产生的对象。现在唯一支持的选择是： dubug:true

Program management:

Program （mixed,optional）

Options：一个包含创建一个程序的对象，也可以是程序对象的数组，提供了包含的ID。程序的选择可以是：

Id (string) 创建多个程序时使用。

From (string) 可能的选项，defaults,ids,sources,uris.。

Path (string，optional) 设置一个连接的路径将顶点着色器和片段着色器连接。

Vs (string) 顶点着色器的ID或名字或代码

Fs (string) 片段着色器的ID或名字或代码

Nocache （boolean,optional)如果选择true，文件会被重载不会从缓冲区中取出。默认是false.

Camera management：

Camera (object,optional) 它可以有以下的选择

Fov （number) 视场，观景范围，默认是45

Near (number) 近距离默认0.1

Far (number) 远距离，默认500

Positon (object) 相机位置,默认{x:0,y:0,z:0}

Target (object) 目标位置，默认{x:0,y:0,z:0}

Scene management

Scene (object,optional) 场景的选择有：

Lights (object,opitional) 一个管理光的对象

Texture management (object,optional) 一个加载纹理的对象

Src (array) 需要加载的图片的路径

TextureType （string,optional)纹理的类型，默认 TEXTURE_2D

pixelStore （array,optional) 名字的数组，它的值定义了纹理的像素。默认[{name:'UNPACK_FLIP_Y_WEBGL',value:true}].

Parameters (array,optional) 设置纹理的滤镜，默认 NEAREST，

Data (object)

Event handing 等等

（二）O3D

O3D是由Google公司开发的一套用于web3D的JavaScript API，是为了创建基于网页的3D图形操作界面和3D游戏而开发。O3D可以看做是对OpenGL的封装。O3D的架构如下所示：

底层是基于OpenGL和Direct3D接口实现，支持顶点shader和像素shader，支持GPU加速运算。利用本技术开发的应用具有效率高、运行稳定、三维效果丰富等优点。另外，利用O3D技术开发的web应用程序可以跨平台使用，如可以被windows/Mac-OS、Linux的用户使用。O3D技术可以很好的被绝大多数的浏览器支持，如FireFox,Safari,Google Chrome,Internet Explorer,等等。

O3D的API可以直接操作GPU，已获得更好的三维图形处理效果，优于纯软件渲染。

O3D是一种开源的JavaScript API，可以创造交互式三维图形应用，这些应用能够在浏览器中运行，例如游戏，广告，三维模型浏览器，产品显示，虚拟世界等等。O3D扩展了基于Web的客户端软件，通过以下方面：

1、系统：O3D提供了一个浏览器插件，增强标准网页浏览的图形处理能力，包括Windows,Macintosh和Linux平台。

2、内容：Web的内容形式无非为HTML格式，图像文件和视频文件。开发人员指南提供了如何为3D内容创建文件转化器和加载器的相关信息。O3D提供了一个COLLADA转换器,可用于导入COLLADA格式文件。（COLLADA是一个开放标准的三维格式，被当今流行的3D内容创建程序所支持，如SketchUp, 3ds Max 和Maya.)可以直接用这个转换器或者自己编写的转换器加载其他格式的3D文件。

3、代码：O3D通过使用一个3D图形的API来扩展JavaScript语言。它使用标准的JavaScript 事件处理来回调方法

一、Collada文件类型的转换

要用O3D API 在场景中导入3DMAX建的模型，需要将模型转化为*.o3dtgz文件。转化之后可以被O3D读取，否则不能加载到场景中。转换之后，利用javascript场景加载函数o3djs.scene.loadScene()加载转化之后的.3dtgz文件，就可将模型加载到场景中。下面就说一下怎样利用3dmax2008导出COLLADA文件，即*.dae文件，并将.dae文件转换为*.o3dtgz文件。

首先要安装3DMAX的转换COLLADA文件的插件ColladaMax plug-in,目前有两个版本，一个是ColladaMax_FREE_3.05B.exe,这个版本主要针对3Dmax2008等，下载地址：http://downloads.sourceforge.net/colladamaya/ColladaMax_FREE_3.05B.exe?modtime=1204621947&big_mirror=0&filesize=3670767 ；另一个是ColladaMax_FREE_3.05C.exe，这个版本主要针对3Dmax2009等，可以在这里下载 http://downloads.sourceforge.net/project/colladamaya/COLLADAMax%201.4.1%20plug-ins/ColladaMax_FREE_3.05C.exe/ColladaMax_FREE_3.05C.exe 。安装这个插件之后就可以利用3Dmax 导出COLLADA文件了，即*.dae文件。

接下来*.dae文件转化为*.o3dtgz文件，这需要下载o3d converter 转换工具，可以在这里下载 http://code.google.com/p/o3d/downloads/list 。这里converter的说明http://code.google.com/apis/o3d/docs/artdesignerguide.html。这个converter是控制台命令行的。命令行是怎样操作转换的呢？

例如，我们的model.dae文件保存在"F:\src“下,并且我的converter文件夹保存在F:\下，我就可以打开cmd输入命令“F:\converter \O3dConverter.exe E:\src E:\src\model.dae”进行转换，这样在E:\下就生成了model.o3dtgz文件了。

二、O3D运行环境

O3D运行需要O3D插件支持，像FLASH需要FLASHPLAYER播放器一样。

三、O3D开发库

开发O3D需要O3DAPI接口库。

四、要创建一个O3D项目需要做的基本工作

1、生成O3D对象

2、结合全局变量赋值并且初始化API库

3、生成pack包，用于管理所产生的O3D对象

4、生成渲染图形

5、建立在绘图环境（透视网络和视图转换）

6、生成效果，并加载渲染信息

7、生成素材和形状，设置列表及其他素材参数

8、对模型添加动作及形状

9、生成绘制元素列表

10、建立渲染回调函数，在每次3D模型刷新时执特定任务

一个O3D应用程序时基于HTML的，主要的O3D功能是HTML文档的<head></head>标签之间，包含在<script>标签元素的代码实现的，例如下面的代码。

1、HTML文档

当HTML文档完成加载时，O3D的init()函数被调用。当关闭HTML文档时，会触发onunload事件，从而调用O3D的uninit()函数，完成一些清理工作，比如对象的删除，内存释放等。

2、O3D接口API库

O3D包含了一系列公用库，如果要用某个功能函数，就需要在程序的开始在<script>标签内加载该代码。如下所示，第一个<script>标签内的加载的库中定义了require()函数，用这个函数来加载其他的接口API库。

O3djs.require('o3djs.util');

O3djs.require('o3djs.math');

O3djs.require('o3djs.rendergraph');

生成O3D插件对象，在代码实例中，init()函数调用了O3D库函数O3djs.util.makeClients(), 以此来产生O3D对象。当这个函数返回时，它会调用回调函数initStep2()。用户浏览器必须允许脚本执行。

Function init(){

O3djs.util.makeClients(initStep2)

}

建立基本的O3D，给全局变量赋值：

Var o3dElement=clientElements[0];

g_client = o3dElement.client;
g_o3d = o3dElement.o3d;
g_math = o3djs.math;

上面的变量有如下意义：o3dElement 是HTML O3D元素，是DOM的一部分，g_client是O3D应用程序的入口点，g_o3d是O3D的命名空间，g_math是O3D数学库的命名空间。

3、产生对象包pack

对象包容纳了O3D的所有对象，并控制这些对象的生命周期。

g_pack=g_client.createPack();

4、创建渲染图

下端例子代码，用库函数renderGraph.createBasicView()产生一个标准的渲染图。这个渲染图有两个图例表，一个用于绘制非透明材质的元素（性能绘图列表），另一个用于绘制透明材质元素（透明效果绘图列表）

var viewInfo = o3djs.renderGraph.createBasicView(
    g_pack,
    g_client.root,
    g_client.renderGraphRoot);

5、设置绘图背景（drawContext)

绘图背景指定了视图投影和虚拟摄像机的位置。drawContext对象是用库函数renderGraph.createBasicView()产生的。下面的例子代码展示了如何设置它的参数：

// 建立一个简单的透视图

viewInfo.drawContext.projection = g_math.matrix4.perspective(
g_math.degToRad(30), // 30度视场

g_client.width / g_client.height,

viewInfo.drawContext.view = g_math.matrix4.lookAt([0, 1, 5], // 眼睛

6、创建一个效果并加载渲染

顶点和像素着色器定义在HTML文档的<textare>之间。着色器控制每个像素的颜色计算。下面的代码产生效果(redEffect)并将渲染内容读入着色器。

Var redEffect=g_pack.createObject('Effect');

//在HTML文档中寻找'Effect'的元素

Var shaderString = document.getElementById('effect').value;

//将元素<testarea id='effect'>中的所有内容加载到Effect对象中

redEffect.loadFromFXString(shaderString);

7、生成材质和形状

模型的材质是在initStep2()中创建的，并被赋给渲染列表，该列表控制非透明材质。在下面的代码将模型的材质效果设置为红色 'redEffect’，这样图形硬件可以可以对模型进行适当的渲染。在下面的代码中，由于将模型所有像素都设置为红色，所以没有进行复杂的渲染计算。代码中的createCube()函数，创建了几何立方体，并渲染成红色材质。可以将立方体替换成SketchUp, 3ds Max或者Maya等工具模型。

Var redMaterial=g_pack.creatObject('Material');

redMaterial.drawList=viewInfo.performanceDrawList;

redMaterial.effect=redEffect;

Var cubeShape=createCube(redMaterial);

8、给模型建立动作

g_cubeTransform = g_pack.createObjec

g_cubeTransform.addShape(cubeShape);

g_cubeTransform.parent(g_client.root);

9、产生绘制元素（Draw Elements）

每个图形基元都有一个用于描述该图形的材质及效果的绘制元素（draw element）。库函数createDrawElements()为每个图形基元生成不同的绘制元素（draw element）并将这些绘制元素添加到与图形基元材质有关的绘制列表（draw list）中。当窗口渲染时，系统会为每个绘制列表（draw list）产生一次绘制刷新（draw pass），这样所有的在绘制列表（draw list）中的绘制元素（draw element）就会被渲染。

cubeShape.createDrawElements(g_pack, null);

10、设置渲染回调函数

每次硬件刷新屏幕时，场景都会被自动渲染。下面的例子代码中setRenderCallback()函数设置了一个回调，用于每次场景渲染时更新模型的动作及形状。

g_client.setRenderCallback(renderCallback);

定义顶点着色器和片元着色器，代码放到HTML的<script>标签中，使用类型是’X-shader/X-vertex’和‘x-shader/x-fragment’;

在initGL函数中初始化WebGL上下文（WebGL Context）;

使用getShader和initShaders函数将着色器载入到WebGL的program对象中。

定义模型视图矩阵（mvMatrix）和投影矩阵（pMatrix），并使用setMatrixUniforms函数将他们从JavaScript推送到WebGL中，也就是显卡段，使得着色器可以调用它们：

使用initBuffers函数载入含有场景内物体信息的数组对象。

使用名如其义的函数drawscene函数来绘制场景；

建立一个webGLStart函数，在页面被加载时被调用，完成上述的一切；

最后，在HTML代码中加入一段canvas标签的内容，来显示绘制场景。

（三）SceneJS

SceneJS 是由Lindsay Kay开发的，一个开源的3D引擎，它提供了为在WebGL中定义和操作3D场景JSON-based API，提供功能性API使开发者得以简便地在WebGL canvas element上创作互动3D场景. 最新beta版现已支持COLLADA对象导入。SceneJS 目前最新版本是今年5月推出的V0.8.0 Beta,之前2010年12月推出的V0.7.9 Beta,9月28推出的V0.7.8 Beta,9月6推出的V0.7.7 Beta,7月18推出的V0.7.6.2 Beta......及最早的2010年3月25号推出的V0.7.0 Beta,。在这短短的1年半的时间里，SceneJS 一共更新了10个版本，平均不到两个月的时间更新一次，可见SceneJS还是很有前途的。

特点

1、JSON 场景定义

SceneJS.createNode

SceneJS.createNode 在JSON Scene Graph API 中的功能是允许我们创建场景内容，JSON场景图形不像JavaScript场景，支持WebGL可以在浏览器外面构建和处理。

2、JSON 场景的更新和查询

SceneJS.withNode

JSON Scene Graph API 下的SceneJS.withNode 的方法使为我们提供一系列的方法来查询在场景图形引擎中操作节点，渲染和选择一些场景。大致的意思是得到一个节点，通过选择，你可以得到、设置其属性，附加监听等。

3、快速渲染与细节

从V0.8开始，SceneJS 通过编译一个场景图形的顶点来显示一系列的WebGL调用，这是周期性的在渲染线程中来回移动

场景的节点一定义，它就被编译到显示列表中。然后我们就可以增加、移动或者更新这个节点。

API

SceneJS的API如下图所示：

SceneJS API 从基于JavaScript 的API 改变到JSON API，它包装了类的API，它使我们的更简单地创建、过滤、存储和转换3D场景。

JSON Scene Graph API提供了在场景图片引擎中创建、查询、更新和销毁节点的方法。

Utilities API是复杂查询，场景最优化，验证等的一个开源的工具库。

Message API 是确定命令被发送到JSON Scene Graph API.

这些潜在的核心是场景图片引擎，它驱动WebGL使用最优化。

引擎依赖于Service IoC API 提供做事情的方法。

JavaScript API 已经废弃了。

0 0