HTML5+WebGL 3D机房开发实例

HTML5+WebGL 3D机房开发实例

前阵子写了一篇HMTL5 3D机房开发的例子，介绍了如何用html5在网页上创建无插件的精美3d机房场景，收到很多朋友的鼓励，深表感谢。对于索要源代码的朋友，已经尽力邮件回复。由于精力所限，如未能收到的朋友请留言或给我发送邮件：

tw-service@。最近项目第二期又要紧锣密鼓地开始了，所以想抓紧把一些新增的内容补充上，进一步完善这个html5 3d机房的呈现效果。

上一篇中主要介绍的是如何从最基础的webgl封装到创建3d物体对象，再通过3d物体对象“搭积木”式的组建整个3d机房场景。这一篇主要介绍一些如何在这个场景上进一步丰富更多的功能和呈现效果，以及实现这些功能在技术上的思路。

首先我们来看看上一期已经实现的纯天然无添加无PS的HTML5 3D机房效果：

已经拿到过代码的朋友应该知道，这一场景可通过一个json文件进行组装和加载，可以很方便地进行修改和维护。在此基础上，这一次我又增加了”机柜标签、机柜门、复杂设备、机房走线、人员轨迹“等效果，下面我就把第二季的干货一一为大家奉上。

机柜标签

机房中最重要的物理资源——机柜——是机房管理、规划、监控人员最关注的对象之一。对于规模在几十个、上百个甚至上千个机柜的机房，每个机柜必然会进行资产编号，方便检索和管理。这个在多数资产管理系统中，都是最基本的。但是在3d场景中，如何显示这些机柜编号，才能让用户更直观的看到每个机柜的位置呢？

传统的方式是用标签显示资产编号，例如可以用“告警冒泡”那样的方式显示一个文字气泡。不过当机柜产生告警时，两个气泡会有所冲突。而且过多的气泡会产生相互遮挡覆盖，有点混乱，比如像这样：

因此我尝试了一种不同的思路：把文字渲染到一个内存图片，“溶解”到机柜的上方贴图中。

想要生成一个内存的图片文字，可以通过下面的函数实现：

Js代码

.generateAssetImage: function(text){

.var width=512, height=256;

.

.var canvas = document.createElement('canvas');

.canvas.width = width;

.canvas.height = height;

.

.var ctx = canvas.getContext('2d');

.ctx.fillStyle='white';

.ctx.fillRect(0,0,width,height);

.ctx.font = 150+'px "Microsoft Yahei" bold';

.ctx.fillStyle = 'black';

.ctx.textAlign = 'center';

.ctx.textBaseline = 'middle';

.ctx.fillText(text, width/2,height/2);

.ctx.strokeStyle='black';

.ctx.lineWidth=15;

.ctx.strokeText(text, width/2,height/2);

.

.return canvas;

.}

需要留意的是：

1. 生成的图片宽高数值最好是2的幂，例如128、256、512等，这样在3d中渲染不容易出现闪烁和锯齿。相关原理请查阅google。

2. 文字绘制尽量居中、充满整个图，不要太小，否则看上去比较奇怪。

3. 空白处保持透明，不必填充色，方便和机柜本身贴图的“溶解”。

4. 直接返回canvas对象即可，不必生成图片点阵数组。

生成canvas后，可以这样直接贴图使用：

Js代码

.var labelCanvas=demo.Default.generateAssetImage(label);

.rack.setStyle('top.m.texture.image', labelCanvas);

.rack.setStyle('top.m.specularmap.image', labelCanvas);

通过上面代码，把贴图作为机柜立方体top面的贴图和反射映射图。这样出来的效果如下：

这样，既不用增加3d对象，也不影响机柜的美观度，关键是看得非常清晰，在大场景中也不干扰用户的视线：

机柜门

上一篇里，由于时间紧迫，也考虑到呈现效率，机柜采用了“双击机柜出现设备”的方案。一个立方体的机柜虽然简单直接，但是没有机柜门，总觉得假了一点，客户也提到了这一点，因此按照机房门的思路，增加一个机柜门，增加双击开门的效果，这个比较简单：

Js代码

.

.rackDoor.s({

.'m.type':'phong',

.'m.color': '#A5F1B5',

.'m.ambient': '#A4F4EC',

.'front.m.texture.image': 'images/rack_front_door.png',

.'back.m.texture.image': 'images/rack_door_back.png',

.'m.envmap.image': demo.Default.getEnvmap('envmap1'),

.});

.rackDoor.setParent(rack);

.rackDoor.setPosition(0, 0, depth/2+1);

.rackDoor.setClient('animation','rotate.right.120');

上面代码创建了一个薄薄的立方体作为机柜门。设置贴图、颜色等，再设置其parent是机柜。这样，如果拖拽机柜位置，机柜也会跟着移动，简单方便。最后，在设置一下机柜门的动画。通过一个字符串进行定义：rotate.right.120表示动画是“向右侧旋转120度”，在双击的时候触发。