PixiJS 를 시작하며 (간단한 테스트)

티스토리를 하면서 알게된 개발자분의 추천으로 PixiJS 를 시작하게되었다.

극한의 상황을 예상해보며, 이것저것 시도해본 결과 5만개 rect 를 randomize 하는 코드를 작성해보았다.

최적화를 통해 5만개를 60fps 로 출력할수있다는것은 대단한 기술임에는 분명하다.

여러 webGL 관련 프레임워크들이 존재하지만, 다른 녀석들보다 PixiJS 가 가장 빠르다.

포인트는 미리 만들어놓고 재사용하는것이다.

Perna 님 덕분에 알게된 오브젝트 풀링 https://notyu.tistory.com/m/64 의 개념이 PixiJS 를 사용할때 매우 중요할듯하다.

 

import './style.css'
import * as PIXI from 'pixi.js'

const app = new PIXI.Application({ 

    resizeTo : window,

})

document.body.appendChild(app.view)

const meter = new PIXI.Text('')

meter.style = {

    fontSize: 100,
    fill : 0xffffff,

}

const RECT_COUNT    = 50000
const sprites       = new PIXI.ParticleContainer(RECT_COUNT, {})

const rects: PIXI.Sprite[]  = []

app.stage.addChild(sprites)
app.stage.addChild(meter)


for (let i = 0; i < RECT_COUNT; ++i) {

    const rect = new PIXI.Sprite(PIXI.Texture.WHITE) // sprite

    rects.push(rect)
    sprites.addChild(rect)

}


app.ticker.add(() => {

    const size = 100

    for (let i = 0; i < RECT_COUNT; ++i) {

        rects[i].tint   = Math.random() * 0xfffff * 1000000
        rects[i].x      = Math.random() * app.screen.width
        rects[i].y      = Math.random() * app.screen.height
        rects[i].width  = size
        rects[i].height = size

    }

    meter.text = app.ticker.FPS.toFixed(0).toString() + 'fps'

})