Pixi - 이벤트가 발생할때만 랜더링하기

여러가지 랜더링 방안을 생각해봤으나, 

내가 만드는건 게임이 아니기에, 이벤트가 발생될 경우에만 랜더링을 하도록하였고,

CPU 사용량을 굉장히 줄일수있었다. PIXI.Ticker 는 심지어 blank canvas 에서도, gpu 와 cpu 를 20프로씩 소모한다.

하나의 인스턴스로 보통 로딩되는 게임과 달리, 여러개의 플러그인창이 열리는 음악 제작 환경에서는

Ticker 보다는 이벤트가 발생할때만 render 함수를 호출하도록 클래스를 만들었다.

import { Renderer, Container } from 'pixi.js'
import LeeColor from './LeeColor'

const BROWSER_WIDTH = window.innerWidth
const BROWSER_HEIGHT = window.innerHeight

class LeeApplication extends Renderer {

    public stage = new Container()

    constructor(){

        super({

            width : BROWSER_WIDTH,
            height : BROWSER_HEIGHT,
            antialias : true,
            backgroundColor : LeeColor.TRUE_BLACK
        })

        this.addCanvasToDOM()
        this.listenEvent()
        
    }

    private addCanvasToDOM(): void {

        document.body.appendChild(this.view)
        document.body.style.margin = '0'
        this.view.style.position = 'absolute'

    }

    private listenEvent(): void {

        // https://pixijs.download/dev/docs/PIXI.InteractionManager.html#click

        this.stage.interactive = true
        this.stage.on('mousemove', () => this.renderStage())
        this.stage.on('mousedown', () => this.renderStage())
        this.stage.on('mouseup', () => this.renderStage())
        this.stage.on('mouseupoutside', () => this.renderStage())

    }

    private renderStage(): void {

        this.render(this.stage)

    }
    

}

export default LeeApplication

위의 코드를 보면 'mousemove' 를 할때 renderState() 를 호출하고이는데,

마우스를 열라게 한들어도 Ticker 를 사용하는것보다 훨씬 적은 리소스를 사용하였다.

Ticker 를 사용할때 크롬에서는 30%, M1 에서 로제타로 돌아가는 Max 의 [jweb] 에서는 가끔 50프로까지 치솟기도했지만,

직접 renderStage() 를 이벤트가 발생할때만 호출하는 경우 15~20프로의 cpu 를 사용하였다.