Best way to use existing Babylon 3D app for Mobile Augmented Reality

[dsman]

So we have some app logic already written in Babylon which is working in browser as intended. 

 

Now we want to do AR in mobile devices . Where user can scan a marker (paper sheet or something ) which gives us the transformation matrix of surface on which the marker is placed . And then we can augment our 3D shapes based on our existing logic in babylon. 

 

We are using Xamarin.Android in our app. For are ios we are planning to do native development. 

 

I checked Wikitude. But if someone has done something like this or know a best way to do , please suggest. 

[GameMonetize]

Hey Dsman!

 

If you ask for platform support, I know that cocoon.js works well with iOS and that Cordova is great for android

[dsman]

So the question is doing  everything inside Webview is advisable/practical first of all ?  Ie. Taking device camera stream and showing on canvas , and then imposing babylon 3D graphic on it . 

[RaananW]

Google is using the normal browser for vr, https://vr.chromeexperiments.com . Using a different framework. The one that starts with three and ends with js.

The performance in the browser (for you, the normal web view) is surprisingly good. But those are simple scenes.

If your scene is more complex, try first cocoon's webview+, which offers an accelerated web view (different js engine in android and other treats). Eventually you could try canvas+, which is an accelerated version of a canvas. There are pros and cons for each, but performance would be the best with canvas+.

[jerome]

Side question while speaking about three.js :

 

I wonder how BJS is 800 KB whereas 3.js is only 400 KB.

It's been a while I didn't use three.js (actually since I discovered BJS ) and I remember, for instance, some features are external (I mean in external files) like the cam behaviors or some visual effect shaders.

However threejs provides at least four types of renderer (canvas2D, webGL, SVG and CSS3d) instead of focusing only on webgl as we do here. This would lead to bunch of lines of code afaik.

 

So I don't really understand where this difference comes from and if it has a significant impact on the framework working .

Well, it has a difference on the framework file download time, but compared to everything else (textures, imported meshes, sounds, etc), I guess it doesn't really matter.

 

 

I would state I have absolutely no idea about each framework memory footprint once they run.

[dsman]

Our 3D content (Generated by babylon) which needs to be imposed/overlayed on the camera stream will be fairly simple .It will be some 3-4 type of  plane meshes (6 vertices each) , instantiated to some 40-50 meshes.  That's it. 

 

I was wondering how would this happen with Babylon. I mean How would babylon render a mesh but without a background ? Which means 3D content with transparent background. So that, 3D content can be imposed over device camera view. 

 

I think we won't be able to use cocoonjs  because it is kind of app packager (html5/js app to .apk package) and not a separate webview component which we can put in our native or xamarin app. Unless I am wrong in understanding how cocoonjs works. 

 

So I think if we want to add this functionality in existing Xamarin and native iOS based app, we need to use  cordova + JSARToolkit 

[RaananW]

The WebView+ packages can be a aprt of your own application and doesn't need to be packed (they are plugins for phonegap/cordova):

https://github.com/ludei/webview-plus

https://github.com/ludei/webview-plus-ios

They might bring better performance. But if you are saying that the application is fairly simple, a regular webview might suffice. 

 

@Jerome - The two frameworks are incomparable. Three has no Collisions, Three has no physics integration. Three is missing other things that BJS has - which can be added using external plugins. The paradigms are totally different. Three is also developed in vanilla JS, which removes the typescript overhead (which is nothing to worry about performance-wise, but it does make a bit larger files). It's like asking why jQuery and Dojo toolkit are not the same size.

[iiceman]

 

Just set the scene.clearColor to a new BABYLON.Color4 value with alpha value != 1

http://www.html5gamedevs.com/topic/1939-newbie-question-transparent-scene-background/

 

@dsman: Is that what you mean with transparent background or did I misunderstand?

[GameMonetize]

@Jerome: we also have a complete file loader and save, all shaders are included , collisions, physics, CSG. BJS philosophy is to keep it simple for the developer with no need to find external libs

 

And size-wise, the CDN version which uses gzip is 250k

[jerome]

Yeeeppp... physics !!! That's the real difference !!! 

[qqdarren]

Jerome, so if we don't use physics, are we wasting 400KB of the 800KB download? That is confusing me, because I thought physics was done with the oimo.js plugin.

 

I started with three.js, but switched to Babylon.js because the demos were more impressive - it seemed I could get more done with fewer lines of code. So the "everything but the kitchen sink" philosophy is appealing while doing mock-ups and rapid development. But once I have something to release I'd love to try then implementing it in Three.js as well, so I can compare them side by side. Not just file size, but running speed. Especially on mobile. (We'll have to see if I have any resources/energy left at that point!)

[GameMonetize]

It is not just about physics but everything else that I mentioned(And I probably forgot a lot): complete file loader and save, all shaders are included , collisions, physics, CSG, particles, etc...

[GameMonetize]

And once again if you put you babylon.js file in a web server with gzip on, you wont see any difference but a really smaller file

[jerome]

huuu... I don't know indeed

I can see there are currently (22:30 french time) many file reorganizations in the github repo... babylon.js even disappeared ! (temporarily, I hope)

 

[edit] it seems to be in the src folder now

waiting to see the build respawn 

 

[edit2] found in the dist folder !

[dsman]

@iiceman  Yes. I was asking talking about  that transparency. 

 

@RaananW  thanks for pointing that Webview+ is component which we can use in our Xamarin or iOS app. It would be great then. 

 

And yes Babylon is much better than Threejs

[Dad72]

And yes Babylon is much better than Threejs

 

 

I like reading this. I am of the same opinion 100% 

[jerome]

@discussion : I know that the download time difference has no importance as quite ALL webservers now compress data since years.

I was wondering much about the LOC number difference. But I forgot that collisions and physics integration were absent in the raw threejs, as well as many shaders.

 

Arf, I won't say I prefer three.js ... Have you seen my name in the three.js  contributors list  ?