How to get Pixijs with Cocoonjs to use a WebGLRenderer with canvas+ webview engine

Question

I can't seem to get the canvas+ webview engine within Cocoon to use a PIXI.WebGLRenderer no matter what I try. Here is a simple example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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, height=device-height, target-densitydpi=device-dpi" />
    <script type="text/javascript" src="http://pixijs.download/release/pixi.js"></script>
    <title>Simple Test</title>
  </head>
  <body style="background-color: #99ff99; margin: 0; padding: 0;" onload="runTest()">
<script>
function runTest() {
  var renderer = PIXI.autoDetectRenderer( 500, 200 );
  document.body.appendChild( renderer.view );
  var stageContainer = new PIXI.Container();
  var text = new PIXI.Text( 'renderer.type='+renderer.type, { fontFamily: "Arial", fontSize: '12px', fill: "white" } );
  text.x = text.y = 50;
  stageContainer.addChild( text );
  renderer.render( stageContainer );
}
</script>
  </body>
</html>

With the Cocoon Launcher app I've tested this on: iPhone5 (iOS 10.2) iPad2 (iOS 9.3.5) HP 10 Plus (android 4.4.2)

With webview+, all display "renderer=1" (which means PIXI.WebGLRenderer) But with canvas+, all display "renderer=2" (which means PIXI.CanvasRenderer) Is it possible to get canvas+ mode to work with WebGL in Pixi.js?

I have also tried forcing the renderer to be WebGL by replacing the autoDetectRenderer line with:

var renderer = new PIXI.WebGLRenderer( 500, 200 );

In this case my Cocoon Launcher on iphone and ipad crashes! On the android, it just shows a black screen.

I have also tried with Pixi.js v3.0.1 with the same results.

So, is it possible to use WebGL with Cocoon's Canvas+ mode with Pixi.js? Any help much appreciated, thanks

score 1 · Answer 1 · answered Dec 15 '16 at 17:53

I managed to get it working, but not with the latest Pixi.js (v4.2.3), only with an old version - v3.0.10. The key was to add cordova.js and use the document.addEventListener( "deviceready", runTest, false );

Here is some updated code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/pixi-3.0.10.js"></script>
    <title>Simple Test</title>
  </head>
  <body style="background-color: #99ff99; margin: 0; padding: 0;">
<script>
function runTest() {
  var renderer = new PIXI.WebGLRenderer( 300, 100 );
  document.body.appendChild( renderer.view );
  var stageContainer = new PIXI.Container();
  var text = new PIXI.Text( 'rrr.type='+renderer.type, { fontFamily: "Arial", fontSize: '12px', fill: "white" } );
  text.x = text.y = 50;
  stageContainer.addChild( text );
  renderer.render( stageContainer );
}
document.addEventListener( "deviceready", runTest, false );
</script>
  </body>
</html>

This is only a partial answer because it only works with an outdated version of Pixi.js

As for me, I'm abandoning canvas+ for now because what I got working showed poor and erratic results compared with the webview+ mode. Also, as an aside, according to various performance tests I've made, it seems that the old Pixi.js v3.0.10 is dramatically out performing v4.2.3 as well.. so looks like I'll be sticking with that also.

How to get Pixijs with Cocoonjs to use a WebGLRenderer with canvas+ webview engine

1 Answers1