浅谈3D浏览器开发教程

w w w .13y 32r .c o m 第五章 统领未来的 3D 超级浏览器 一段轻松搞笑的寓言故事： 在本章的一开始，请大家一起来跟我一起简单回顾一下计算机网 络发展的历史。为了便于初学者理解，我下面用白话来为大家阐述这 段历史，而不是根据枯燥乏味的历史文献。 首先在早期的计算机出现的时候，计算机的处理能力并不是很 强，所以在处理庞大的数据时候，常常需要把工作分配给很多计算机 来工作。这时候的人们总在各个计算机之间跑来跑去的，显得效率非 常的不高。因为人们常常把大多数的时间花在了传送文件和等待接收 人接受文件上面。事情没做多少，人反而被累得半死。 这时候突然有一个聪明的人，在一天早上洗脸的时候看到了从水 龙头里滚滚而出的自来水，给了他很大的灵感。于是他就在想，既然 水都能从庞大的水库里面，通过各个水龙头合理的分发给每个用户， 那计算机的资料为什么不能呢？正当他想得入神的时候，他家里的电 话铃声响了。叮叮叮！刺耳的铃声把他从沉思中唤醒，而且告诉了他 解决这个问的正确方法。于是当他回到单位的时候，就把他的想法 告诉了大家：“能不能把计算机像电话那样的串联起来，然后通过数 据线传输的电子信号来帮大家传送文件，这样子大家就不必再为了传 递文件和等待接受文件，弄得疲惫不堪了。”就这样早起的计算机网 络形成了。 过了许久之后，镜头又拉到了一个幽暗的打印房。一个古稀之年 w w w .13y 32r .c o m 的老头正坐在一台台打印机的前面，他的工作就是每天接受从各个计 算机发送过来的文稿，然后将这些文稿打印成纸质文件。工作显得重 复而乏味，在老板与同事之间，他似乎也是一个可有可无的人，所以 报酬也相对的比较低。他就这样平淡无奇的生活着，日复一日，年复 一年。但随着物价一天天的上涨，被忽视的他拿着一直不见上涨的工 资，已不再像以前那样的可以安稳太平了。于是有一天这个老头终于 爆发了，他怒不可遏的冲进了总经理的办公室，要求经理给他加工资。 被吓得惊魂失色的总经理一下子就愣住了！等他回过神的时候，立马 给保安打了电话，并把这个老头踢出了公司。但等他平静之后，问了 问旁边的秘书：“这个人是我们公司的人么？怎么从来没有看见过他 呢？”秘书低声的回答说：“是的，而且工作好多年了，就在打印房 里，他的工资是最低的，但工作不可以说不重要，因为全公司的文件 都要等他接收和打印。”知道犯了错的经理，脸色从刚才的红色一下 子变为了绿色，因为他心里知道，这么枯燥乏味的事情，而且工资又 低谁又愿意去做呢？但决定已做出，做为领导就不能反悔，没办法自 己只有硬着头皮想办法了。接下来，他一连好几天都在打印房和总经 理办公室来回的走动。于是皇天不负有心人，冲动而又聪明的经理喊 来了公司里最优秀的电路师，要求他在打印机那里安装一个信号 判断装置，根据计算机发送给打印机的电子信号强度，让打印机自动 的打印接受过来的打印文件。这就是最早的 C/S（客户机/服务器结 构），至于以后的 C/S 技术可以说是飞速发展，服务器已经不仅仅像 当初那样只能做些打印之类的工作。它可以智能的判断每个客户机发 w w w .13y 32r .c o m 送上来的信息种类，并进行实时归档。然后运用自己配备的软件，合 理的处理各个客户机发送上来的请求，并给各个客户机分发它们所想 要得到的资料。而这一切的工作只需要那台名为“服务器”的电脑自 行处理，而非人力的亲力亲为；即帮老板节省了大笔的工资支付、养 老金支付等等所带来的巨额开支，又大大的提升了工作效率，使得这 项技术被广泛的公司推广和运用。 计算机网络技术可以说是日新月异。再过了不久，为了能让计算 机用户更方便的向服务器发送和接收数据，一个叫“Tim Berners-Le e”的家伙（注：后来这家伙成了大名鼎鼎的万维网之父）发明了一 个名为“WorldWideWeb”（后更名为 Nexus）的信息浏览软件，用来 高效的阅读服务器上所提供的信息服务。这款软件不但能让用户便捷 的向服务器快速提交请求，又能快速的接受服务器回传的数据，并把 这些数据解析成可视化的信息显示在用户的显示器上，所以后面推出 的类似软件，都被简洁地称作“浏览器”。再后来浏览器经过一代又 一代的进化，就演变成了现在可以从服务器读取并解析出图片、文字、 声音等等信息的必备软件，浏览器的编程技术也日趋成熟和强大，当 初那种单一的 C/S 网络编程思想，也演变成了当今 C/S 与 B/S（浏览 器/服务器结构）两种思想共存的局面。而“Tim Berners-Lee”则为 了避开纷繁复杂的浏览器市场竞争，创办了 W3C(World Wide Web Consortium，万维网联盟)，专心致志的给 Web 相关技术制定， 使得 Web 能向更深、更宽广的方向进行发展。比方说现在各个网站 正在使用的 HTML 语言，以及下一代 3D WEB 即将使用的 HTML5 w w w .13y 32r .c o m 语言，都是由 W3C 组织所制定的。与此同时，专注于计算机图形编 程技术的著名 Khronos Group 行业协会，为 HTML5 提供了强大的基 于底层硬件的 3D 编程技术支持。使得未来的互联网在制作 3D 网站 时，可以毫无顾忌。 5.1 为什么 Html5 以及即将诞生的超级浏览器，必将取代 Fl ash、WireFusion、Unity3D 等等的第三方 3D Web 呈像技术。 5.1.1 第三方 3D Web 呈像技术在网页开发上的弊端 首先，当下许多主流的第三方 3D Web 软件为了顾及当前的利 益，都把跨平台设计作为了首要开发要事，而没有从网络建设的整体 构架上去考虑问题。就拿 Unity3D 来说，它们在网络发展的策略上是 将自己的播放器体积越做越小，以方便用户在浏览网页的时候能快速 下载安装。但这就直接导致了我们上一章讲的那样，插件越小意味着 呈像所需要的数据必须都向服务器索取，如果将这类软件制作出的 3 D 大场景文件放置到 WEB 中，最少都要加载几十分钟。如果做得比 较牛 X 的文件，比方说像魔兽世界那样的超大场景文件，几十个 G 的，那对于中国的一般用户而言，可能花个一天的时间都加载不完。 而且现代的浏览器技术是将网络加载的东西都存放在一个临时文件 夹内。既然是临时性的，随时都可能被清除掉。一旦被清除掉，当您 下次重新访问这个网站的时候，您又必须再次加载这个网站上所需的 3D 呈像数据。也就是说，如果您访问的是魔兽世界那种几十个 G 的 w w w .13y 32r .c o m 大场景文件，又得重新等上一两天的时间。 其次，我们现在浏览的网页之所以会那么顺畅，是因为 Web 浏 览器(客户机)和 Web 服务器(服务器)采用的是 HTTP 协议进行通讯， 这是一个工作在 TCP/IP 协议之上的协议，并且用了就断开，不占用 通讯线路资源，这无形当中就提高了通讯线路的使用效率，看上去网 络速度似乎快了许多。 但如果以这样的状态来迎接 3D 互联网时代的话，大家可以想象 一下，由于每一个用户在显示 3D Web 的时候，都必须从服务器下载 大量 3D 呈像所需要的数据，在没有下载完这些庞大的呈像数据之前， 浏览器与服务器之间的数据链接就不会断开。这不但会导致线路的严 重堵塞，严重时还可能使服务器因为来不及处理越来越多的客户申 请，而导致死机。 5.1.2 HTML5 在客户端存储数据的新方法，良好的解决了 3D Web 时代可能出现的网络堵塞 我们首先来看看在“w3school”上关于Html5 教程部分中的“HT ML 5 Web 存储”的这一个小节，里面赫然的写着“HTML5 提供了 两种在客户端存储数据的新方法：localStorage - 没有时间限制的数 据存储和sessionStorage - 针对一个 session 的数据存储”。这样做一 个最大的好处就是——可以将重复使用的 3D场景文件，只在第一次 使用的时候进行加载，之后便通过本地调用，而非通过网络下载。这 样就极高的提升了网络速度。 w w w .13y 32r .c o m 5.1.3 3D 浏览器能为 3D Web 提供不可或缺的准备 网虫是一类很奇怪的人群，他们花大把的时间侵泡在互联网中。 一个新兴的网络产品能否适应互联网的需求，他们是最有发言权的。 他们不喜欢把时间浪费到加载大量数据的等待上，并且对那种轻巧而 极易上瘾的东西很感兴趣。比方说大名鼎鼎的社区网站 FaceBook， 还有国内的人人网，QQ 农场等等。当您浏览过这些网站大部分的内 容之后，会发现它们的数据其实不可谓不大，但他们却把所有的东西 拆分成了一个个独立小单元，当用户需要时才单独下载。至于比较大 的文件，他们干脆采用客户端的方式来解决，先让用户下载一个比较 大的客户端文件，之后浏览时就直接调用存放在客户端的数据。 这是一个比较好的方式，这些案列直接向大家证明——网民对一 次性安装的超大文件是很乐意接受的，只要这些文件能够为他们以后 的冲浪带来更方便的浏览以及更快乐的享受。基于这种想法，我们的 3D 浏览器应当配合 Html5 和 WebGL 的编程，内置一个庞大的默认 模型库，在 3D 浏览器第一次安装时，就将这些模型全部安装到本机 上。并且网站管理员可以根据网站的需要来丰富这个模型库，3D 浏 览器会自动检索用户使用率高的自制模型，并上传至 3D 浏览器开发 商的服务器，最终成为所有 3D 浏览器的公共默认模型库。 为了优化网站，各个 3D 网站的站长在起初搭建自己的 3D 网站 时，一开始会选择用大量的 3D 浏览器内置模型库搭建网站，使得用 户在浏览自己的网站时，只用给浏览器客户端传输一个简短的调用指 令即可，而不用去下载大量的资源造成网络拥堵。 w w w .13y 32r .c o m 另外，搞过 3D 的人都知道，一个场景中光是那些死板的模型也 很难做出炫目的 3D 画面，所以 3D 浏览器中还得内置一些渲染特效， 这些效果可以结合 WebGL 来进行编程，最具有说服力的就是 U3D 中 的 shader 着色语言的使用。而 WebGL 又是基于 OpenGL ES 2.0（A PI）接口的 JavaScript 绑定，所以 3D 浏览器在做内置库的时候，不 单单要有基于 WebGL 的默认模型库，还得有基于 WebGL 的特效渲 染方法。下图是基于这种想法的超级浏览器工作原理图： 上图是浏览器用户，在浏览一个完全基于内置的渲染方法和内置 模型构建的 3D 网站时，所经历的工作。下面让我来详解一下这 个图： 首先，和现在的普通浏览器一样，用户要向 DNS 服务器发送请求， 解析出网站域名所对应的 IP 地址，解析成功之后链接到服务所对应 w w w .13y 32r .c o m 下的文件。 …… …… …… …… …… …… …… …… …… …… …… …… 5.2.4 关于一些优化 3D 动画免不了一些模型的运动，材质的更换等等。如果能把这 些东西都抽象成模型的调用命令，不但能举一反三，而且还能极高的 提升模型的使用效率，增大网站的访问速度。 比方说我在这里对案例中图形位置偏移做一个变量抽象，大家就 可以在调用模型的时候，方便灵活的设置图形位置了。 第一步：在代码的开头，定义三角形 X、Y、Z 位置偏移的全局变量， w w w .13y 32r .c o m 和定义正方形 X、Y、Z 位置偏移的全局变量，如下图所示： 接着到模型位置偏移函数那里，把所有数字都更换为相应的变量： 然后我们把正方形位置偏移全局变量一下的代码，都以字符串的形式 赋予“localStorage.main”，注意把把原来换行的地方改成换行符“\n”。