음악, 삶, 개발

아래 포스팅에서 60fps 로 계속 랜더링이 되는것이 많은 자원을 소모한다고 글을 썼었는데, 직접 manual 하게 랜더링할수있는 방법이 있다. 먼저 이야기하면 "필요한 부분만" 랜더링은 불가능하다. 무조건 전체를 다시 랜더링해야한다. (아래서 자세히 설명) PIXI.Application 클래스를 사용하는 대신 직접 PIXI.Renderer 인스턴스를 생성하는것이다. 간단히 버튼을 클릭했을때 색이 바뀌는 코드를 작성해보자. import { Renderer, Sprite, Texture } from 'pixi.js' const renderer = new Renderer({ width : window.innerWidth, height : window.innerHeight, backgroundColor : 0..

Pixi.js 란 라이브러리를 사용해보면서 느낀점을 정리해보려한다. 처음에는 희망에 찬 느낌으로 시작하였는데, 생각보다 매우 치명적인 단점들이 여기저기 존재하였다. 이 단점들을 어떻게 극복해내느냐에 따라 사용할지 말지가 결정될것같다.. 1. 굉장히 정적인 Bitmap 이며 svg 마냥 크기를 늘였다 줄였다하기 힘들다. (거의 불가능) 이것은 Dom 의 세계에서는 전혀 고민하지않았던 부분이다. Ctrl + 를 누르면 글자가 전혀 흐릿함없이 커지고, border radius 도 2rem 같은 단위에 기반하여 같이 자연스럽게 커진다. 하지만 Pixi 에서는 내가 그리는 순간 모든 크기는 고정되어버리며, 다시 그리던지 texture 라는 객체를 미리 준비하여 대비하여야한다. Vector..

html 처럼 자동으로 vector 스럽게 resizing 되는게 아니라, 레스터라이즈된다. https://github.com/pixijs/pixijs/issues/6265

https://www.mod-synth.io/ https://github.com/andrevenancio/mod-synth.io/tree/master/source/app/coffee

https://codepen.io/hz/full/vYNMxBj

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()...

다른 프레임워크나 라이브러리 개발자들에 비해 답변이 엄청 빠르고 활동적인듯하다. 질문을 올린지 1시간도 지나지않아, 유지보수하는 넷플리스 개발자가 곧바로 솔루션을 달아주었다. https://github.com/pixijs/pixijs/discussions/7627 antialising not working 'generateTexuture' from 'drawRoundedRect' · Discussion #7627 · pixijs/pixijs Playground : https://www.pixiplayground.com/#/edit/iFYOj3E-6R84DbVh1xzVI Hi. first sorry for bad english! I created a texture using app.renderer.gene..

1. 공식 튜토리얼 https://github.com/kittykatattack/learningPixi#rounded-rectangles 2. V4 이긴하지만 성능 tip (여전히 적용됨) https://github.com/pixijs/pixijs/wiki/v4-Performance-Tips 3. 성능에 관한 깃허브 Pixi 채널 issue 들. https://github.com/pixijs/pixijs/issues?q=is%3Aissue+is%3Aclosed+slow 4. Text 랜러딩에 관한 논의 https://github.com/pixijs/pixijs/issues/6524 5. 공식 예제들. https://pixijs.io/examples/#/demos-basic/container.js 6. w..

리액트와 달리 자료가 많지않아, 스스로 독파해야되는 부분이 컸다. 리액트에서도 최적화에 신경을 쓰다가, webGL 인데 알아서 잘 하겠지 라고 생각했지만 오산이었다. 런타임에서 잘못 함수를 호출했다가 cpu 가 스파이크 튀는것들을 지속적으로 보게되었다. 능숙해지지못하면 리액트보다 훨씬 나쁜 성능을 가지게 될수있다. 대략적으로 하지말아야할것. 1. Graphics 의 drawing 을 런타임에서 절대 하지말것. 이게 매우 큰 제약이긴한데... 물론 불필요한 상황이 있을수있을것이다. 하지만 매우 비싸다. 리액트보다 훨씬 cpu 를 많이 소모하였다. 내가 아직 다 모르는것일수도있지만, drawRect 를 지속적으로 호출하는것이 매우 비싸다. position 이나 transform 을 변경하는것은 그나마나 괜찮..

import * as PIXI from 'pixi.js' const app = new PIXI.Application({ resizeTo : window, }) document.body.appendChild(app.view) /* DOC : http://pixijs.download/release/docs/PIXI.Sprite.html */ const SPRITE_COLUMN_COUNT = 8 const SPRITE_ROW_COUNT = 5 const SPRITE_TOTAL_COUNT = SPRITE_COLUMN_COUNT * SPRITE_ROW_COUNT const SPRITE_WIDTH = app.screen.width / SPRITE_COLUMN_COUNT const SPRITE_HEIGHT = app..