Pixi.js: 많은 텍스트를 렌더링하고 위치를 업데이트하면서 높은 FPS를 달성하는 방법은 무엇입니까?

_ 모든 _ 번 화면에 1500 개가 필요합니까? 오프 스크린 레이블을 제거하면 성능에 많은 도움이됩니다. Pixi는 기본적으로 컬링을 수행하지 않지만 여기에 도움이 될 수있는 몇 가지 커뮤니티 플러그인 (예 : @SukantPal의 @pixi-essentials/cull )이 있습니다.

1500 개의 레이블이 모두 고유합니까? 중복 항목이 많으면 RenderTexture를 사용하여 Sprite로 변환하고 더 많은 메모리로 참조를 공유 할 수 있습니다.

@ChristophWalter 여러분이 보여준 예제는 @bigtimebuddy가 언급했듯이 컬링으로부터 잠재적으로 이익을 얻을 수 있습니다. 112 개의 문자가있는 1500 개의 레이블은 렌더링 할 _ 많이 _입니다. 예를 들어 관련 최적화를 제안하는 데 사용할 수없는 이유가 있습니다. 예를 들어 텍스트가 대부분 겹칩니다. 나는 당신의 프로젝트가 너무 조밀하여 사용자가 읽을 수없는 뒤죽박죽 된 텍스트를 표시 할 것이라고 생각하지 않습니다.

MESH.BATCHABLE_SIZE를 200과 같이 더 높은 값으로 설정하면 도움이 될 수 있습니다. iMac에서 6x CPU 속도 저하 후에도 여전히 45FPS를 통해 전원이 공급되기 때문에 철저히 테스트하지 않았습니다.

예제를 너무 많이 프로파일 링하지 않았습니다. 그러나 상업용 프로젝트에서 작업 중이고 이것이 GPU 측 병목으로 판명되면 각 문자 (모두 As, 모든 B, 모든 C 등)를 함께 렌더링하는 비 순차적 문제를 고려할 수 있습니다. 텍스처 지역성을 개선하기 위해 타일 엔진 개발 및 / 또는 화면에서 _changed_가있는 부분을 렌더링하는 diff-rect 최적화를 수행합니다 (즉, 1500 개의 레이블 중 60 개의 업데이트를 기반으로 함). 이것은 단지 아이디어이며 그대로 받아 들여 져야합니다.

도와 주셔서 감사합니다!

실제로 우리는 컬링을 사용할 것이며 동시에 많은 레이블을 표시 할 가능성은 거의 없습니다. 그러나 벤치 마크 이유로 우리는 웹이 아닌 애플리케이션과 경쟁해야합니다. 우리는 이미 이러한 요구 사항에 의문을 제기했지만 webgl이이를 처리 할 수 ​​있다는 것을 보여줄 수 있다면 많은 도움이 될 것입니다.

레이블은 고유합니다. 그러나 그들은 그렇게 자주 변경되지 않을 수 있습니다. 이 예제는 텍스트 내용을 전혀 변경하지 않습니다. 따라서 최적화 할 가능성이 있습니다. 위치 ( 놀이터 )를 업데이트하지 않아도 FPS가 동일하게 유지된다는 것을 알았습니다. 텍스트가 변경 될 때만 다시 렌더링하는 방법이 있습니까?

MESH.BATCHABLE_SIZE를 설정해도 내 편이 바뀌지 않았습니다. 다른 아이디어를 살펴 보거나 iMac 구입을 권장합니다. 😏 저는 렌더링에별로 관심이 없으므로이 아이디어가 정말 도움이됩니다!

아, 특정 예를 실제로 최적화하는 경우 최고의 방법은 @bigtimebuddy가 말한대로 한

이는 두 가지 주요 이점을 제공합니다.

• 이렇게하면 배치 렌더러의 버퍼링 단계의 오버 헤드가 제거됩니다.
• 정점의 수는 112 배 (4 / 문자 대신 4 / 텍스트)로 잘립니다. 그러면 정점이 6K로 낮아집니다.
• 장면에 DisplayObject가 하나만 있습니다.

따라서 기본적으로 프로세스는 다음과 같습니다.

1. BitmapText를 RenderTexture로 렌더링
2. 1500 * 4 정점으로 메시를 만듭니다.
3. 정점을 직접 애니메이션합니다. 인스턴스 당 4 개의 정점이 있기 때문에주의해야합니다 (예 : 직사각형). 따라서 첫 번째 정점의 위치를 ​​계산합니다. 그런 다음 다른 세 개는 (x + 너비, 높이), (x + 너비, y + 높이), (x, y + 높이)입니다.

이것은 간단한 과정이어야합니다. 어떻게되는지 알려주세요!

이봐, 나는 당신의 제안을 구현하려고 노력했습니다. BitmapText를 텍스처로 변환하는 것이 작동하는 것처럼 보였습니다. 하지만 현재 메시에 텍스처를 표시하려고 노력 중입니다. PIXI.Mesh 및 PIXI.SimpleMesh를 사용해 보았습니다. 나만의 셰이더를 만들어야합니까, 아니면 PIXI.MeshMaterial을 사용할 수 있습니까?

const bitmapFontText = new PIXI.BitmapText(
    'Lorem ipsum dolor\nsit amet consetetur\nsadipscing elitr sed', 
    { font: '55px Desyrel', align: 'left' }
);

const texture =  PIXI.RenderTexture.create({ width: 800, height: 600 });
app.renderer.render(bitmapFontText, texture);

const vertices = [
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
    -0.5, 0.5
];
const uvs = [
    0, 0,
    1, 0,
    1, 1,
    0, 1,
];
const indices = [0, 1, 2, 0, 2, 3];
const geometry = new PIXI.MeshGeometry(vertices, uvs, indices);
const shader = new PIXI.MeshMaterial(texture);

const mesh = new PIXI.Mesh(geometry, shader);
app.stage.addChild(mesh);

https://www.pixiplayground.com/#/edit/7RHqFti0tdSzw -6iOtylk

-
_Edit_ : 수정했습니다. 꼭짓점은 픽셀 좌표를 나타내야합니다. _ 다음 단계 _ : 메시에 하나 이상의 텍스처를 사용합니다.

const vertices = [
    0, 0,
    500, 0,
    500, 500,
    0, 500
];

-
_ 편집 2_ : 모든 라벨에 하나의 텍스처를 사용할 때만 작동합니다. 그렇죠? 내가 잘못 표현했을 수도 있습니다. 레이블은 고유하지만 모든 프레임에서 내용이 변경되지는 않습니다.

위치 ( 놀이터 )를 업데이트하지 않아도 FPS가 동일하게 유지된다는 것을 알았습니다. 텍스트가 변경 될 때만 다시 렌더링하는 방법이 있습니까?

PIXI.Mesh가 도움이 될까요? PixiJS의 렌더링 프로세스에 대해 읽을 수있는 리소스를 알고 있습니까?

@ChristophWalter (응용 프로그램을 사용하는 대신) 직접 렌더러를 만들고 장면이 변경 될 때 Renderer.render _only_를 호출하는 티커 루프를 설정할 수 있습니다.

응용 프로그램 옵션에 autoStart: false 를 전달한 다음 변경 사항이있을 때 app.render() 를 호출 할 수도 있습니다. 같은 차이.

감사합니다. 어떻게 든 텍스트에서 텍스처를 생성하고 스프라이트에서 사용하는 작업을 수행했습니다. 하지만 지금은 왜 그런지 이해가 안되며 놀이터에서 재현 할 수 없습니다. 😄

그러나 이제 응용 프로그램은 60FPS로 모든 프레임에 1500 개의 레이블 위치를 모두 업데이트합니다. 또한 매초마다 텍스트 내용이 업데이트됩니다. 이로 인해 매초 짧은 동결이 발생합니다. 따라서 다음 단계는 이러한 텍스트 업데이트를 비동기 적으로 렌더링하는 것입니다 (예 : 웹 작업자). 현재 ImageBitmap 및 OffscreenCanvas에 대해 읽고 있습니다. 이것은 다른 사람들에게 흥미로울 수 있으므로 진행 상황을 공유하겠습니다.

몇 주 전에 조사를 중단 한 짧은 업데이트
실제로 매우 간단하게 작업 한 웹 작업자로 텍스트를 렌더링했습니다.

// render-text-worker.js
onmessage = function(event) {
    const textLines = event.data.text.split(/\n/);
    const index = event.data.index;
    const offscreen = new OffscreenCanvas(150,45);
    const ctx = offscreen.getContext("2d");
    ctx.font = "15px monospace";
    textLines.forEach((text, index) => {
        ctx.fillText(text, 0, 15 + index * 15)
    })
    const imageBitmap = offscreen.transferToImageBitmap();
    postMessage({imageBitmap, index});
};

// index.js
const worker = new Worker("render-text-worker.js");
const callbacks ={}
function getLabelTexture(index, text, callback) {
  callbacks[index] = callback
  worker.postMessage({ index, text });
}
worker.onmessage = function({ data }) {
  const callback = callbacks[data.index]
  callback(PIXI.Texture.from(data.imageBitmap));
}

불행히도 내 유스 케이스에는 개선이 없습니다. 텍스트를 렌더링하는 동안 프레임은 여전히 ​​떨어집니다. 작업자로부터 이미지 비트 맵을 전송하는 데 필요한 작업 때문일 수 있습니다.

특정 사용 사례의 경우 성능 요구 사항을 충족하기 위해 각 레이블의 텍스트 길이를 줄이는 것이 좋습니다.