前情提要

前陣子寫了一篇打造最美html5 3d機房，介紹瞭如何用html5在網頁上建立無外掛的精美3d機房場景。這兩個月以來，陸續收到很多朋友的鼓（膝）勵（蓋），受寵若驚之餘，對索要原始碼的朋友都已經盡力郵件回覆。由於精力所限，未能收到的朋友請留言或給我傳送郵件：[email protected]。最近專案第二期又要緊鑼密鼓地開始了，所以想抓緊把一些新增的內容補充上，進一步完善這個html5 3d機房的呈現效果。

上一篇中主要介紹的是如何從最基礎的webgl封裝到建立3d物體物件，再通過3d物體物件“搭積木”式的組建整個3d機房場景。這一篇主要介紹一些如何在這個場景上進一步豐富更多的功能和呈現效果，以及實現這些功能在技術上的思路。

首先我們來看看第一季已經實現的純天然無新增無PS的HTML5 3D機房效果：

已經拿到過程式碼的朋友應該知道，這一場景是通過一個json檔案進行組裝和載入，可以很方便地進行修改和維護。在此基礎上，這一次我又增加了機櫃標籤、機櫃門、複雜裝置、機房走線、人員軌跡等效果，下面我就把第二季的乾貨一一為大家奉上。

機櫃標籤

機房中最重要的物理資源——機櫃——是機房管理、規劃、監控人員最關注的物件之一。對於規模在幾十個、上百個甚至上千個機櫃的機房，每個機櫃必然會進行資產編號，方便檢索和管理。這個在多數資產管理系統中，都是最基本的。但是在3d場景中，如何顯示這些機櫃編號，才能讓使用者更直觀的看到每個機櫃的位置呢？

傳統的方式是用標籤顯示資產編號，例如可以用“告警冒泡”那樣的方式顯示一個文字氣泡。不過當機櫃產生告警時，兩個氣泡會有所衝突。而且過多的氣泡會產生相互遮擋覆蓋，有點混亂，比如像這樣：

因此我嘗試了一種不同的思路：把文字渲染到一個記憶體圖片，“溶解”到機櫃的上方貼圖中。

想要生成一個記憶體的圖片文字，可以通過下面的函式實現：

    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後，可以這樣直接貼圖使用：

    var labelCanvas=demo.Default.generateAssetImage(label);
    rack.setStyle('top.m.texture.image', labelCanvas);
    rack.setStyle('top.m.specularmap.image', labelCanvas);

通過上面程式碼，把貼圖作為機櫃立方體top面的貼圖和反射對映圖。這樣出來的效果如下：

這樣，既不用增加3d物件，也不影響機櫃的美觀度，關鍵是看得非常清晰，在大場景中也不干擾使用者的視線：

機櫃門

上一篇裡，由於時間緊迫，也考慮到呈現效率，機櫃採用了“雙擊機櫃出現裝置”的方案。一個立方體的機櫃雖然簡單直接，但是沒有機櫃門，總覺得假了一點，客戶也提到了這一點，因此按照機房門的思路，增加一個機櫃門，增加雙擊開門的效果，這個比較簡單：

    var rackDoor = new mono.Cube(width, height, 2);
    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度”，在雙擊的時候觸發。

複雜電信裝置

第一季裡，機櫃內的裝置，主要用樂伺服器來表現，加入了裝置彈出、告警等效果。後期根據現場和使用者的交流，使用者進一步提出要顯示機架上需要安裝更加複雜的電信裝置，包括板卡、板卡的插拔動作、呈現方法等，也就是在機櫃上顯示一個有多個板卡的裝置，雙擊板卡可以彈出。

要做這個，需要把原來的一個立方體的伺服器裝置做一個“挖空”處理，變成一個空的裝置框的樣子。然後再生成一系列的板卡物件，插入這個空框。每個板卡應該由面板+電路板組成，可以用兩個立方體進行拼接，新增適當的貼圖完成。程式碼如下：

    var parts=[{
        //card panel
        type: 'cube',
        width: width,
        height: height,
        depth: 1,
        translate: [x, y, z+1],
        rotate: rotate,
        op: '+',
        style:{
            'm.color': color,
            'm.ambient': color,
            'm.texture.image': 'images/gray.png',
            'front.m.texture.image': pic,
            'back.m.texture.image': pic,
        }
    },{
        //card body
        type: 'cube',
        width: 1,
        height: height*0.95,
        depth: depth,
        translate: [x, y, z-depth/2+1],
        rotate: rotate,
        op: '+',
        style:{
            'm.color': color,
            'm.ambient': color,
            'm.texture.image': 'images/gray.png',
            'left.m.texture.image': 'images/card_body.png',
            'right.m.texture.image': 'images/card_body.png',
            'left.m.texture.flipX': true,
            'm.transparent': true,  
        }
    }];

    var card=demo.Default.createCombo(parts);
    card.setClient('animation', 'pullOut.z');
    box.add(card);

上面程式碼可以生成一個板卡物件。迴圈重複，設定位置，即可生成整個裝置。通過設定animation屬性，定義板卡動畫為“雙擊拉出”，再次雙擊推回。效果如下圖：

當然，實際專案中，各種結構的電信裝置千奇百怪，要通過程式碼定義是不現實的。所以我們還開發了一個裝置編輯器，可以通過拖拽方式快速生成裝置結構圖。

機房線纜和走線架

除了機櫃之外，線纜的連線走向和連線關係是管理員關注的另外一個焦點。機架中的電信裝置或伺服器裝置會通過埠和線纜進行連線，組成一定結構的網路。而線纜的走向在物理上通過肉眼是很難看清晰的。更多線纜會從機櫃連出，延伸到屋頂上方或地板下方的隱蔽工程中（例如走線架）固定和佈線，用肉眼更無法觀察。此時，需要3d機房介面能清晰的顯示電纜從埠到走線架再到埠的“端到端”的物理走線，方便管理員瞭解網路情況和管理。

線纜

線纜，可以用一個空間的path來定義，並設定其貼圖：

    var path = demo.Default.create3DPath(json.data);
    var cable=new mono.PathNode(path, 100, 1);
    cable.s({
        'm.type': 'phong',
        'm.specularStrength': 30,
        'm.color': json.color,
        'm.ambient': json.color,        
        'm.texture.image': 'images/flow.jpg',
        'm.texture.repeat': new mono.Vec2(200, 1),
    });
    box.add(cable);

通過json定義的[x, y, z]陣列來生成一個path物件，然後用它來生成一個空間的“管子”物件。流動效果可以通過一個動畫來修改貼圖紋理的offset，讓眼睛產生貼圖不斷“移動”的效果。

走線架

走線架可以通過簡單的鏤空貼圖來模擬，不需要建一個複雜的框架模型，減少對GPU的壓力。實際的走線架有很多種，例如下圖是一種典型的走線架：

我們通過程式模擬一下：

    var rail=demo.Default.createPathObject(railInfo);
    rail.s({
        'm.texture.image': 'images/rail.png',
        'm.type': 'phong',
        'm.transparent': true,
        'm.color': '#CEECF5',
        'm.ambient': '#CEECF5',
        'aside.m.visible': false,
        'zside.m.visible': false,
        'm.specularStrength': 50,
    });
    rail.setPositionY(263);
    box.add(rail);

最終走線架+線纜的效果如下：

路徑規劃

在3d場景中，經常需要計算規劃並顯示一個最優的空間或平面路徑，用來指示如何最快、最合理的到達目標，或通過路徑顯示一個移動物體的軌跡，方便進行監控和分析。例如，客戶提出一個實際需求：現場檢修人員手持平板進入機房，輸入裝置id後，直接給出前方走動路徑，並進行實時導航引導。

我們可以把這個需求分解為導航路徑顯示和人員模擬兩步。

導航路徑

導航線可以通過一個浮在地板上方的path路徑來定義。做一個簡單的顏色渲染和彎角處理，就可以比較清晰的展示底面的走動路徑。

            var path=new mono.Path();
            path.moveTo(object.getPositionX(), object.getPositionZ());
            for(var i=0;i<points.length; i++){
                path.lineTo(points[i][0], points[i][13]);
            }
            path = mono.PathNode.prototype.adjustPath(path, 20);

            var trail=new mono.PathCube(path, 10, 3);
            trail.s({
                'm.type': 'phong',
                'm.specularStrength': 30,
                'm.color': '#298A08',
                'm.ambient': '#298A08',         
                'm.texture.image': 'images/flow.jpg',
                'm.texture.repeat': new mono.Vec2(150, 1),
            });
            trail.setRotationX(Math.PI);
            //trail.setStartCap('plain');
            //trail.setEndCap('plain');
            trail.setPositionY(5);
            trail.setClient('type', 'trail');
            box.add(trail);

拉近後看下細節：

移動軌跡的顯示也有很多變化，形狀、顏色的變化，空間座標的變化，都可以產生一些不同的效果。例如下圖是另外一個3d車庫導航系統的場景：

載入人物模型

接下來，要載入一個人的模型進來，放在路徑上。可以在網上找一些3d max做的模型，並轉成obj格式的檔案，這樣就可以方便的匯入場景中。Obj通過對應的mtl檔案進行定義材質，需要的貼圖也需要一併涵蓋進來。通過下面幾行程式碼即可完成obj模型的匯入：

        var obj='images/worker.obj';
        var mtl='images/worker.mtl';               

        var loader = new mono.OBJMTLLoader();
        loader.load(obj, mtl, {'worker': 'images/worker.png',}, function (object) {                             
            box.addByDescendant(object);
        });

效果如下圖：

需要留意的是，人的模型不要太大，能把人物輪廓大概渲染清晰即可。例如上面的模型也就幾百k，載入和顯示幾乎瞬間完成，不會產生卡頓。如果載入幾十兆上百兆的高清模型，則可能出現卡頓，也會拖慢場景的渲染速度。畢竟我們的主要場景物件是3d機房，對模型選擇要有所取捨，千萬不要喧賓奪主。

讓任務沿著路徑移動，可以通過動畫進行控制，對path中每一段路線進行平移，連續、反覆的播放，即可實現人物的移動效果。

當然這裡有一個缺點，人物的移動是僵硬不動的，不能像真實人物一樣邁腿一步一步的走路進行移動。如果要做，需要用到骨骼動畫等技術，相對複雜一些，目前專案緊急，就留給以後找時間研究了。當然對於3d機房這樣的企業應用來說，必要性不一定很大，畢竟不是遊戲。

通過這些技術，大家可以輕鬆構建一個比較完整的3d機房系統，就跟我們這次的專案一樣：

後記

篇幅有限，這一篇就介紹這麼多，希望對大家有所啟發和幫助，後續找時間會繼續給大家介紹如何拖拽移動機櫃、顯示機房中的溫度雲圖、風向監控、攝像頭及視訊監控，如何建立一個大的園區和樓宇等內容。大家有什麼好的想法和意見，或需要相關程式碼的同學可以發郵件到[email protected]，或留下郵箱，我會盡力回覆。謝謝！