max123

Cordova/Phonegap and Babylon

Recommended Posts

Hey guys,

Has anyone had any luck packaging up a Babylon scene inside a Cordova app?

The problem I'm having is apparently path related: I get the error message "Error status: 0 - Unable to load..". Everything works fine on the webserver though.

Share this post


Link to post
Share on other sites

This particular problem was solved when I updated Xcode. It was happening in simulator mode only. 

However, at this stage, I'm not sure Cordova is a universally viable solution for mobile platform.

My findings so far:

Android (tested on Samsung Galaxy S7):
- Everything works fine, in fact, much better than expected. No issues whatsoever.

iOS (tested on iPhone 5s and 6s)
- Scroll doesn't work. At all. I've read many users have this problem, there's a shittone of suggested solutions, but none has worked for me so far.
- Some Babylon scenes load and work, some fail (Xcode debugger is not reporting any errors/problems).
- Performance is absolute shite compared to viewing the same content through iOS Safari. I presume this is due to an older Webview shipping with Cordova. 
- I'm getting more and more pissed off with the whole Apple ecosystem. With Jobs gone, the company stopped giving a flying fcuk about their products and are only interested in profits.

 

I tried using React Native, but have given up on the idea at installation stage: it failed to install required npm components. There's a bug raised on Github and their solution is to downgrade your npm to v.4. Screw that.

Share this post


Link to post
Share on other sites

OK, after a few trials and errors I managed to come up with a workflow that works(-ish):

Global:

1. Install cordova: 
$[sudo] npm install -g cordova
2. Install Xcode and Android Studio

Project:

1. Create project:

$ cordova create project-folder-name com.example.myapp MyAppName
$ cd project-folder-name
$ cordova platform add [ios][android]
$ cordova plugin add cordova-plugin-wkwebview-file-xhr

The last command will replace the default Webview with WKWebview, which is much, much snappier! And the scroll is working too.

 

The problem is, I'm still unable to launch PDFjs modules (I think there's a problem with webworkers as I'm getting an arcane error: Warning: Setting up fake worker). PDFjs doesn't work on Android either. [Edit: it works on Android, had a trailing slash in requirejs config. iOS - still no luck.]

Another problem is BJS  on iOS: can't find/load ANY textures. Something to do with paths I presume. Works great on Android though. 

 

Share this post


Link to post
Share on other sites

Updated instructions:

1. Install cordova: 

$[sudo] npm install -g cordova


2. Install Xcode and Android Studio


Create project:

$ cordova create project-folder-name com.example.myapp MyAppName
$ cd project-folder-name
$ cordova platform add [ios][android]


Add ionic WKWebview plugin:

$ cordova plugin add cordova-plugin-ionic-webview 
$ cordova build [ios][android]


Open your project in Xcode or Android Studio to deploy.

 

 

Using ionic WKWebview solves all issues on iOS.

Enjoy!

Share this post


Link to post
Share on other sites
On 10/23/2017 at 6:29 AM, max123 said:

OK, after a few trials and errors I managed to come up with a workflow that works(-ish):

Global:

1. Install cordova: 
$[sudo] npm install -g cordova
2. Install Xcode and Android Studio

Project:

1. Create project:

$ cordova create project-folder-name com.example.myapp MyAppName
$ cd project-folder-name
$ cordova platform add [ios][android]
$ cordova plugin add cordova-plugin-wkwebview-file-xhr

The last command will replace the default Webview with WKWebview, which is much, much snappier! And the scroll is working too.

 

The problem is, I'm still unable to launch PDFjs modules (I think there's a problem with webworkers as I'm getting an arcane error: Warning: Setting up fake worker). PDFjs doesn't work on Android either. [Edit: it works on Android, had a trailing slash in requirejs config. iOS - still no luck.]

Another problem is BJS  on iOS: can't find/load ANY textures. Something to do with paths I presume. Works great on Android though. 

 

Hey max, I was wondering if you ever had any problems with finding/loading textures(or anything for that matter) with android.

I get many failed to load resource: net::ERR_FILE_NOT_FOUND

Then the texture loads in as a red and black checkerd board (its not supposed to be a red black checkers board at all)

Whats really weird that I cannot figure out is that I have sound files too and some of them load fine but still give an error and other don't load at all and give the error.

None of the textures, or models load in at all.  

Problem: I get that error for all resources I try to load in.  However some of the audio files actually load and I get to hear them, nothing else will actually load though, and I still get the error on the audio files that do load.  I need everything to load and not give an error.

Any ideas?

Share this post


Link to post
Share on other sites

Some more info on my setup:

I have Cordova-plugin-whitelist installed

I have Cordova-plugin-file installed

This is my config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.helloWorld.com" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Hello /world</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-file" spec="^4.3.3" />
    <engine name="android" spec="^6.2.2" />
    <engine name="browser" spec="^5.0.3" />
</widget>

Here is the heard to my index.html

<meta http-equiv="Content-Security-Policy" content="default-src *;
        img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
        style-src  'self' 'unsafe-inline' *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Here are the errors I'm getting(short version I get a lot of these)

Failed to load resource: net::ERR_FILE_NOT_FOUND

BJS - [10:19:10]: Error while trying to load image: textures/background.png

 

I am using chrome remote debugging to debug.

 

I have setup all of my file paths like so:

folder/file.png

no "./" as I heard this causes problems.

 

The Babylon's side of stuff was working when I make it for a local server but not when I put it on android. I am not building for iOS at all.

Share this post


Link to post
Share on other sites

so I'm doing some debugging and it would seem that the sounds are all loaded properly then after they are all loaded I get the error which is:

XHR 0 on: Audio/new/sound1.mp3.

Sound creation aborted

Just some more information.  Im going to continue to debug.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.