Pixi.js: https://pixijs.github.io/bunny-mark/ 느림

이전 버전과 비교하면 어떻습니까?

예, 매우 낙관적입니다. 75FPS에서 100k 다중 텍스처 토끼를 처리하는 데스크탑을 한 번만 보았습니다. 저도 18개 있어요 :)

멀티 텍스처링이 없는 버전을 실행해 보니 버튼이 있었습니다.

PIXI는 "평균" 게임에 최적화되어 있지만 많은 매개변수가 있으며 pixi 아키텍처 위에 자신만의 초최적화된 렌더러를 작성할 수도 있습니다! 오래된 비디오 카드와 인텔 HD에서 안정적인 30FPS로 10000마리의 애니메이션 젖소(각각 ~16 쿼드)가 있습니다. 극단적인 단계, 매우 낮은 CPU 사용량: https://www.youtube.com/watch?v=adixpp9CK_A . 더 많은 객체가 좌표를 변경할수록 더 많은 CPU가 사용되며 모든 것이 충분한 FPS로 모든 프레임을 움직이는 경우를 처리할 수 있습니다. 한두 달 안에 pixi의 포크를 출시하기를 바랍니다. :)

이 포크가 마스터에 병합되어 pixi를 다시 위대하게 만들 수 있습니까?

Pixi를 사용하여 달성한 Ivan은 매우 인상적입니다. 이 포크를 보고 배울 수 있기를 기대합니다. :)

@jeebus3000 아니요, 프로덕션 포크가 될 것이며 pixi 및 webgl에 대한 깊은 지식이 필요합니다.

설정 수가 많을 것입니다.

1. json 애니메이션 형식이 GPU에 적합한 바이너리 형식으로 변환되는 방법을 지정합니다. 사전 정의: 스프라이트시트, 플래시 애니메이션, 척추만. 모두 다른 설정(인스턴스당 부동, 쿼드당 부동)
2. pixi-display++: pixi에는 컨테이너가 있지만 스테이지, 레이어 및 카메라도 있습니다. 모든 DisplayObject에는 일부 레이어에 속하는 보기가 있으며 극단적인 경우(gameofbombs.com)에는 개체당 여러 보기가 있습니다.
3. updateTransform()은 모든 프레임에서 호출되지 않으며, 바닐라 pixi보다 지연 업데이트가 더 많습니다. 10k 요소가 지도를 가로질러 이동하지 않을 때 JS에서 호출되는 것을 원하지 않습니다.
4. 실시간 아틀라스 및 압축 텍스처. 게임을 개발할 때 비디오 메모리에서 무슨 일이 일어나고 있으며 아틀라스가 어떻게 형성되는지 살펴봐야 합니다. 아틀라스는 결과 형식으로 압축되기 전에 텍스처 패커에서 특수 설정으로 만들어집니다.

@bigtimebuddy

이전 버전과 비교하면 어떻습니까?

"v3.0.8"을 클릭하면 다음과 같이 표시됩니다.

3.0.9, 3.0.10도 마찬가지입니다.

#4023에서 보고됨.

3.0.11에서는 6fps를 얻습니다.

4.0.0 및 4.0.1에서는 23-24fps를 얻습니다.

여기에서 지속적인 회귀가 있습니다.

4.1.0 및 4.1.1에서는 20-22fps를 얻습니다.

4.2.1에서는 19-20fps를 얻습니다.

4.4.4 및 4.5.1에서 16-18fps를 얻습니다.

픽시가 다시 빨라지길 바랍니다.

cc @GoodBoyDigital

@ivanpopelyshev 인상적이네요! 그러나 매우 빠르려면 재고 PixiJS가 필요합니다(내 사용 사례는 종종 bunnymarks처럼 보입니다).

아마도 최신 Pixi 코드가 이전 버전보다 빠른지(또는 더 빠른지) 확인하는 테스트(항상 실행됨)가 있을 수 있습니다.

또한 성능에 도움이 되는 경우 작은 단일 텍스처 토끼를 사용하도록 bunnymark를 변경해야 합니다. 더 큰/다중 질감(그리고 심지어 애니메이션 자체) 토끼를 위한 옵션이 있을 수 있습니다(훨씬 낮은 기본 수 포함). (이 옵션을 사용하려면 현재 존재하지 않는 추가 버튼이 필요합니다.)

이 모든 후에도 기본 카운트인 100000이 여전히 너무 낙관적이라면 훨씬 더 낮은 값으로 변경해야 합니다. 그러면 누군가가 PixiJS bunnymark로 전송될 때(기본값으로 실행될 때) PixiJS가 나쁘게 보이지 않을 것입니다. 현재의 낮은 프레임 속도 대신 사람들은 멋지고 부드러운 60fps를 볼 수 있어야 합니다.

@tobireif 당신은 거기에 단 하나의 설정만 있습니다: spriterenderer의 텍스처 수. 하나의 큰 아틀라스 4k x 4k 또는 8k x 8k를 만들면 멀티텍스처보다 훨씬 낫습니다.

사용자가 가지고 있는 webgl 설정을 테스트해야 하며 해당 정보 없이는 최적화가 불가능합니다. 예를 들어, 우리는 99%가 4k 텍스처와 플로트 텍스처 플러그인을 가지고 있다는 것을 알고 있으며, 우리는 이것을 많이 사용하지만 바닐라 픽시 렌더러는 그렇지 않습니다.

제 경우 pixi는 특정 작업에 적합한 더 나은 렌더러를 위한 상용구와 같습니다.

@ivanpopelyshev

spriterenderer의 텍스처 수. 하나의 큰 아틀라스 4k x 4k 또는 8k x 8k를 만들면 멀티텍스처보다 훨씬 낫습니다.

그것이 PixiJS bunnymark에서 구현되어야 하는 것보다 성능에 도움이 된다면, 맞습니까?

버전 4.0.1에서 4.5.1로, PixiJS는 느려졌습니다. bunnymark 프레임 속도는 23-24fps에서 16-18fps로 변경되었습니다. 그 문제는 수정되어야 하고, 성능 회귀는 미래를 위해 방지되어야 합니다(예: CI 테스트 사용).

제 경우 pixi는 특정 작업에 적합한 더 나은 렌더러를 위한 상용구와 같습니다.

나는 매우 성능이 좋은 "vanilla PixiJS"가 필요하며 다른 Pixi JS 사용자들도 마찬가지일 것이라고 생각합니다.

예, 설정에 "texture count: "와 같은 텍스트 필드가 하나 더 필요합니다. 4.0.1-4.5.1 에 관해서는 우리가 최적화를 해제한 CPU 또는 GPU인지 먼저 이해해야 한다고 생각합니다.

@tobireif , 좋은 지적입니다! 우리는 아마도 더 낮은 곳에서 시작해야 할 것입니다 - 아마도 1000? @bigtimebuddy의 쉬운 조정입니까?

성능과 관련하여 우리는 기본적으로 더 많은 유연성을 권력과 거래합니다. 현재 버전의 pixi에서도 정적 콘텐츠에 약간의 편향이 있습니다(대부분의 것이 움직이지 않는 경향이 있기 때문입니다!)

파티클 컨테이너를 사용하면 Bunnymark가 훨씬 빠르게 실행됩니다. :)

하지만 좋은 소리입니다. 저는 현재 v5를 작업 중입니다. fps를 다시 올릴 수 있는지 확인하겠습니다!

@ivanpopelyshev v5에서 텍스처 바인딩의 이전 방식 4.0.0으로 되돌렸습니다(마법이 적음 - 도움이된다면 방황합니다!)

@GoodBoyDigital 이 도움이 될 것입니다. 스마트 텍스처 바인딩은 단일 텍스처에서만 작동했으며 모든 다중 텍스처 사용은 고통스러웠습니다.

안녕하세요, 우리는 어떤 버전을 es6으로 변환했습니까? 나는 그 적중률을 조금 안다!

@굿보이디지털

bunnymark는 한 가지입니다. Pixi가 빠르다는 것을 보여줘야 하기 때문에 빠른 것이 중요합니다. 그리고 그것은 (소스 사람들이 연구하고 바꾸어 말할 수 있는) 완벽한 예이기 때문에 가능한 모든 합리적인 lib-user-side 최적화를 보여야 합니다. 그리고 토끼 수는 여전히 인상적인 숫자(예: 40000 또는 50000)여야 합니다(예: 이 티켓에 언급된 개선 사항과 예를 들어 my/Ivan의 컴퓨터에서 Pixi 버전 5를 사용하여 60fps를 제공하는 가장 높은 수).

그러나 bunnymark 코드에 관계없이 Pixi 자체는 우리 모두가 동의하는 것처럼 매우 빨라야 합니다.

여러분 모두가 훌륭한 성과를 달성하고 유지할 수 있기를 바랍니다!

현재 버전의 pixi에서도 정적 콘텐츠에 약간의 편향이 있습니다(대부분의 것이 움직이지 않는 경향이 있기 때문입니다!)

Pixi를 사용할 때마다 대부분의 물건이 움직입니다 😀

파티클 컨테이너를 사용하면 Bunnymark가 훨씬 빠르게 실행됩니다. :)

따라서 bunnymark 코드는 파티클 컨테이너를 사용해야 합니다. 맞죠?

저는 현재 v5를 작업 중입니다. fps를 백업할 수 있는지 확인하겠습니다!

엄청난! 👍

나는 여기서 bunny-mark의 가정된 목적에 동의하지 않습니다. 목표는 반드시 60fps로 실행되는 것을 표시하지 않는 것입니다. 우리는 이것을 릴리스/개발의 상대적인 성능을 비교하는 방법과 연기 테스트로 사용합니다. 벤치마킹을 위한 좋은 방법이 있을 때까지 이것은 성능 영향을 측정하기 위한 최선의 도구입니다. 100000 버니는 렌더러가 어려움을 겪을 위치로 실제로 밀어넣기 위한 의도였습니다. Pixi가 얼마나 빠른지 자랑하고 싶다면 이것은 작업에 적합하지 않습니다. ~Ivan~ Mat가 제안한 대로 ParticleCointainer를 사용하여 무언가를 작성했을 것입니다.

우리는 v4.1+에서 약간의 성능 저하가 있다는 것을 알고 있으며 그 중 많은 부분이 ES6에서 코드 기반을 다시 작성하여 유지 관리하기 쉽게 만들었기 때문입니다. 핵심 팀은 작은 성능 저하가 장기적으로 절충할 가치가 있다고 느꼈습니다.

이 문제를 해결할 수 있는 몇 가지 제안 사항이 있습니다.

• [ ] Pixi를 위한 더 섹시하고 사용자 친화적인 성능 광고를 만드십시오. 토글 기능에 대한 미세 입자 제어가 있을 수 있습니다. bunny-mark는 내부 테스트 도구로만 사용하십시오.
• [ ] 성능 팁을 위해 위키를 계속 개선하고 잠재적으로 데모를 제공합니다.
• [ ] 측정에 일관된 Pixi에 대한 벤치마킹 테스트 구현
• [ ] 위에서 설명한 대로 최신 버전에서 성능 저하 확인

해당 문제를 수정해야 하며, 향후 성능 회귀를 방지해야 합니다.

물론 우리는 성능 벤치마킹을 개선해야 하며 CI에 통합하는 것은 훌륭할 것이며 물론 Pixi는 가능한 한 빨라야 합니다. 그러나 우리는 또한 이러한 매우 복잡한 문제를 해결하는 데 기꺼이 시간을 할애할 사람들이 필요합니다. 다양한 브라우저/하드웨어에서 성능 벤치마크를 수행한 특정 경험이 있는 사람이 있다면 여기 기여를 환영합니다!

@tobireif 당신은 어떻습니까? 이 분야에 대한 전문 지식이 있습니까? 개선할 기회가 많습니다. 프로필을 작성하고, 더 나은 테스트를 만들고, webgl을 사용하여 CI(Travis)를 수행하기 위한 솔루션을 찾고, 성능 저하 기여를 찾는 커밋 기록에서 이진 검색을 수행하기 위한 PR 또는 노력을 환영합니다.

또한 bunnymark가 여러 버전으로 존재한다고 말하고 싶지만 몇 달 전에 @bigtimebuddy 에게 도움을 요청했습니다. 저는 인터페이스를 만드는 것이 끔찍합니다 :) 그는 이미 많은 추가 기능을 구현했습니다. 있는 그대로 행복합니다.

나는 텍스처의 수가 벤치마크에 중요한 유일한 작업이라고 믿습니다.

@bigtimebuddy

질문 주셔서 감사합니다. 성능 최적화에 대한 경험이 있지만 불행히도 가까운 장래에 Pixi에서 직접 작업할 시간을 찾을 수 없습니다. 이 (및 기타) 문제 보고서 형태의 내 기여가 여전히 높이 평가되기를 바랍니다. (시간이 걸리기도 합니다...)

이제 "pixijs.github.io/bunny-mark"가 개발자 내부 성능 테스트를 위한 것임을 이해합니다.

따라서 누군가에게 PixiJS의 뛰어난 성능을 보여 준다면(예: 특정 프로젝트에 대해 Pixi를 추천할 때) 이 링크를 http://www.goodboydigital.com/pixijs/bunnymark/ ?
(대신 https://pixijs.github.io/bunny-mark/ )
(앞으로 추가 성능 데모가 있을 수 있지만 나는 bunnymark를 좋아하고 인상적으로 작업을 수행합니다.)

(잠재적인 lib 사용자에게 성능을 보여주는 것이 최초/초기 bunnymarks의 원래 목적이었다고 생각합니다. GoodBoy 블로그 게시물 등에 게시되었으며, 이는 단지 dev-internal이 아닙니다.)

BTW, http://www.goodboydigital.com/pixijs/bunnymark/ 는 ParticleContainer를 사용하지만 이전 Pixi 버전을 사용합니다.

다시 한 번, 여러분 모두에게:

PixiJS에 감사드립니다!

@굿보이디지털

저는 현재 v5를 작업 중입니다. fps를 백업할 수 있는지 확인하겠습니다!

잘 들린다! 기대됩니다 😀

아마도 v5 bunnymark(기존 v3 bunnymark http://www.goodboydigital.com/pixijs/bunnymark_v3/ 와 같이 Pixi의 성능을 보여주기 위한 것)가 있을 수 있습니다.

안녕하세요! 비활성 상태로 인해 현재 이 문제를 닫습니다. 이 문제를 다시 열려면 언제든지 저희에게 찌르십시오. 감사합니다 👍

문제없어요 😀

그러나 PixiJS의 인상적인 애니메이션 성능(PixiJS-lib-developers에서 사용하는 smoke-test-bunnymark와 다른 것)을 보여주는 유일한 목적으로 각각의 최신 릴리스에 대해 항상 bunnymark가 있다면 여전히 좋을 것입니다. . bunnymark와 같은 인상적인 애니메이션 데모를 연결하면 예를 들어 트윗에서 PixiJS를 홍보할 때 도움이 됩니다. (각각의 최신 bunnymark는 이전 bunnymarks보다 느리지 않아야 합니다 / 이전 bunnymarks와 같은 60fps에서 최소한 동일한 양의 토끼를 지원해야 합니다. 아마도 ParticleCointainer를 사용할 것입니다.)

이것이 PixiJS 프로젝트의 범위 내에 있는 경우 다시 여십시오(또는 위의 내용을 새 티켓에 붙여넣을 수 있음).

또한 이 티켓에는 Matt Karl의 "일관성 있는 측정인 Pixi에 대한 벤치마킹 테스트 구현"과 같은 다양한 중요한 라인이 있습니다.

관련: https://github.com/pixijs/pixi.js/issues/4026 .

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