2011工作总结

 

2011工作总结

时光荏苒，2011年很快就要过去了，回首这一年，我不禁感慨万千。今年6月，我大学毕业，和同学一起来到北京，第一次正式的工作。我真的很庆幸我来到了华电万通，从事着我的专业。转眼，我来公司也快四个月了，虽然只有短短的四个月但是我却学会了很多东西。在专业方面，终于把大学的理论知识用到了实践中，并不断地扩展我的专业领域。在与人相处方面，我也学会了怎样更加有效地与人交流。作为，公司的一名研发工程师，我研发的主要内容是关于3D游戏的应用，研究的方向是WebGL这一块。回首我在进公司的这四个月，第一个月主要是在熟悉公司环境，学习JavaScript；第二个月主要是在研究WebGL；第三个月主要是在研究WebGL的一个引擎——ThreeJS；第四个月，也就是现在我主要看了一下3D里面关于数学的知识、3D的理论知识、ThreeJS实现的原理。下面，我将分别从JavaScritp,WebGL,ThreeJS以及工作中遇到的困难这几个方面总结一下我的工作。

一、JavaScript

JavaScript是属于网络的脚本语言，它被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用，它是因特网上最流行的脚本语言，是一种简单易学的编程语言。我用了几乎半个月的时间学习JavaScript，主要学习了JavaScript的基础知识(JS变量，JS运算符，JS比较，JS 消息框，JS函数，事件等等)、JavaScript对象（JS字符串，JS日期，JS数组，JS逻辑，JS算数，HTML DOM,RegExp）。

在学习JS时，由于我们公司有很多都在做JS开发，经验比较丰富，所以我遇到问题，就向他们请教，网上的学习资料也很丰富，所以，在学习JS这一块进展地很顺利。

二、WebGL

（一）WebGL简介及国内外情况

WebGL是一套JavaScript API,它允许开发者在浏览器中直接嵌入支持硬件加速的互动3D图形。作为一项开放的WEB标准，WebGL是由KHRONOSGROP开发的，Google,Apple,Mozilla,Opera等公司和组织都是其中的成员，即这一标准的制定者和积极倡导者。

WebGL是作为HTML5中的<canvas>标签的一个特殊的上下文（exprimental-webgl）实现在浏览器中，因此WebGL也可以与所有的DOM接口完全整合到一起。WebGL API是基于OpenGL ES 2.0的，是OpenGL ES 2.0的子集，所以WebGL可以运行于许多不同的硬件设备之上，例如桌面电脑、智能电脑、智能手机、平板电脑和智能电视。

WebGL作为一个新起的技术，在国内还不是很成熟。但它的优势却让很多企业看到它的效益，所以，不管是腾讯、百度这些大公司还是其他的小公司都在着手WebGL的研究、应用。

（二）WebGL可以用来做什么？

WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视、游戏、数据可视化、艺术、3D设计环境、3D空间建模、3D物体建模、绘制数学函数和创建物理模拟。

（三）WebGL的工作原理是什么？

因为是直接工作在显卡端的，所以WebGL比目前的典型的Web技术都有更加复杂。总的来说，它是相当的低等级的。这也正是它为什么能够如此迅速的完成大量的计算，并实现复杂的实时3D渲染的原因。你不需要完全了解WebGL内在的工作原理，因为有很多第三方WebGL图形库，可以帮你完成一些复杂的操作。

在WebGL中编程，通常的目标都是想要渲染某种场景。这其中包括多重并发的绘制工作，城之为绘制调用（draw call），这些调用都是在GPU端通过一个叫做渲染管线（Rendering Pipeline）的处理流程来实现的。

在WebGL中，和其他大多数实时3D图形系统一样，三角形是用于绘制模型的最基本的元素。因此，在WebGL中需要通过使用JavaScript来生成绘制信息，这些绘制信息包括指定在什么位置绘制三角形、如何绘制三角形、这些三角形的外观长的什么样子（颜色、形状、纹理等等）。然后将这些信息传递给到GPU端，GPU进行处理，最后在返回绘制结果。

（四）渲染管线

渲染管线的处理流程开始于建立顶点数组（Vertex Array）。这些数组包括了顶点属性（例如顶点在3D空间中的位置）和顶点纹理信息、颜色信息和如何接受光照（顶点法线）。这些顶点数组和其中包含的数据都是在JavaScript中建立的，建立的方法有以下几种：

自己编写JavaScript代码建立

加载并解析一个描述3D模型的文件（例如.obj文件）

使用第三方图形库内置封装好的几何体形状

然后顶点数组里的数据会被填充到一个或多个顶点缓冲（Vertex Buffer）中，并传递到GPU端。在向GPU提交渲染工作的时候，还需要提供一个额外的数组用于描述顶点数组中元素的索引。

好了，GPU开始从顶点缓冲中读取顶点信息，并在顶点着色器（Vertex Shader）中处理这些信息。顶点着色器是一个程序，用于读取顶点属性，并输出一个新的属性集合。顶点着色器最基本的功能是计算顶点在屏幕空间中的位置。但它也会为每个顶点生成其他属性，比如颜色或纹理坐标。你可以编写代码自定义顶点着色器，也可以使用第三方图形库提供的顶点着色器。

然后,GPU会连接这些顶点来形成三角形。这里就用到了顶点索引数组，GPU会根据顶点索引的描述，将这些顶点按照指定顺序每3个分成一组，形成一个三角形。

然后光栅化（Rasterizer）会作用于每个三角形，切出这些三角形并忽略形状之外的其他部分，然后将当前剩余的可见部分打碎，填充到像素大小的片元(也就是像素)产生一个平滑的渐变值。举例来说，如果顶点着色器为每个顶点分配了一个颜色值，那么光栅器将会混合这些颜色，并在像素化的表面生成一个新的合适的渐变色。

这些生成的像素大小和片元之后会被传递到片元着色器（Fragment Shader）中。片元着色器将会输出每个像素的颜色和深度值，用于在帧缓冲（Frame Buffer）中进行绘制。通常情况下，片元着色器的操作包括纹理映射和光照。因为片元着色器会为每个像素进行独立绘制，这就可以实现很多相当复杂的特殊效果；但也正是因为这样，片元着色器也成为图形管线中性能最为相关的部分。和顶点着色器一样，你可以编写代码自定义片元着色器，也可以使用第三方图形库提供的片元着色器。

最后，帧缓冲（  Frame Buffer） 是渲染输出的最中目的地。帧缓冲是一个2D图像，但又不仅仅是一个2D图像这么简单。除了一个或多个颜色缓冲区之外，帧缓冲还包含深度缓冲区（Depth Buffer）和/或模板缓冲区（Stencil Buffer），这两个都是在最终绘制到帧缓冲之前可选的过滤片元的方式，深度检测会忽略被前面已经绘制的物体挡住的后面的物体，模板检测会使用模板缓冲区中绘制的形状约束帧缓冲中的可绘制区域，将渲染工作“模板化”。经过这两层过滤之后依然幸存的片元，它们的颜色值会与在它们覆盖之下的颜色值进行a混合。最终的颜色值、深度值、模板值会写入相应的缓冲区。帧缓冲的输出结果也可以用作纹理输入到其他渲染中去（即渲染到纹理）。

（五）WebGL面对的困难：

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

   另外，OpenGL ES 2.0对JavaScript的依赖达到了100%，其利用JavaScript来处理应用程序的场景绘图，例如：1）计算场景中子父物体间的矩阵运算。2）CullingCalculating（计算不需要绘制的内容）。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上的游戏通常都是用全屏模式来显示。每款游戏总是尽力去提供一种增强用户沉浸感的体验，而移除地址栏、滚动条和操作系统菜单等等的可能会使玩家分心的元素。

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

2、输入：鼠标捕获

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

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

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

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

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

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

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

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

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

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

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

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

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

5、WebGL：顶点纹理查找

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

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

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

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

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

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

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

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运行效果的更好。

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

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

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

（八）WebGL框架

目前，SceneJS,GLGE,C3DL,OAK3D,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常用的几个框架。

（1）PhiloGL

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

特点：

1、基于JavaScript

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

2、集中在性能

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

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

4、资源开放

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

（二）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,GoogleChrome,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 事件处理来回调方法

（三）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还是很有前途的。

l  特点

1、JSON 场景定义

SceneJS.createNode

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

2、JSON 场景的更新和查询

SceneJS.withNode

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

3、快速渲染与细节

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

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

l  API

SceneJS的API如下图所示：

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

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

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

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

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

三、ThreeJS

刚开始，我用的Google的O3D框架，但后来试了一下Three.JS，发现Three.JS不仅简单，容易入门，而且开源，论坛也很活跃，遇见问题，在论坛上发个帖子，一般第二天就有回复了，所以我就放弃了O3D，转用Three.js，下面详细的介绍一下Three.JS。

（一）Three.JS目录结构

Three.js的代码托管在github上面，http://github.com/mrdoob/three.js/，我们可以用git来获取代码，闲麻烦的话也可以直接下载zip文件。下载的Three.js的主要分为build,examples,gui,utils这五个目录。

1、build目录下市源代码连接压缩过后的js文件，而连接和压缩源代码的工具放在utils目录下，在utils目录下还有一个exporters目录，是各种模型导出工具，插件有blender和max的导出插件，还有把fbx转成THREE.JS场景文件的python脚本。

2、examples目录下都是three.js的实例。里面有很多使用的shader脚本和js脚本可以拿来在自己项目里用，比如js/ShaderTxtra.js提供了现成的shader代码，js/postprocessing下提供了封装起来的几种常用的后处理的接口。

3、         gui下面是一些封装后的ui接口

4、src当然是重头戏了，three.js的源代码都在这个目录下，src下的各个子目录也很好的体现了three.js的构成，像camera，light,object这些都是一个场景（scene）的基础对象，而scenes下面则是对于整个场景的管理代码，像scene graph的实现，renderers下核心渲染器的实现，three.js对于场景和渲染器分离的还不错，可以用不同的renderer渲染同一个场景，当然对于一些WebGL支持的高级特性，使用其他的renderer肯定是不行的。还有一个extras目录是在核心代码之上的一些为程序提供便利的接口，比如提供了一些常用的camera,material,light。

5、utils目录前面提过，提供各种模型导出工具。

(二) 创建一个简单的3D应用程序

不管用什么写3D，C++的ogre，flash的pv3d，js的O3D，又或者使用场景编辑器，一个3D场景所需要的最基本的东西都是一样的，一个主要的camera，一个主要的scene。

当然一般的场景里都会有物体，有灯光，每个物体都会有材质。我们再three.js中可以手动创建，也可以直接加载一个记录场景的数据的json文件。

创建一个scene: scene=new THREE.Scnen();

创建一个摄像机：camera=newTHREE.PerspectiveCamera(25,width/height,50,1000);

创建一个渲染器：var renderer=new THREE.WebGLRenderer()

Camera里面的四个参数分别表示:视角广度，宽/高，最近视角，最远视角。Three.js里面可以通过camera.lookAt函数来设置摄像机的朝向，用camera.position来设置摄像机的位置。

现在我们有一个场景，一个摄像机，一个渲染器，但是我们需要一个实体。实际上Three.js可以加载很多格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D,3DMax等等。我们也可以自己创建一些比较基础简单的物体，如Spheres(球体)，Planes(平面)，Cubes(立方体)，Cylinders(圆柱体)。Three.js里面创建这些物体非常的容易，如我们现在可以创建一个Spheres。

//定义球体

Var radius=40,segments=12,rings=34;

//创建一个新的网格球体

Var sphere=new THREE.Mesh(

    NewSphere(radius,segments,rings),

   sphereMaterial);

//把球体添加到场景

Scene.addChild(sphere);

现在，我们就创建了一个球体了，只是这个球体还没有材质。在代码中我们使用了一个变量sphereMaterial，但是我们还没有对它进行定义。首先我们需要做的是对球体的材质进行描述。

Materials(材质)毫无疑问，在Three.js中是很重要的一部分，因为Three.js可以让你很方便的实现你的网格效果。

1、             不发光

2、             发光

3、             多面

还有其他的很多，但是你必须写在WebGL的着色器上，着色器是一个很庞大的东西，但是你可以使用GLSL(OpenGL的着色器语言)。这就需要你用数学来实现模拟的灯光，这样会很复杂。但是多亏了Three.js，你可以使用MeshShaderMaterial来实现，所以这是一个很活泛的设置。

Var sphereMaterial=new THREE.MeshLambertMaterial(

{

   Color:0xc0000

});

你也可以创建其他的材质，除了颜色，比如光滑或则环境的地图。

现在你就可以运行看见一个3D的球体了，你也可以在添个灯光。Three.js默认的是全环境的光。

Var pointLight=new THREE.PointLight(0Xfffff);

pointLight.position.set(199,100,200);

//添加到场景

Scene.addLight(poingLight);

现在我们大概算是有一些渲染了，但是我们需要这样做：

//绘画

Renderer.render(scene,camera);

我们渲染但不一定只是一次，所以如果你想循环渲染，那么你就需要好好利用requestAnimationFrame这个JS类，这是在浏览器中处理动画迄今为止最先进的JS代码，但是目前还不完全支持。

现在一个我们就创建了一个简单的3D球体了。

（三） 研究Tree.js时遇到的问题

1、             three.JS文档不全，学习起来相对困难。

2、             缺乏3D知识，所以，学习的效率不高

3、             要想更加灵活地控制使用Three.js就得掌握必要的3D方面的数学，而自己对这方面的数学也还不理解。

四、工作中的问题

在研发WebGL时，我也遇到了些问题和困难。首先是自己缺乏JS编程经验。在研发WebGL的效率相对那些一直在用JS编程的效率要低点。不过，在我遇到问题的时候，我虚心请教，他们也都很乐意地给我意见。

然后是英语能力不够。虽然自己一直也很喜欢英语，学校里的英语也不错，可现在天天对着国外的英文网站，全英文的阅读，学习，工作，有时还要翻译时，还是感觉到自己的英语能力还得需要提高。

最后是WebGL资料的缺乏。WebGL是一项先进的技术，虽然Google,Opera他们很早就开始研究了，可在国内，知道的人还是寥寥可数，更别说学习资料了。

  五、感谢

真的很感谢公司给我这个机会，让我成为公司的一员，让我在这样好的工作环境中不断地提高自己。感谢领导在工作方面给予的支持和帮助，在生活方面无微不至的关怀。我一定会更加努力地工作，给公司带来更高的效益，相信通过我们大家的努力，一定会给公司带来更高的效益。

六、新年希望

2011年即将过去，新的一年又要开始了，新的一年意味着新的起点、新的机遇、新的挑战，在新的一年里，我会更加努力地学习，不断地提高自己的能力，认真地专研3D，研究3D原理，扩展自己3D数学方面的知识，明白WebGL底层机制，希望自己在新的一年能自己编写一款WebGL引擎，希望在自己在WEB 3D这一块能有一片自己的天地。

最后，衷心祝愿公司在3D方面能取得越来越多的成果，祝愿公司蒸蒸日上，欣欣向荣！