visual

PixiJS 流の 2D 描画エンジンです。図形のシーングラフを組み立て、実行時に選んだ三つのバックエンド（Canvas2D、WebGL、WebGPU）のどれかで描きます。

エンジンは層になっています。Application（ライフサイクルと描画ループ）、その下に Renderer（バックエンド）、そして Container（まとまり）から Graphics（描けるもの）へと続くシーングラフです。ノードを app.stage に足すと、レンダラーがそれを描きます。

ブラウザー専用です。 ranuts/visual には本物の HTMLCanvasElement と、GPU または Canvas のコンテキストが要ります。Node では動きません。

読み込み

import { Application, Graphics, Container } from 'ranuts/visual';

はじめの一歩

アプリケーションを作り、塗りと線をもつ長方形と円を描いて、描画ループを回します。

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 のループを回します（1 コマだけなら app.render() を呼びます）。
app.start();

API

Application

エンジンの入り口です。canvas、レンダラー、そしてシーングラフの根（stage）を抱えています。

new Application(...) より、非同期のファクトリー Application.create(...) を使ってください。WebGPU バックエンドはデバイスの初期化を非同期で行い、それが最初の描画より前に終わっている必要があるからです。Canvas と WebGL はすぐ解決するので、このファクトリーはどのバックエンドでも安全で、書き方もそろいます。

Application.create(options)

static async です。Application を組み立て、レンダラーの非同期な初期化を待ちます。

パラメーター

返り値

Properties

Methods

IApplicationOptions

Container

まとまりを表すノードで、シーングラフでいう「グループ」にあたります。子と変換の状態を持ちますが、それ自体は何も描きません。Graphics のような描けるものは、これを継承しています。まとめて動かす・拡大縮小する・回転させる部分木を作りたいときに Container を足してください。

Methods

変換と表示のプロパティ

これらは共通の基底ノード（Vertex）にあり、どの Container と Graphics でも使えます。

Graphics

Container を継承した、描けるものです。塗りや線のスタイルを決めてから、図形のメソッドを呼びます。ほとんどのメソッドは this を返すので、そのままつなげて書けます。

スタイル

図形

パス

IFillStyleOptions

ILineStyleOptions

IFillStyleOptions を継承し、次を足します。

列挙型

RENDERER_TYPE

IApplicationOptions.prefer で描画バックエンドを選びます。

SHAPE_TYPE

Graphics の描画メソッドが作る図形の種類です。

LINE_CAP

LINE_JOIN

定数

バックエンド

バックエンドは IApplicationOptions.prefer（RENDERER_TYPE）で選びます。省くと Canvas になります。

• CANVAS は Canvas2D の API（fillRect、arc、ctx.stroke() など）でそのまま描きます。
• WEB_GL と WEB_GPU はひとつの BatchRenderer の流れを共有します。図形は三角形に分解され、ひとつのインターリーブされた頂点バッファに詰められて、一回の呼び出しで描かれます。

三つのバックエンドはどれも CSS の色ならなんでも受けつけます。16 進（#rgb / #rrggbb）、色名、rgb()、hsl() のいずれも同じように解釈されます。

線の形はバックエンドごとに違います。これは意図的です。 Canvas バックエンドでは線の端と継ぎ目をブラウザー本来の ctx.stroke() が描きますが、WebGL と WebGPU では独自の三角形分割で描きます。両者はピクセル単位で同じにはなりません。