基於Babylonjs自制WebGL3D模型編輯器

1、總述
　　當代WebGL編程所使用的3D模型大可能是從3DsMax模型或Blender模型轉化而來，這種工做模式比較適合3D設計師和3D程序員分工配合的場景。但對於單兵做戰的WebGL愛好者來說這種模式過於沉重：且不說轉化插件自己存在的各類bug嚴重下降了轉化的成功率，光是爲了生成一個簡單的模型就須要系統的學習3DsMax或Blender的使用方法就讓人感受得不償失。
　　基於以上考慮，我計劃編寫一個基於Babylonjs的簡單WebGL模型編輯器，供本身和其餘有一樣需求的WebGL愛好者使用。編輯器命名爲Newland，意爲經過本身的努力創建一個更好的世界，現已完成了第一階段的網格調整和紋理設置功能。測試程序基於MIT協議發佈在github上，能夠經過http://ljzc002.github.io/Newland/HTML/index_newland.html訪問。
　　由於代碼過多，這裏主要介紹使用方法和設計思路，完整代碼能夠在https://github.com/ljzc002/ljzc002.github.io/tree/master/Newland上查看。具體使用或修改代碼須要必定的3D編程基礎，能夠參看我錄製的3D編程入門視頻教程：http://www.bilibili.com/video/av8248516/、http://www.bilibili.com/video/av8834942/、http://www.bilibili.com/video/av9234256/、http://www.bilibili.com/video/av9546734/，也能夠本身尋找渠道瞭解。

2、界面和基本操做

　　程序基於新版的Chrome瀏覽器編寫和調試，須要設備上具備獨立或集成顯卡，而且須要用戶具備經過瀏覽器調用顯卡的權限。目前測試能夠在windows7和Centos7操做系統上運行。

　　程序主界面以下圖所示：

　　主界面自己是一個簡單的Babylonjs場景，由天空盒與地面網格組成，應用半球形光照（？）。在場景中可使用「wasd、空格、ctrl」控制視點位置，使用鼠標拖動控制視角；界面上部是十二個快捷菜單，能夠經過鼠標單擊打開或使用「1」到「=」鍵打開，打開菜單後可使用「tab」鍵上下移動菜單項，「Enter」鍵選定菜單項或打開下一級菜單，「ESC」鍵取消選擇，「/」鍵隱藏菜單按鈕。

　　「調整」菜單欄下的「按住鼠標」選項可使鼠標一直保持按下的狀態（相似FPS遊戲的鼠標控制），但由於運行在瀏覽器中的JavaScript無權限直接控制鼠標復位到屏幕中心，因此這種控制模式有必定的範圍限制。
　　「視角切換」選項能夠在「當前載具」的第一人稱和第三人稱視角之間切換，將來計劃設置多種不一樣載具，不一樣載具具備不一樣的默認速度和默認功能，使用者能夠在不一樣載具之間自由切換。
　　「調整速度」選項能夠調整視點移動速度、編輯器中網格的調整幅度、鼠標靈敏度等控制參數。
　　「自由瀏覽」選項可使視點脫離載具的限制自由移動，這時的移動按鍵由wasd鍵改成上下左右鍵

3、網格調整
　　選擇「添加-》新增網格-》正方體」能夠在場景中添加一個默認的正方體網格以下圖所示：

　　在這裏可選物體是能夠自由配置的，使用者也能夠把本身設計的網格添加進來，配置代碼位於mymesh.js文件的309行左右：

1 //能夠加載的網格的列表
2 var arr_choosemesh=
3     [
4         ["code","BABYLON.MeshBuilder.CreateBox('","',{size:1},scene)"]
5         ,["code","BABYLON.MeshBuilder.CreateSphere('","',{segments:10,diameter:1},scene);"]
6         ,["babylon","", "../MODEL/allbase/", "2017512_8_13_30testscene.babylon"]
7         ,["babylon","Cube", "../MODEL/octocat/", "octocat.babylon"]
8         ,["babylon","Cube", "../MODEL/test3/", "test3.babylon"]
9     ];

　　「code」表示經過執行後面的代碼生成網格，「Babylon」表示按後面的參數加載現有的babylon格式模型。

　　網格上的座標軸指示網格的局部座標系座標，也表示這個網格正處於選中狀態中。對於選中的網格，點擊調整菜單欄下的「調整位置」、「調整姿態」、「調整縮放」能夠調整當前選中的網格的位置、姿態、縮放屬性，調整時能夠直接在對應的屬性處輸入值，也可使用腳本即時生成值，也可使用「上下左右、PgUp、PgDn」鍵進行屬性調整，以下圖所示：

　　由於可能須要輸入JavaScript腳本，在作以上調整時移動控制按鍵會失效。

　　調整完畢後按Enter鍵座標軸消失網格屬性固定，在這一步時也會對網格的紋理座標進行從新分配，爲下面的紋理配置作準備。經過相似的方式固定多個網格能夠生成較爲複雜的網格對象，好比下面的人形網格：

　　點擊「文件-》導出」能夠將這個網格對象以文本文件形式導出（默認的導出文件後綴名是txt須要手工修改爲babylon）

 

4、紋理設置
　　點擊「選擇-》選擇三角形」光標會變爲「crosshair」，這時點擊網格中的三角形，被選中的三角形會突出顯示：

　　在右側的對話框中填寫RGB份量能夠設置選中三角形的顏色，點擊「選擇顏色」會在正方形的canvas裏繪製出這個三角形圖元對應的圖素，同時被選中的三角形會以canvas中的對應圖素做爲紋理（透明度A暫時很差使）：

　　再次點擊選擇-》選擇三角形能夠對其餘的三角形進行設置，能夠點擊「從圖片中選取」使用本地圖片做爲這個三角形的圖素提供者：

　　圖片左下角黃線圍成的區域是一個透明的div，對應紋理圖片中的三角形色塊（沒有找到製做透明三角形div的方法，只能用弧線代替斜邊）。可使用鼠標拖拽div來設置選擇圖素的區域，調整「u長度、v長度」能夠設置div的寬高，下面的四個按鈕能夠水平旋轉圖片：

　　點擊肯定，選擇的圖素會被應用到網格上：

　　從圖片提取紋理時有兩個思路：一是使用canvas的像素提取功能將素材圖片中被選取的像素提取出來灌入紋理圖片中；二是記錄素材圖片的偏移量和縮放量，使用canvas變形和剪切把素材圖顯示在紋理圖片裏。考慮到大部分狀況下素材圖和紋理圖的像素點不能一一對應，採用第二種思路。
　　點擊文件-》導出圖片能夠將紋理圖片以PNG格式導出，再點擊文件-》導出能夠導出以這張圖片做爲紋理的模型文件。
　　load_mesh.html是一個簡單的babylon模型查看器，在本地部署後加載模型便可查看效果：

　　由於紋理圖片其餘區域都是白色，因此模型的其餘區域也都是白色。

5、總結

　　在將來的世界，不懂編程等於文盲。

　　固然，只要遵照別人設置好的規則，文盲也可能生活的很好。但若是一我的想要對所生活世界的運行方式有所瞭解，甚至加以影響，他就不可能安於作一個文盲。

　　在各類編程形式中，3D編程具備最爲直觀的表現力和影響力，而JavaScript則是一門簡單易用又受衆普遍的編程語言，做爲兩者結合的WebGL編程技術正是業餘編程愛好者涉獵編程技術的最佳途徑之一。

　　而對於專業的3D編程人員來說，當代3D編程技術正處在向GPU加速運算和多終端3D呈現轉變的三叉路口，WebGL技術做爲多終端3D呈現方向的核心技術之一，也值得專業程序員深刻研究。

　　限於時間，Newland編輯器的介紹就到這裏，之後有新的進展會繼續更新。但願你們能在評論區裏和我交流意見和建議，您的正面評論將是對個人巨大鼓勵。

　　謝謝。