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