Jump to content

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


Recommended Posts

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. 

Link to comment
Share on other sites

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+.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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



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.

Link to comment
Share on other sites

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!)

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

@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  ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...