0 x00 wedge

A recent project is a scene editing and monitoring system for 3d visual monitoring in oil fields. It is similar to 3D configuration, but mainly used in oil fields. The effect is shown in the figure below:

First, of course, the model is up, and the designers follow up. With the relevant model, using an editor we developed, it is quickly possible to edit the above scenario through model drag-and-drop editing, pipe editing, etc. :

Everything is going very well. Until the customer said, we have a WPF desktop application, and we need to embed your 3D on the desktop.

0x01 Silence

We were a little confused at first. After all, we mainly do JavaScript front-end development, and we have little contact with C# and the like.

Hold the attitude of try in the development group asked next, does anyone understand the development of WPF?

Silence…

Because basically professional development in the front end, understandable.

0x02 Initial attempt

Well, no one else can, so what? I’m gonna have to do it myself. Although I haven’t had much experience in C# development, I have done Java, Python, C, Flex, JavaScript and so on. With years of development experience, I believe it will not be too difficult. Of course, the first step is to download VS Studio. When I see n GIGABytes of downloads, I still feel quite crushed.

After a long wait, WE finally downloaded and installed VS Studio.

Since our 3D management is based on WebGL, I think the direction to look for is to see if there are browser-like controls in WPF. After search found, is the WebBrowser control, roughly use the following,

<WebBrowser x:Name="WebBrowser1" Source ="xxx.com"></WebBrowser>Copy the code

Unfortunately, this control does display web pages, but does not support WebGL. At first, I thought it was because I used the IE kernel. Later, I switched to the Chrome kernel, but it still didn’t work.

Initial attempts failed…

0 x03 CefSharp appeared

When you’re confused, you can only use the great search engines, and I’m not talking about a certain degree here. Found an artifact called CefSharp. CefSharp lets you embed Chromium in.NET apps. CefSharp is like a Chrome browser.

It felt like CefSharp could support WebGL functionality, so I decided to give it a try.

0 x04 CefSharp installation

I decided to use NuGet to install the CefSharp package. If you are a C# developer, you should be familiar with NuGet. If you don’t do C# development. So you can think of NuGet this way:

  • If you know Python, it’s like PIP.
  • If you know NodeJS, it is similar to NPM.
  • If you know Ruby, it’s like gems.
  • If you know Java, it’s like Maven.

Right click on the solution for the CREATED WPF project to find the NuGet management:

Click “Manage solution NuGet package”, enter CefSharp in the search box of the interface, you can find CefSharp related package, because we use WPF, so select cefsharp. WPF to download and install:

0 CefSharp x05 configuration

Cefsharp.wpf: CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp = CefSharp

Because the project needs to be configured.

A. CefSharp Version 51 or later

Versions after CefSharp Version 51 support AnyCPU and still require simple configuration.

First, enable the “Preferred 32-bit” option, right-click the project name, select properties, and select:

Then, go to the “.csproj “file of the project and add the following text at the end:

<CefSharpAnyCpuSupport>true</CefSharpAnyCpuSupport>Copy the code

Your.csproj file should look like this:

Last modify your app.config file, which is under the solution:

Add the following text to the file:

<runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
        <probing privatePath="x86"/>
    </assemblyBinding>
</runtime>Copy the code

Then, your app.config file should look like this:

B. CefSharp Version 49 or earlier CefSharp Version 49 or earlier does not support AnyCPU. Therefore, you need to specify the compilation architecture. Otherwise, there will be the following hints:

CefSharp.Common does not work correctly on AnyCPU platform. 
You need to specify platform (x86 / x64).Copy the code

Right-click on the solution and select Properties. The following interface appears:

Under the configuration properties — configuration, specify a bit-specific platform for Release and Debug, such as X64.

0 use CefSharp x06

After the above configuration, you can use the CefSharp control, first introduce the control:

using CefSharp;
using CefSharp.Wpf;Copy the code

Then, start initializing ChromiumWebBrowser as follows:

      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);
        }Copy the code

Create a ChromiumWebBrowser object and, when created, pass in the address of our 3D application. Then add the object to the Wpf interface.

Start the project, you can get the following interface, three-dimensional application is no problem out:

0x07 Debugging added

Code that can’t be debugged is horrible. The CefSharp control, like chrome, opens the console. Specifically, the ChromiumWebBrowser object has a ShowDevTools function on it that opens the console. Therefore, we add a keyboard listener, which is called to open the console when F12 is pressed:

private void MainWindows_Keydown(object sender, KeyEventArgs e) {/ / whether the user keys for F12 the if (e.K eyStates = = the rid_device_info_keyboard. GetKeyStates (Key. F12)) {chromeBrowser. ShowDevTools (); } else if (e.KeyStates == Keyboard.GetKeyStates(Key.F11)) { chromeBrowser.Reload(); }}Copy the code

The effect of pressing F12 on the interface is as follows:

0 x08 end

With CefSharp, you can basically solve your customers’ needs for embedding 3D applications into WPF. While CefSharp controls still have some differences compared to Chrome, such as performance efficiency, and may encounter some compatibility issues in the future.

But for now, the customers are happy.

That’s enough.

0x09 References

Ourcodeworld.com/articles/re…

Welcome to follow the public account “ITman Biao Uncle”. Uncle Biao, with more than 10 years of development experience, the current company system architect, technical director, technical trainer, career planner. In-depth research in computer graphics, WebGL, front-end visualization. Strong interest in programmer thinking ability training and training, programmer career planning.