'pixi-filters' 의 사용

https://www.npmjs.com/package/pixi-filters

 

import './style.css'
import * as PIXI from 'pixi.js'
import { BevelFilter } from '@pixi/filter-bevel'
import LeeRectangle from './helper/LeeRectangle'

// Create canvas!
const app = new PIXI.Application({

    resizeTo: window,
    antialias: true,
    resolution: window.devicePixelRatio

})

document.body.appendChild(app.view)

const rects = LeeRectangle.fromBrowser().toGrid(8, 8)
const pads: PIXI.Sprite[] = []

for (let i = 0; i < rects.length; ++i) {

    const {x, y, width, height} = rects[i].toObject()

    const pad = new PIXI.Sprite(PIXI.Texture.WHITE)

    pad.tint = 0xffffff * Math.random()
    pad.position.set(x, y)
    pad.width = width
    pad.height = height

    const belvelFilter = new BevelFilter()

    belvelFilter.thickness = 10

    pad.filters = [belvelFilter]

    pads.push(pad)
    app.stage.addChild(pad)

}


app.ticker.add(() => {

    for (let i = 0; i < pads.length; ++i) {

        const filter: any = pads[i].filters[0]

        filter.thickness = Math.random() * 25

    }


})

 

pixi-filters 는 기본에 포함되어있지않고 따로 설치해주어야한다.

포토샵에도 있는 Bevel 이 pixi-filters 에도 존재하는데 한번 animate 해보았는데

cpu 가 매우 비싸다.