Pixi.js: 활성 WebGL 컨텍스트가 너무 많습니다.

@andrevenancio
나는 월요일이나 화요일 이후로 만 사용했기 때문에 Pixi에 대한 전문가가 아닙니다. 한 번에 하나만 액세스해야 한다는 아이디어로 많은 실험( 이와 같은 )으로 인해 여러 렌더러와 캔버스가 있는 경우 글로벌 렌더러 또는 다른 렌더러를 사용하고 실험을 배열로 유지합니다. 그런 다음 표시해야 할 때 각 실험의 스테이지를 렌더러로 전달하기만 하면 됩니다.

var renderer = PIXI.autoDetectRenderer({blah});
var experiments = [];
experiments.push(experiment1);
experiments.push(experiment2);
experiments.push(experiment3);

var currentExperiment = $('#experminetSelector').val();
renderer.render(experiments[currentExperiment]);

이렇게 하면 렌더러를 한 번만 만들고 각 실험의 단계를 전달하기만 하면 됩니다. 이것은 여러 실험 페이지가 아닌 한 페이지만 렌더링하고 모든 실험이 있는 경우에만 작동합니다.

면책 조항: 저는 pixi를 처음 사용하고 이것을 시도하지 않았으므로 마일리지가 다를 수 있습니다. 또한 개발자가 조사하거나 지침을 제공할 수 있는 일종의 버그를 발견한 것처럼 들립니다.

단일 렌더러와 여러 장면을 갖는 것이 좋습니다. 1개의 렌더러 === 1개의 캔버스 요소.

여러분의 피드백에 감사드립니다. @samuriseoul 당신이 제안하는 것은 전혀 어리석은 것이 pixi.js 사용하여 실험을 수행 할 수 있으므로 다른 솔루션을 만들어야합니다 threejs 또는 일반 webgl. 또한 그 위에 반응 구조에 이미 정의된 전환 유형 때문에 한 지점에서 이전 실험과 새 실험이 동시에 렌더링되는 것을 볼 수 있으므로 하나의 렌더러 아이디어가 이겼습니다. 일하지....

게다가.... 이것은 해결책 자체가 아니라 문제에 대한 해결 방법입니다... .destroy() 메서드가 실제로 webgl 컨텍스트에 대한 참조를 파괴하지 않는다면... 요점은 무엇입니까? :(

야 친구! 컨텍스트가 파괴되지 않는 경우 파괴 기능이 정확히 해야 할 일을 하지 않는다는 데 전적으로 동의합니다. :)

나는 방황합니다, 당신은 autodetectRenderer 있습니까? 브라우저가 webGL을 사용할 수 있는지 감지하기 위해 생성한 테스트 컨텍스트가 파괴되지 않을 수 있습니다.

몇 가지 추가 정보: webgl 컨텍스트를 파괴할 수 없으며 가비지 수집됩니다(뭔가 변경되지 않는 한?)

나는 우리가 보유하고 있는 참조를 제거하고 선택적으로 캔버스 요소(컨텍스트 정리에 필요함)를 제거한다고 생각하지만 정리를 수행하는 것은 브라우저에 달려 있습니다. 컨텍스트가 누출되거나 브라우저가 원하는 것보다 빠르게 생성될 수 있습니다. 솔직히 잘 모르겠습니다.

개발 도구는 이와 같은 컨텍스트 주변의 누출을 나타냅니까? 그게 도움이 될까요? 뭔가 컨텍스트를 유지하는 것처럼 들립니다. 컨텍스트에 대한 js 참조 또는 기본 캔버스에 대한 js 참조?

이것이 내가 어떤 일이 있어도 여전히 iframe을 사랑하는 이유입니다.

@GoodBoyDigital 저는 이렇게 autodetectRenderer 사용하고 있습니다.

<strong i="9">@renderer</strong> = new PIXI.autoDetectRenderer canvas.width, canvas.height, { view: canvas, antialias: false, backgroundColor: 0xffffff }

나는 지금 이것을 주차하고 있습니다. 솔루션을 찾았을 때 해결책이 무엇인지 알려줄 것입니다. 나는 그 컨텍스트를 강제로 잃어 버리면 가비지 수집이 강제로 청소할 것이라고 생각했습니다. 그러나 확실하지 않습니다. :)

같은 문제가 있습니다. 내가 구축하는 것은 Pixi가 상당히 자주 파괴되고 재건되어야 하며 메모리 영향에 대해 우려하고 있습니다. 각 WebGL 인스턴스는 현재 매우 작지만 계속 구축하면서 훨씬 더 커질 것입니다.

어떤 진전이 있습니까?

분명히 저는 Phaser를 사용하고 있지만 Pixi의 renderer.destroy 메서드를 호출하는 것 같습니다.

아직 운이 없습니다. 하나의 글로벌 렌더러를 사용할 수 있고 다른 장면을 렌더링하거나 iframe을 통해 콘텐츠를 로드하고 매달려 있는 모든 것을 적절하게 처리할 수 있습니다.

Hey peeps, 예, 이것은 약간 까다로운 문제입니다. 내가 볼 수있는 한 우리는 컨텍스트를 파괴하기 위해 할 수 있는 모든 것을 합니다. 따라서 모든 텍스처/프로그램 arraybuffers ect가 파괴됩니다. 우리가 할 수 있는 것은 컨텍스트가 파괴되면 풀링하여 매번 새 컨텍스트를 생성하는 대신 재사용하도록 하는 것입니다.

안녕하세요 @GoodBoyDigital 제 경우에는 애니메이션 인/아웃이 있어서 항상 2개의 컨텍스트가 필요했습니다... 그건 React와 통합하고 전체 pixi로 만들지 않는 문제입니다... 어쨌든, 이것이 버그인지 확실하지 않습니다. 말에 따르면 .. 브라우저가 컨텍스트를 관리하는 것과 비슷하다고 생각합니다 ... three.js의이 해킹이 작동하는지조차 모릅니다 ... ur V4에서 시도하고 pixi로 16 개 이상의 탭을 열어보십시오. https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L289

그렇지 않으면 걱정할 필요가 없습니다. 이미 내 앱의 아키텍처를 변경했습니다... iframe FTW :)

좋은 물건 남자! three.js 트릭을 추가하는 방법도 살펴보겠습니다.

하나의 글로벌 렌더링을 사용하고 싶습니다. 사실 그게 제 궁극적인 목표입니다. 그러나 코드를 기존 컨텍스트로 스트리밍하는 방법이 필요합니다.

즉, 사용자가 코드를 작성하고 있습니다. 미리 작성된 것이 아닙니다.

좋은 해결책을 찾은 것 같아요. 이를 통해 서로에 대해 알 필요가 없고 React가 DOM을 소유할 수 있도록 하는 지도 오버레이 React 구성 요소를 가질 수 있습니다.

컨텍스트 손실을 강제하기 위해 이 기술 을 사용

gl.getExtension('WEBGL_lose_context').loseContext();

전체 예는 다음과 같습니다.

var document = require('global/document');
var PIXI = require('pixi.js');

// I want to keep this canvas / renderer around. For example, this might be a bottom layer PIXI / React map overlay.
var canvas1 = document.createElement('canvas');
document.body.appendChild(canvas1);
createRenderer(0xff0000, canvas1);

function createRenderer(color, canvas) {
  canvas = canvas || document.createElement('canvas');
  var renderer = new PIXI.WebGLRenderer(800, 600, {view: canvas});
  var stage = new PIXI.Container();
  var graphics = new PIXI.Graphics();
  graphics.beginFill(color, 0.5);
  graphics.drawCircle(0, 0, 200);
  graphics.endFill();
  stage.addChild(graphics);
  renderer.render(stage);
  return {renderer: renderer, stage: stage, graphics: graphics};
}

// Simulate frequent adding / removing of lots of PIXI / React map overlays on top.
for (var i = 0; i < 16; i++) {
  var canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  var scene = createRenderer(0x00ff00, canvas);
  // Uncomment to see that the original canvas isn't removed.
  /* scene.renderer.currentRenderTarget.gl
      .getExtension('WEBGL_lose_context').loseContext(); */
  scene.renderer.destroy();
  scene.stage.removeChild(scene.graphics);
  document.body.removeChild(canvas);
}

PIXI가 자체 "destroy" 메소드에 이것을 추가해야 할까요?

우리가 컨텍스트를 소유하고 있다면 의미가 있습니다. 제 생각에는 현재 우리가 소유하고 있다고 가정합니다(v3).

isWebGLSupported()(source/core/utils/index.js) 함수에서 대체
return !!(gl && gl.getContextAttributes().stencil);

~와 함께
var success = !!(gl && gl.getContextAttributes().stencil); gl.getExtension('WEBGL_lose_context').loseContext(); gl = undefined; return success;

나를 위해 문제를 해결했습니다. Google 크롬에서 가장 두드러졌습니다. Firefox는 어느 쪽이든 작동했습니다. 저는 WebGL 멍청한 사람이기 때문에 이 접근 방식에 대한 의견을 주시면 정말 감사하겠습니다.

좋은 호출은 확인할 때 강제로 컨텍스트를 잃는 것입니다. 이는 우리가 해당 컨텍스트를 소유하고 있다는 것을 (100%) 알고 있기 때문에 좋은 아이디어입니다.

이 병합 되었습니까? 우리는 같은 문제를 겪고 있습니다.

ping @englercj 지금 닫을 수 있다고 생각합니다.

gl.getExtension('WEBGL_lose_context').loseContext() 는 경고를 표시하지 않을 수 있지만 사양에 따르면 WEBGL_lose_context.restoreContext() 가 호출될 때까지 컨텍스트 손실을 시뮬레이트할 뿐이며 처음에 실제로 손실되지 않은 경우에만 컨텍스트를 복원할 수 있습니다.

이것은 유용할 수 있습니다. loss_context()는 (사양에 따라) 시뮬레이션일 뿐이지만 이 스레드( Public WebGL: WEBGL_lose_context에서 우리는 (모질라 개발자 Jeff Gilbert로부터))에서 Firefox loseContext() 가 " 이 컨텍스트와 그자원" .

문제는 다른 브라우저가 이것을 다르게 처리한다는 것입니다. Google 개발자(Ken Russell)가 추천하는 의견이 있습니다. WebGLRenderingContext에서 명시적 delete* API를 사용하여 애플리케이션에서 더 이상 사용하지 않는 GPU 리소스를 해제하십시오.

나는 이것 중 어느 것도 실험하지 않았다는 것을 인정해야하지만 어떤 솔루션도 브라우저에 따라 달라지는 것처럼 보입니다.

흥미로운 FF 구현 노트. 실제로 개별 리소스 삭제에 대한 Ken의 조언은 일반적인 방법처럼 보이지만 FF는 많은 인기 있는 브라우저 중 하나이며 FF 동작도 예고 없이 변경될 수 있습니다. 또한 대안이 있을 때 구현 세부 정보와 가짜 사용자 에이전트 문자열 또는 브라우저 스니핑 및 추가 코드 경로에 의존하고 싶지 않기 때문에 브라우저별로 테스트하지 않았습니다.

오늘 iOS에서 내 앱을 테스트하고 있었는데 이 오류가 발생했습니다. 알려진 해결 방법이 있습니까? 내 pixi 보기는 내 앱 화면의 하위 구성 요소이므로 사용자가 해당 페이지에서 벗어날 때 파괴됩니다. 문제를 해결하기 위해 동일한 렌더러를 뷰의 캔버스에 어떻게든 분리/재연결하는 것이 효과가 있을까?

해결 방법은 여러 컨텍스트를 만들지 않는 것입니다. 가지고 있는 것을 재사용하십시오. 페이지를 탐색하는 경우 이전 페이지에서 생성된 내용은 중요하지 않습니다.

음, 컨텍스트를 재사용하려면 어떻게 해야 합니까? 저는 angularJS를 사용하고 있으므로 템플릿 프레임워크 내에서 작업하고 있습니다. 예를 들어 DOM에서 캔버스 요소를 분리하여 저장할 수 있습니다. 그런 다음 사용자가 페이지로 돌아올 때 페이지의 해당 위치에 다시 연결할 수 있습니까? PIXI 내에 "이 기존 렌더러 + 컨텍스트를 사용하여 이 새 캔버스에 연결"하는 방법이 있으면 좋겠지만 내부적으로는 어떻게 되는지 이해가 되지 않습니다.

내가 걱정하는 이유는 하나의 큰 pixi 보기를 내 앱의 배경으로 사용하고 있고 내 설정 페이지에서 사용하는 더 작은 것이 있기 때문입니다. 사용자가 설정 페이지로 여러 번 이동하면 기본 배경이 먼저 생성되었기 때문에 기본 배경이 종료됩니다.

이것은 단일 페이지 앱 내에서 PIXI를 사용하는 것과 관련된 문제인 것 같습니다.

PIXI.Application/PIXI.WebGLRenderer/PIXI.CanvasRenderer의 인스턴스를 저장하면 캔버스 요소의 인스턴스도 저장됩니다. 예를 들어, PIXI.Application에서 HTMLCanvasElement인 view 속성을 얻을 수 있습니다. 이 캔버스 요소를 삽입하고 AngularJS/React 앱에서 제거할 수 있습니다. PIXI에서 옵션으로 전달하여 사용할 캔버스 요소를 렌더러에 알릴 수 있지만 사용해서는 안 됩니다. 대신 PIXI가 내부적으로 자체 캔버스 요소를 생성하도록 허용하고 일부 DOM 컨테이너에 appendChild를 추가합니다.

<div id="pixi-container"></div>

// maintain the reference to this Application even as your SPA view gets destroyed
const app = new PIXI.Application();

// Insert in the DOM or whatever the equivalent is in Angular
document.querySelector("#pixi-container").appendChild(app.view);

네, 감사합니다. 시도해 보겠습니다. 실제로는 전혀 나빠 보이지 않습니다.

좋아, 뷰를 파괴하는 대신 뷰를 분리했다가 다시 추가하면 내 문제가 해결되었습니다. 도움을 주셔서 감사합니다.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.