왜 Canvas 구현이 Pixi.JS보다 빠릅니다?

저는 2D 게임 엔진을 쓰고 있습니다. 성능을 확인하기 위해 각각 3 명의 어린이가있는 1000 개의 객체를 그렸습니다. 오직 아이들이 그려, 그 구조는 다음과 같습니다 : 500 개체왜 Canvas 구현이 Pixi.JS보다 빠릅니다?

save(); 

translate(object.x, object.y); 
rotate(object.rotation); 

beginPath(); 
moveTo(0, 0); 
lineTo(object.length/8, -object.length/8); 
lineTo(object.length, 0); 
lineTo(object.length/8, object.length/8); 
stroke(); 

for (child in children) { 
    // repeat the same for each child 
} 

restore();

그것은 도착 ~ 25fps로를 : 모든 개체를 그리기 내 구현을 캐시 경로를 사용하지

var object = { x:, y:, length:, children: [ /* this repeats three times */ ] };

은 다음과 같습니다 (1500 어린이 총 무승부). WebGL이 더 빠를지를보기 위해 PIXI.js를 시도했습니다. 나는 객체들에 PIXI.DisplayObjectContainer을 사용하고 각 자식들에 대해서 PIXI.Graphics을 사용했다. (초기화시 각각 moveTo...lineTo 블럭을 호출했다.) 20FPS를 초과 할 수 없었습니다.

경로를 그릴 때 WebGL을 통해 뭔가 이상한 점이 있었거나 일부 마법 Canvas 성능 향상이 있습니까? Ubuntu 12.04 x64에서 Chrome 33.0.1750.149를 사용했습니다.

출처

2014-04-19 Killah

처럼 WebGL Renderer하려면이 정말 pixi.js 질문하지 WebGL이 질문을인가 강제 할 수 있습니까? 최대 100 만 개까지의 WebGL 드로잉 예제가 있습니다. pixi.js가 그렇게 할 수 없다면 WebGL 문제가 아니라 pixi.js 문제 일 것입니다. – gman

@gman right, WebGL 태그 제거 – Killah

아마도이 질문을 게시 한 날짜를 고려하여 이미 문제를 해결했을 것입니다.

사용자가 WebGL이 아닌 Canvas Renderer 일 가능성이 큽니다.

당신은하지 아래

var renderer = new PIXI.WebGLRenderer(WIDTH, HEIGHT);

대신

var renderer = new PIXI.autoDetectRenderer(WIDTH, HEIGHT); 
// can be either Canvas or WebGL

출처

2014-09-22 05:23:58

왜 Canvas 구현이 Pixi.JS보다 빠릅니다?

답변

관련 문제