Frontory

코드 편집 · 실습 · 필기 열기 →

PixiJS · 28 배칭과 품질

시리즈 목차 · 전체 기술 지도

단계: 자원 소유·대량 렌더링·측정 · 편집 가능한 예제 · 저장 ID: pixijs-03

목표와 학습 후 역량

선수 지식

선수 개념: 데이터와 표시, 수명 회귀. 27단위의 결과 파일과 관찰 기록을 준비하세요.

핵심 개념과 설명

다차원 비용

필터 면적·텍스처 전환·객체 갱신은 서로 다른 비용입니다. Sprite 개수만으로 병목을 설명하면 개선 대상을 놓칠 수 있습니다.

측정의 한계

프레임 관찰은 체감 결과를 보여 줍니다. 내부 호출이나 GPU 시간은 직접 측정 근거가 없으면 미확인으로 남겨야 합니다.

실습 준비

기존 내장 예제는 출발점만 제공합니다. 확장 요구사항 전체가 구현된 예제가 아니며 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. pixi.js 8.x의 설치 버전을 고정하고 기록하세요.

연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.

실습 과제

  1. 외부 실습 프로젝트의 day-28.js와 index.html을 준비하세요. 기존 pixijs-03의 필터·텍스처·DPR 비교를 편집기에 연결하고 같은 Sprite 목록을 유지하세요.
  2. 변수 하나의 전후 기록과 품질 이미지, 재실행 후 자원 장부를 모아 최적화 제안과 한계를 작성하세요.
  3. 입력 조건 없음에서 출력을 저장한 뒤 부모 BlurFilter 조건으로 다시 실행하세요. 예상: 품질과 처리 면적 비용이 달라지며 프레임 변화는 환경별로 측정해야 합니다. 실제 화면·로그와 대조하고 day-28-notes.md에 실제 결과와 차이의 원인을 남기세요.

관찰할 변수

변수기준 조건바꿀 조건예상할 변화·검증 가설
필터없음부모 BlurFilter품질과 처리 면적 비용이 달라지며 프레임 변화는 환경별로 측정해야 합니다

표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.

완료 조건

자가 점검

  1. 배칭 개선이 필터 병목을 해결하지 못하는 이유는 무엇인가요?
  2. 품질을 얼마나 낮출 수 있는지 어떤 화면으로 판단했나요?

공식 참고

연결된 예제와 실행 범위

예제 원본 · 실행 환경과 제한

원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.

다음 학습

이전: 2D 장면 편집기 완성

실험 기록 — 직접 작성

목표

핵심 개념

바꾼 변수와 예상

실제 결과

배운 점

남은 질문

코드 편집 · 실습 · 필기 열기 →