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、前端可视化方面有深刻研究。对程序员思惟能力训练和培训、程序员职业规划有浓厚兴趣。