webGL is not working


#1

I’m trying to load a 3D Map working with webGL in an iframe tag in my app:

<iframe width="560" height="238" src="https://mylink" frameborder="0" allowfullscreen></iframe> 

It’s working perfectly fine on webapp browsers, but not when I build the project with cordova and try it on the simulator or device (both iOS and Android).

The widget takes ages to load, and then is buggy and freezing. It’s really frustrating as it’s really smooth on the webapp.

Is there a specific thing to do to make webGL work with cordova/ionic?

My app is built with Ionic, here are its specifications:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v5.10.1
Xcode version: Xcode 7.3.1 Build version 7D1014

#2

did you ever have any luck getting webGL working on iOS build? I’m running into a similar issue that works great with ionic serve, but not with an ios build


#3

The webGL support is a combination of the version (1 or 2), the devices and the browser you would use, that’s why you might see better performance on your laptop as on a device

For example, my library using webGL v1 https://github.com/peterpeterparker/web-photo-filter works well, according my test, on iPhone >= 6 and Android >= 7 but not under


#4

Thanks for the response. I’m using pretty much the latest version of everything:

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0
    cordova (Cordova CLI) : 8.0.0 
    @ionic/app-scripts : 3.1.10
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2
    Node  : v8.11.3
    npm   : 5.6.0 
    OS    : macOS High Sierra
    Xcode : Xcode 9.4.1 Build version 9F2000
    iOS: 11.4

For webGL, I’ve installed the official three.js npm package, using the command npm i three, as well as three-orbit-controls and three-decal-geometry. But the code is not doing anything too advanced, just importing JSON geometry, creating meshes from the geometry, applying a texture, and then rendering and providing camera control.

In my code, I load a directive that gets passed element reference of the parent, and appends the THREE.js renderer’s DOM element to the parent, as follows:

  • in the directive:
       import { Directive, ElementRef, Input } from '@angular/core';
       ....other imports and requires....

       @Directive({ selector: 'cubeCanvas' })
       export class CubeCanvasDirective {
          
           ....members...

           constructor(el: ElementRef) {
               this.el = el;
               this.init()
           }

           init() {
               ...THREE setup (cameras, controls, scenes, etc)...
               this.renderer = new THREE.WebGLRenderer();
	           this.renderer.setSize(500,500);
	           this.el.nativeElement.appendChild(this.renderer.domElement);
	           this.render();
           }

           render = () => {
               ...basic updates to controls and light....
               this.renderer.render(this.scene,this.camera);
		       requestAnimationFrame(this.render);
           }
       }
  • in page’s typescript file:
    import { Component, ViewChild } from '@angular/core';
    ...other imports and requires...

    @Component({
       selector: 'page-standard',
       templateUrl: 'standard.html'
    })
   
    export class StandardPage {  

      @ViewChild(CubeCanvasDirective) vc:CubeCanvasDirective;
      ...other members...

      constructor(public navCtrl: NavController, 
                  public navParams: NavParams,
                  public cubeStateProvider: CubeStateProvider) { 
      }
    }

   ...now I can call directive's functions using this.vc.directiveFunctionName()...    
  • I then insert the directive into page’s html using <cubeCanvas></cubeCanvas>

Running with ionic serve everything works well in Chrome, and everything is rendered well when using DevApp on iphone 8plus running iOS 11.4 (although the app hangs when one of the directive’s functions is called…but that may be something else). However, when I build using ionic cordova build ios --prod and then use xcode to install on the iphone with iOS 11.4, the app just shows a blank white screen.

Am I attaching the renderer to the DOM incorrectly? Is there something wrong with the packages I’m using? Other ideas?


#5

unfortunately I’ve got no experience with three.js. Like I said above I just noticed that according devices and os version it might be slower or even doesn’t work. Maybe give a try on another more recent phone?

sorry that I couldn’t help more than that


#6

Gotcha. If you’re comfortable sharing, is the Fluster app (I believe that’s what runs your web-photo-filter component that works on iphone >= 6) written using Ionic? If so, do you know how they are building/deploying it to the App store?

Just trying to understand if the environment and build is similar to what I’m trying to achieve.


#7

Fluster is a Ionic app yes :wink:

I build it normally ionic cordova build ios --prod and then ship it to the app store with Xcode on a MacOS

But I don’t want to point you in the wrong way to solve your issue, don’t misunderstand me. I just wanted to point out that according my experience WebGL might not be consistent according devices and os and thought that would helps a bit


#8

I’ll say! Thank you though. It’s helpful for pinpointing what might be causing my issue. I’ll dig further to see if anyone has had luck deploying this way using three.js. Cheers.