0x00 楔子
最近作的一個項目，是一個油田三維可視化監控的場景編輯和監控的系統，和三維組態有些相似，不過主要用於油田上。 效果以下圖所示： 
前端
首先固然是上模型，設計人員跟進。 有了相關的模型，使用咱們開發的一個編輯器，經過模型拖拽編輯，管路編輯等等，很快就可以編輯出以上的場景： java
一切進展的都很順利。 直到客戶說，咱們有一個WPF開發的桌面端程序，咱們須要把大家的三維嵌入到桌面端。node
0x01 寂靜無聲
一開始咱們是比較懵逼的。畢竟咱們主要作JavaScript前端開發，對於C# 之類的接觸的不多。python
抱着試一試的態度在開發羣裏面問了下，有人懂WPF的開發嗎？程序員
寂靜無聲。。。chrome
由於基本上專業在前端開發，能夠理解。npm
0x02 初步嘗試
既然都沒有人會，那怎麼辦，只能我親自出馬了。雖然我沒有太多接觸過C#相關開發， 可是作過Java，Python，C，Flex，JavaScript等等的開發。憑藉多年開發經驗，因此相信並不會太難。固然第一步，是下載vs studio， 當看到n個G的下載時候，心裏仍是挺崩潰。瀏覽器
在漫長等待以後，終於下載並安裝了 vs studio。ruby
由於咱們的三維管理是基於網頁的WebGL開發出來的，因此我想，尋找的方向是在WPF中找是否有相似瀏覽器的控件。 通過查找找到了，就是WebBrowser 控件，大體使用以下，架構
<WebBrowser x:Name="WebBrowser1" Source ="xxx.com"></WebBrowser>
然而不幸的是，該控件確實能夠顯示網頁，可是不支持WebGL。開始覺得是由於使用了IE內核的緣由，後來切換到chrome的內核，發現仍是不行。
初步嘗試 宣告失敗。。。
0x03 CefSharp現身
迷茫之際只能藉助偉大的搜索引擎了，固然我這裏並非說某度噢。 發現了一個神器CefSharp。CefSharp lets you embed Chromium in .NET apps，CefSharp就至關因而一個chrome瀏覽器。
感受CefSharp應該是能夠支持WebGL功能的，因此決定試一試。
0x04 安裝CefSharp
我決定使用NuGet來安裝CefSharp包。若是你是作C# 開發的，相信應該對NuGet不陌生。若是你不作C#開發。那麼你能夠這麼理解NuGet：
- 若是你瞭解python，那麼它相似pip。
- 若是你瞭解nodejs，那麼它相似npm。
- 若是你瞭解ruby，那麼它相似gem。
- 若是你瞭解java，那麼它相似maven。
在建立的wpf項目的解決方案上面點擊右鍵，能夠發現NuGet管理：
點擊「管理解決方案的NuGet程序包」，在出來的界面的搜索框輸入CefSharp，能夠找到CefSharp相關的包，由於咱們使用WPF，因此選擇CefSharp.Wpf進行下載安裝：
0x05 配置CefSharp
安裝了CefSharp.Wpf以後，在項目中使用using 語句引入Cefsharp，發現報錯，以下圖所示：
由於還須要對項目進行相關的配置。
A. CefSharp version 51 及以上版本
CefSharp version 51以後的版本支持AnyCPU，仍然須要作簡單的配置。
首先，開啓 「首選32位」這個選項，右鍵項目名稱，選擇屬性，在打開的界面勾選：
而後，找到項目的「.csproj」文件，在<PropertyGroup>的末尾加入以下文本：
<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>
你的「.csproj」文件應該是以下這個樣子：
最後修改你的app.config文件,其在解決方案下：
在該文件中加入以下的文本：
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<probing privatePath="x86"/>
</assemblyBinding>
</runtime>
而後，你的app.config文件應該是這樣：
B. CefSharp version 49或者更老的版本 CefSharp version 49及以前的版本，不支持AnyCPU，所以須要指定編譯架構。不然會有如下提示：
CefSharp.Common does not work correctly on AnyCPU platform. You need to specify platform (x86 / x64).
右鍵點擊解決方案，選擇屬性，出現以下界面：
在配置屬性 --》 配置下，把Release和Debug的平臺都指定位特定的平臺，好比x64。
0x06 使用CefSharp
通過以上配置以後，即可以使用CefSharp控件了，首先引入控件：
using CefSharp; using CefSharp.Wpf;
而後，開始初始化ChromiumWebBrowser，以下：
public ChromiumWebBrowser chromeBrowser;
public void InitializeChromium()
{
CefSettings settings = new CefSettings();
// Initialize cef with the provided settings
Cef.Initialize(settings);
// Create a browser component
chromeBrowser = new ChromiumWebBrowser("http://localhost:8080");
// Add it to the form and fill it to the form window.
// this.AddChild(chromeBrowser)
MainGrid.Children.Add(chromeBrowser);
}
建立一個ChromiumWebBrowser對象，在建立的時候，傳入咱們三維應用的地址；以後把該對象加入到Wpf的界面中便可。
啓動項目，能夠獲得以下界面，三維應用妥妥的出來了：
0x07 加入調試功能
代碼若是不能調試，那是很恐怖的事情。 CefSharp控件和chrome瀏覽器同樣，能夠打開控制檯。具體而言是ChromiumWebBrowser對象上面有一個ShowDevTools函數，能夠打開控制檯。所以，咱們加入鍵盤監聽，當按下F12的時候，調用該函數打開控制檯：
private void MainWindows_Keydown(object sender, KeyEventArgs e)
{
//判斷用戶的按鍵是否爲F12
if (e.KeyStates == Keyboard.GetKeyStates(Key.F12))
{
chromeBrowser.ShowDevTools();
}
else if (e.KeyStates == Keyboard.GetKeyStates(Key.F11))
{
chromeBrowser.Reload();
}
}
在界面上按F12鍵的效果以下：
0x08 尾聲
使用CefSharp基本能夠解決客戶的嵌入三維應用到WPF的需求。 雖然CefSharp控件相對於chrome瀏覽器仍是有些差距，好比性能 效率，以及將來可能還會遇到的一些兼容性的問題。
但就目前來講，客戶仍是挺滿意的。
這，就夠了。
0x09 參考文獻
歡迎關注公衆號「ITman彪叔」。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃有濃厚興趣。