Web3D综述及Ajax-Zoom 实施的几个坑

一、Web3D相关技术

 Web3D以浏览器作为展示终端，内容部署在服务端。能够给用户以虚拟现实的交互体验，从不同角度观察对象（物体或场景）。目前常见的实现方式有以下：

 

1.1 三维建模与实时渲染

 这种方式先用三维建模工具构建三维模型和场景，然后将其转为适合前端浏览器浏览的格式。在浏览器端，利用内置的webGL或通过专用插件（例如Unity）加载三维模型，响应用户的交互指令（切换视角、观察点），实时渲染出画面。

三维实时渲染的例子可参见华多秀的虚拟展厅：

http://www.hodoso.com/

 

建模工具	3dMax、 Maya
浏览工具	Unity3D插件、WebGL
优点	效果连续、可自由漫游场景或以任意视角观察物体
缺点	对用户端显卡性能要求较高 要获得精致的细节、建模成本较高

 

 

1.2 360实景

 通常是在现实场景中，在特定的离散观察点，用相机+云台拍摄多张影像并合成全景图，合并方法可以是圆柱投影或立方体投影。谷歌街景就采用了这种交互方式。

 考虑到Web浏览的带宽限制，针对不同分辨率进行金字塔切片。

前端组件根据用户交互输入、加载相应的切片。

上述的虚拟场景也可以利用虚拟摄像机输出全景图。

360实景的例子，可参阅杭州工艺美术馆的在线展厅

http://www.zgdjss.com/unity/vr360/hzmg/tour.html

 

建模工具	云台、相机、全景图片制作软件
浏览工具	Krpano 跨终端的浏览插件
优点	建模成本较低、与真实场景完全一致
缺点	观察点离散

 

 

1.3 360旋转

 Ajax-Zoom所谓的360Ratation 在技术实现上有点类似于360实景，所不同的是360实景是观察角度在转动，而360旋转则是：观察点和角度不动，让被观察对象旋转。

如果说360实景是用来表现观察点身处场景内的景象，360旋转则是观察点位于观察对象之外，让对象自身转动，呈现不同角度的外观。

两种技术都可以应用于博物馆展览，360实景适合展厅漫游，而360旋转则适合表现单件藏品。

通过转台+近距离高清拍摄，360旋转可以实现比现场更清晰的web展示，还有一点是现实展览做不到的——看背面。

 

 

二、Ajax-Zoom的坑

Ajax-Zoom有几个优点：

1. 兼容PC和移动终端各种主流浏览器

2. 比较完整的解决方案，包括了热区（点）编辑器（Hotspot ediotr, example33.php）、局部视图及切片（Crops）编辑器、批量预处理（Zoombatch.php）

3. 性价比不错：500张图以下，每张图不超过3.2M像素，免费！ 普通的应用买199欧的license足够了。

 

下面说说我实施过程遇到的几个坑：

. 官方例子中没有采用透明背景的png，但要弄出比较炫的效果，这个是必不可少的，比如下面这个效果：

需要多个层叠加：

最上层的AZ控件透明背景+ 不透明文字和红框+半透明文字框背景色+ 虚化overlay + 底层被虚化的全屏AZ控件。

 

如果要弄这个，目前的版本会遇到几个坑。

  a. 从底层AZ控件热点弹出的overlay，不能覆盖底层的Image Map和Navi bar。两个Image Map和Navi bar同时挂在天上，官网的例子没有出现这样的问题，是由于弹出窗口的底色覆盖了底层AZ的Image Map和Navi bar。窗口底色透明，问题就出来了。

  咨询售后之后，确定为z-index问题，增加以下css解决：

  .axZmHotspotOverlay{z-index:506  !important;}

 

 b. 加载热点定义js文件，例子中采用jQuery.fn.axZm.loadHotspotsFromJsFile，该函数没有开放对加载进来的热点的修改回调方法，而项目实施中，根据业务规则批量处理热点应该是很常见的需求。

我用Jquery的js加载+更底层的jQuery.fn.axZm.createNewHotspot 函数，自行加载和创建热区，创建之前可以根据业务需要，批量修改或微调热区定义。

 

c. 官方文档说：用于切片处理的图形库 GD2+或IM可以二选一，而实际上，目前的AZ版本+GD2无法正常处理透明png图的切片。售后说将在下一版本解决此bug。

我们用IM代替GD2获得解决。

 

 

三、参考

更细节的搭建环境，可参考我同事的博客文章

http://clover-whd.iteye.com/

 

效果图是“方禾尖牙” 的作品。