0x00 楔子
最近做的一個項目，是一個油田三維可視化監控的場景編輯和監控的系統，和三維組態有些類似，不過主要用於油田上。 效果如下圖所示：
首先當然是上模型，設計人員跟進。 有了相關的模型，使用我們開發的一個編輯器，通過模型拖拽編輯，管路編輯等等，很快就能夠編輯出以上的場景：
一切進展的都很順利。 直到客戶說，我們有一個WPF開發的桌面端程序，我們需要把你們的三維嵌入到桌面端。
0x01 寂靜無聲
一開始我們是比較懵逼的。畢竟我們主要做JavaScript前端開發，對於C# 之類的接觸的很少。
抱着試一試的態度在開發群里面問了下，有人懂WPF的開發嗎？
寂靜無聲。。。
因為基本上專業在前端開發，可以理解。
0x02 初步嘗試
既然都沒有人會，那怎么辦，只能我親自出馬了。雖然我沒有太多接觸過C#相關開發， 但是做過Java，Python，C，Flex，JavaScript等等的開發。憑借多年開發經驗，所以相信並不會太難。當然第一步，是下載vs studio， 當看到n個G的下載時候，內心還是挺崩潰。
在漫長等待之后，終於下載並安裝了 vs studio。
因為我們的三維管理是基於網頁的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”文件，在
<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、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規划有濃厚興趣。
