음악, 삶, 개발

다른 프레임워크나 라이브러리 개발자들에 비해 답변이 엄청 빠르고 활동적인듯하다. 질문을 올린지 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..

티스토리를 하면서 알게된 개발자분의 추천으로 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.Applica..