摘要：寫在前面的前面現在拍電影搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美機房的續集，哥的目標是成為機房界的網紅。機柜標簽機房中最重要的物理資源機柜是機房管理規劃監控人員最關注的對象之一。

現在拍電影、搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美3D機房的續集，哥的目標是成為3D機房界的網紅。

-------------------------------我是這個系列已經有了第三篇的分割線-------------------------------

請腦補畫外音 Previously on Monolog……

前陣子寫了一篇打造最美html5 3d機房，介紹了如何用html5在網頁上創建無插件的精美3d機房場景，收到很多朋友的鼓勵，深表感謝。對于索要源代碼的朋友，已經盡力郵件回復。由于精力所限，如未能收到的朋友請留言或給我發送郵件：tw-service@servasoft.com。最近項目第二期又要緊鑼密鼓地開始了，所以想抓緊把一些新增的內容補充上，進一步完善這個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;   
    }

需要留意的是：

生成的圖片寬高數值最好是2的冪，例如128、256、512等，這樣在3d中渲染不容易出現閃爍和鋸齒。相關原理請查閱google。

文字繪制盡量居中、充滿整個圖，不要太小，否則看上去比較奇怪。

空白處保持透明，不必填充色，方便和機柜本身貼圖的“溶解”。

直接返回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

拉近后看下細節：

移動軌跡的顯示也有很多變化，形狀、顏色的變化，空間坐標的變化，都可以產生一些不同的效果。例如下圖是另外一個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機房系統，就跟我們這次的項目一樣：



后記
篇幅有限，這一篇就介紹這么多，后續找時間會繼續給大家介紹如何拖拽移動機柜、顯示機房中的溫度云圖、風向監控、攝像頭及視頻監控，如何創建一個大的園區和樓宇等內容。成為一個網紅的路還很漫長，我會一步一個腳印地走，也希望對大家有所啟發和幫助。老規矩，需要相關代碼的同學可以發郵件到tw-service@servasoft.com，或留下郵箱，我會盡力回復。謝謝！