TS-LOG

프로그래밍/개발 일기

[에러] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] 포토폴리오 정리를 위해서 예전 작업물을 빌드 했더니 위와 같은 에러가 발생했다. 구글링을 해보니 Node.js 버전에 따른 에러였다. 단순한 해결 방법은 Node.js 버전을 다운그레이드 하는 것이다. 하지만 이 방법은 정말 해결이 안될 때 할 수 있는 마지막 방법이고... 현 Node.js 버전을 유지하면서 쉽게 빌드 가능하게 할려면 package.json 에서 scripts를 수정하는 것이다. 내가 예전에 작업한 작업물은 vue.js 기반이고 scripts 내용은 아래와 같다. "scripts": { "serve": "vue-cli-service..

프로그래밍/Pixi.js7

pixi-sound 사용하기

Pixi.js는 그래픽 라이브러리다. 그래서 사운드를 제어하는 기능은 지원하지 않는다. 그렇다고 사운드를 다른 라이브러리나 바닐라.js로 관리하기엔 여러모로 불편하다. 다행히 pixi-sound 라이브러리를 설치하면 pixi.js 기반에서 리소스로서 사운드 제어가 가능하다. 설치 pixi.js는 버전에 따라서 리소스 관리나 메서드가 다른점이 있다. 그래서 사용하는 버전에 맞게 pixi-sound도 설치 해줘야 한다. 글을 작성하는 지금 pixi.js는 8버전까지 나왔지만 최근 진행한 업무는 pixi.js 7버전으로 하고 있기에 v5.x 버전으로 설치해 줬다. npm i @pixi/sound@5.2.2 사용 방법 기본 방법 사용 방법은 어렵지 않다. add() 메서드로 색인과 경로를 등록하고, play()..

프로그래밍/Pixi.js7

PIXI.Graphics GPU 최적화

PIXI.Graphics 은 도형을 그릴 수 있는 클래스이다. 캔버스 화면에 렌더링 되는 요소이기에 사용함에 있어서 성능을 고려해야 한다. 그래서 몇가지 방법으로 GPU 성능 테스트를 해보았다. 테스트 방법 테스트 방법은 간단하다. 가로 세로 100픽셀인 사각형 10,000개를 화면에 그릴 것이다. 그려지는 위치는 모두 동일하다. 결과는 아래 이미지 처럼 나오게 된다. [테스트 1] 그래픽 객체를 10,000개 생성해서 그리기 사각형을 그리는 그래픽 객체를 개별로 10,000개를 생성해서 배치한다. import * as PIXI from 'pixi.js'; export default class Exam_0 extends PIXI.Container { constructor() { super(); this...

프로그래밍/개발 일기

애증의 Pixi.js

최근 Pixi.js로 PC 브라우저용 앱을 개발하고 있다. Create.js도 고민 해봤지만 GPU 사용이 가능한 Pixi.js가 아무래도 좋지 않을까~? 하는 생각이 컸다. Create.js도 GPU 사용이 가능하지만 그 부분은 만들다 말았고 라이브러리의 업데이트도 끊긴지 오래다. 아무튼, 좋은 퍼포먼스를 기대하며 Pixi.js로 개발을 했는데.... 결과는 좋지 않다. GPU를 사용하는 점은 Canvas2D에 비해서 분명 속도면에서 우월했다. 하지만 하드웨어 속성을 타는것 같다. 어떤 컴퓨터에서는 안정적인 성능을 보여주지만, 또 다른 컴퓨터에서는 GPU 사용률이 90% 나왔다. 만약 단순히 그래픽 카드 성능에 따른 이슈라면 클라이언트에게 가이드 라인이나 해결 방법을 명확히 주겠지만... 이슈 원인이 ..