PixiJS 식의 2D 렌더링 엔진입니다. 도형으로 장면 그래프를 짜고, 실행 중에 고른 세 가지 백엔드(Canvas2D, WebGL, WebGPU) 가운데 하나로 그립니다.
엔진은 층으로 되어 있습니다. Application(생명주기와 렌더 루프) 아래에 Renderer(백엔드)가 있고, 그 아래로 Container(묶음)에서 Graphics(그릴 수 있는 것)로 이어지는 장면 그래프가 있습니다. app.stage에 노드를 더하면 렌더러가 그것들을 그립니다.
브라우저 전용입니다.ranuts/visual에는 진짜 HTMLCanvasElement와 GPU 또는 Canvas 컨텍스트가 필요합니다. Node에서는 돌지 않습니다.
애플리케이션을 만들고, 칠과 선이 있는 직사각형과 원을 그린 다음, 렌더 루프를 돌립니다.
import { Application, Graphics, RENDERER_TYPE } from 'ranuts/visual';const view = document.querySelector('canvas');// Application.create는 비동기입니다. WebGPU 백엔드는 장치 초기화를// 비동기로 하며, 첫 그리기 전에 그것이 끝나 있어야 합니다.const app = await Application.create({ view, prefer: RENDERER_TYPE.CANVAS, // CANVAS | WEB_GL | WEB_GPU backgroundColor: '#1e1e1e',});// 직사각형. 빨간 칠에 4px 파란 선.const rect = new Graphics();rect.beginFill('#ff0000');rect.lineStyle(4, '#0000ff');rect.drawRect(20, 20, 160, 100);rect.endFill();// 원.const circle = new Graphics();circle.beginFill('#00cc88', 0.8);circle.drawCircle(300, 120, 60);circle.endFill();// 그릴 것들을 stage에 더합니다. 그려지는 모든 것의 조상이 되는 자리입니다.app.stage.addChild(rect);app.stage.addChild(circle);// requestAnimationFrame 루프를 돌립니다(한 프레임만이면 app.render()를 부르세요).app.start();
엔진의 입구입니다. 캔버스와 렌더러, 그리고 장면 그래프의 뿌리(stage)를 품고 있습니다.
new Application(...)보다 비동기 팩토리 **Application.create(...)**를 쓰세요. WebGPU 백엔드는 장치 초기화를 비동기로 하고, 그것이 첫 그리기 전에 끝나 있어야 하기 때문입니다. Canvas와 WebGL은 곧바로 이행하므로, 이 팩토리는 어느 백엔드에서나 안전하고 쓰는 방식도 한결같습니다.
묶음을 나타내는 노드로, 장면 그래프에서 말하는 「그룹」입니다. 자식과 변환 상태를 쥐고 있을 뿐 스스로는 아무것도 그리지 않으며, Graphics 같은 그릴 수 있는 것들이 이를 물려받습니다. 함께 움직이고 커지고 도는 하위 트리를 짜고 싶을 때 Container를 더하세요.