캔버스 + 웹 뷰 엔진에서 WebGLRenderer를 사용하는 Pixys를 Cocoonjs로 가져 오는 방법

코쿤 내에서 canvas + webview 엔진을 사용하여 PIXI.WebGLRenderer를 사용하려고 할 수 없습니다. 내가 이걸 테스트 한 코쿤 런처 앱으로캔버스 + 웹 뷰 엔진에서 WebGLRenderer를 사용하는 Pixys를 Cocoonjs로 가져 오는 방법

<!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>

: 다음은 간단한 예입니다 아이폰 5 (아이폰 OS 10.2) 아이 패드 (아이폰 OS 9.3.5) HP 10 플러스 (안드로이드 4.4.2)

웹보기

+, 픽시에 WebGL이 작업을 캔버스 + 모드를 얻을 수 그러나 캔버스 +, (PIXI.CanvasRenderer을 의미) 모든 디스플레이 "렌더러 = 2"가 가능 (PIXI.WebGLRenderer을 의미) 모든 디스플레이 "렌더러 = 1". js? 나는 또한 렌더링을 강제로 시도

는 함께 autoDetectRenderer 라인을 교체하여 WebGL을 할 : 아이폰과 아이 패드 충돌에이 경우 내 누에 고치 런처에서

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

! 안드로이드에서는 검은 색 화면 만 보여줍니다.

Pixi.js v3.0.1에서도 같은 결과가 나타났습니다.

그래서 Pixian.js에서 Cocoon의 Canvas + 모드로 WebGL을 사용할 수 있습니까? 도움을 주신 데 대해 감사드립니다.

출처

2016-12-15 Ben Robinson

최신 버전의 Pixi.js (v4.2.3)에서는 작동하지 않지만 이전 버전 인 v3.0.10에서만 작동합니다. 그것은 단지 Pixi.js

의 오래된 버전으로 작동하기 때문에

<!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>

이 부분적으로 만 대답 : 의 핵심은 cordova.js를 추가하고 사용했다 document.addEventListener("deviceready", runTest, false); 여기

는 일부 업데이트 된 코드입니다

나는 webview + 모드와 비교할 때 좋지 않은 결과를 보였기 때문에 캔버스 +를 지금 버리고 있습니다. 또한, 제쳐두고, 내가 만든 다양한 성능 테스트에 따르면, 이전 Pixi.js v3.0.10이 v4.2.3을 극적으로 수행하고있는 것처럼 보입니다. 그래서 나는 또한 그걸 고수 할 것입니다.

출처

2016-12-15 17:53:44

캔버스 + 웹 뷰 엔진에서 WebGLRenderer를 사용하는 Pixys를 Cocoonjs로 가져 오는 방법

답변

관련 문제