Ionic and WebGL

Ionic Framework ionic-v3
1

Hello.

My client wants to embed 360° panorama preview from https://pannellum.org/ in Ionic app.
I prepared simple testing application with pannellum and it works only on browser and iOS. On Android (4 and 5) it alerts: “Your browser does not have the necessary WebGL support to display this panorama.”. Is it true? It’s really impossible to run WebGL in Ionic on Android?

I tried cordova-plugin-crosswalk-webview, after installing it I had errors:

BUILD FAILED in 22s
:app:processArm64DebugResources FAILED
32 actionable tasks: 15 executed, 17 up-to-date
(node:19133) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: /home/jakub/Pulpit/ionic-360/test360/platforms/android/gradlew: Command failed with exit code 1 Error output:
/home/jakub/.gradle/caches/transforms-1/files-1.1/xwalk_core_library-23.53.589.4.aar/3045e219194c9d060eb63169bf319af7/res/values/dimens_03.xml:14:5-51: AAPT: error: resource android:attr/fontVariationSettings not found.
    
/home/jakub/.gradle/caches/transforms-1/files-1.1/xwalk_core_library-23.53.589.4.aar/3045e219194c9d060eb63169bf319af7/res/values/dimens_03.xml:14:5-51: AAPT: error: resource android:attr/ttcIndex not found.
    
/home/jakub/Pulpit/ionic-360/test360/platforms/android/app/build/intermediates/incremental/mergeArm64DebugResources/merged.dir/values/values.xml:100: error: resource android:attr/fontVariationSettings not found.
/home/jakub/Pulpit/ionic-360/test360/platforms/android/app/build/intermediates/incremental/mergeArm64DebugResources/merged.dir/values/values.xml:100: error: resource android:attr/ttcIndex not found.
error: failed linking references.

Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt

My ionic info:

$ ionic info

Ionic:

   ionic (Ionic CLI)  : 4.0.1 (/home/jakub/.nvm/versions/node/v8.1.0/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.1, ios 4.5.5

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.1.0 (/home/jakub/.nvm/versions/node/v8.1.0/bin/node)
   npm               : 6.1.0
   OS                : Linux 4.4

Environment:

   ANDROID_HOME : /home/jakub/Android/Sdk
2

Depends, WebGL v1 or v2?

I have a bit of experience with WebGL v1 while I was developing https://github.com/fluster/web-photo-filter

When I tested it didn’t work that well on hold devices, that why I only recommended to use these on iPhone >= 6 and Android >= v7 (in this tutorial https://ionicacademy.com/ionic-image-filter-webgl/ at the end it’s documented how I limited the use of these)

I didn’t tried with Crosswalk since that project is discontinued and only really useful on Android < v5

I didn’t tried WebGL v2 because I thought that the compatibility wasn’t there yet https://caniuse.com/#feat=webgl2

Hope my feedback will helps a bit at least

1 Like
3

I installed plugin:
cordova plugin add cordova-android-support-gradle-release --fetch
and added to platforms/android/build.gradle following content:

configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}

It fixed the AAPT bugs, but on android device my app still complains, that WebGL is not supported.

4

I don’t see how that’s in any case related

Building your app is one thing, if WebGL is support by Android Webview and WkWebView is another thing

5

I just wanted to point out that I fixed the bug from my original post.

6

Oh I see cool :slight_smile:

So back to WebGL :wink: