Babylonjs on Webbrowser

[Ahmet Gürbüz]

Hi Everyone.

I have winform application C# .Net. I tried to use webbrowser to display BABYLONJS, but I have have some problems. Is it possible to display it on webbrowser?

Unfourtunately, photos are not turkish, but it says

"Belirleyici gerekli" means needs definer"

'"BABYLON' tanımız" means "BABYLON is undefined".

on webbrowser side:

        private void button1_Click(object sender, EventArgs e)
        {
            string curDir = Directory.GetCurrentDirectory();
            webBrowser1.Url = new Uri("file:///D:/Musteriler/Liv%20Makina/_Omron%20Konfigürasyon/_CNC_Omron/PC/OmronCncV4/BabylonJS/index.html");
            webBrowser1.ScriptErrorsSuppressed = true;
        }

thank you.

Ahmet.

[davrous]

Yes, Babylon.js works inside the WebBrowser control as long as you're running at least IE11 on your machine. Looks like you've not referenced correctly babylon.js in your html file. 

Try to change your URI to "https://www.babylonjs.com/demos/spaceship/" and if it displays the spaceship in your Winform application, this means that Babylon.js is supported on your machine inside the webbrowser control.

[Ahmet Gürbüz]

Hi Davrosu,

thanks for your reply.

I have changed my Uri to "https://www.babylonjs.com/demos/spaceship/" as you said. and now I see this screens.

Screen0: I think it is related with sequrity of https. I say "YES" to go on

Screen1: Hata (Error) : Script Error. URL: https://preview.babylonjs.com/babylon.js. I say "YES" to go on

Screen2: Hata (Error) : BABYLON is undefined. URL: https://www.babylonjs.com/js/loader.js. I say "YES" to go on

 Screen3: Last viewing. I see the buttons on right side. I can not see 3d object.

what could be reason?

also I have changed my button1_click event on following.

        private void button1_Click(object sender, EventArgs e)
        {
            webBrowser1.Url = new Uri("https://www.babylonjs.com/demos/spaceship/");
        }

        thank you Ahmet.       

 

[davrous]

Which version of Windows are you running and what's the version of Internet Explorer installed on it?

[Ahmet Gürbüz]

I use Win7 Ultimate 64bit (Turkish Language), my Internet Explorer V11.0.9600.17843

[davrous]

Ok, I know why.

1 - the WebBrowser control doesn't support https... So you need to have only http reference. This demo should work: http://www.3dpanacea.com/automotive_showroom/cybrox.html as all our demos now is forcing https

2 - next problem is that the WebBrowser is using by default the IE7 compatibility mode: no WebGL and lot of missing JavaScript features to load Babylon.js (hence your first errors). You need to force the IE11 rendering mode using of the approach described there: https://blogs.msdn.microsoft.com/patricka/2015/01/12/controlling-webbrowser-control-compatibility/

I've been able to load the car demo using that.

David

[Ahmet Gürbüz]

Hi David. 

thanks for your caring. I tried your new URI but unfourtanately can not display that link in my webbrowser.

is it possible that to attach that project? and it is winform application, is not it?

regards,

Ahmet.

[davrous]

You need to follow one of the solution explained in the article I gave you. In my case, I've added a registry key for my Winform application.

[Ahmet Gürbüz]

Hi David,

now I am able to display my local html file on webbrowser. what i did to do, only I modified 

<meta http-equiv="X-UA-Compatible" content="IE=edge"> in my Html file. As I read "IE=edge" uses the last IE version on the client side.

after that modification, I can see my index.html in my webbrowser. But the another problem comes that is I can not use my mouse events to rotate shapes over webbrowser. the arrow keys of keyboard is working well to rotate. Also Mouse wheel is working to zoom In&Out.

the second problem is whenever I put your link as  " webBrowser1.Navigate("http://www.3dpanacea.com/automotive_showroom/cybrox.html"); " , I am got still some script.

what could be reason?

Thank you.

Ahmet.

[davrous]

It's because the webbrowser control uses the IE7 rendering & javascript engines by default which doesn't support WebGL and AddEventListener and so on.

The car demo I've linked doesn't use the meta tag to force IE=Edge.