PixiJS란?

The HTML5 Creation Engine
Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

HTML5 기반의 그래픽 라이브러리로, 디지털 컨텐츠를 만들기 위한 빠르고 유연한 2D WebGL 렌더링 시스템이다.

공식문서를 기반으로 더 자세히 살펴보면,

PixiJS is an open source, web-based rendering system that provides blazing fast performance for games, data visualization, and other graphics intensive projects. These guides are designed to be a companion to the API documentation, providing a structured introduction to using the API to solve problems and build projects.

• 오픈소스 !!
• 게임, 데이터 시각화 및 기타 그래픽 집약적인 프로젝트에 매우 빠른(blazing fast~) 성능을 제공하는 오픈 소스 웹 기반 렌더링 시스템

WebGL(Web Graphics Library)?

pixi.js 설명에 보면 2D WebGL Renderer라는 설명이 있다.
먼저 WebGL 공식 홈페이지의 설명을 확인해보자.

WebGL이란?
WebGL(Web Graphics Library)는 OpenGL ES(Embedded Systems)를 기반으로 한 저수준의 3D 그래픽 API로, 웹 표준 중 하나로 자리 잡고 있다. 이는 웹 개발자들이 HTML5의 Canvas 요소를 통해 ECMAScript (주로 JavaScript)로 접근할 수 있도록 설계되었다.

쉽게 말하자면 OpenGL ES를 기반으로 한 그래픽 API다.

특징

또 다른 특징으로는 플러그인 설치를 안해도 된다는 것이다.
WebGL은 브라우저 내에서 직접 구현되어 추가적인 플러그인 없이도 3D 그래픽을 웹에 제공한다. 이로 인해 사용자는 별도의 소프트웨어 설치 없이도 복잡한 3D 시각화 및 게임을 경험할 수 있다.

WebGL API를 활용해 HTML <canvas> 태그 위에 복잡한 3D 및 2D 그래픽을 렌더링한다. 이 canvas 태그에 Javascript코드를 통해 WebGL API를 호출해 그래픽을 생성하고 조작한다. 이를 통해 간편하게 javascript 코드로 WebGL을 사용할 수 있다.

지원하는 브라우저

지원하는 브라우저로는 Apple(Safari), Google(Chrome), Microsoft(Edge), 그리고 Mozilla(Firefox) 등이 WebGL Working Group의 멤버로, 이 기술을 지원하고 발전시키고 있다.

OpenGL ES(Open Graphics Library for Embedded Systems)

그러면 OpenGL ES는 또 무엇이냐?

OpenGL ES는 임베디드 시스템을 위한 2D 및 3D 그래픽 API다. 특히 OpenGL ES는 OpenGL의 서브셋으로, 특히 모바일 장치, 게임 콘솔, 그리고 임베디드 시스템에서 사용하기 위해 설계되었다. OpenGL이 제공하는 복잡하고 다양한 기능을 단순화하여 저전력 장치에서도 효율적으로 작동할 수 있게 만든 버전이다. 그리고 WebGL은 이를 웹 환경에 맞게 조정한 것이다.

정리

OpenGL ES라는 임베디드 시스템을 위한 2D, 3D 그래픽 API가 있다. 이를 웹에서 활용 할 수 있도록 만든 것이 WebGL이다. 이러한 WebGL을 활용한 2D 그래픽 렌더링 라이브러리가 Pixi.js가 되겠다!!
복잡한 그래픽 렌더링을 쉽게 할 수 있도록 도와주는 라이브러리다~!!