CSSベースの3D描画ライブラリDivSugarの紹介

以前、DivSugarというグラフィックスライブラリを作成したのですが、作者の放置っぷりにも関わらず仕事や趣味で使っているよというご連絡を定期的にいただきます。GitHubでのスター数も少しずつ増えていっているようです。

そこで今回は、少し心を入れ替えて英語のみで書かれていたDivSugarのREADMEを日本語に翻訳してみたいと思います。(DivSugar 本家サイト

DivSugarとは

DivSugarはCSSベースの3D描画ライブラリです。3Dのシーングラフやアニメーション機構、幾何クラスなどを提供します。シーングラフの各ノードは拡張されたdiv要素で構成され、既存のWebページへの統合が簡単に実現できます。

DivSugarはCSS 3D Transformに依存しており、現在はSafariChromeFirefoxで動作します。

使い方

divsugar.jsを読み込むことで、グローバル変数DivSugarから全ての機能が利用できます。

<script src="divsugar.js"></script>

Sceneはシーングラフのルートとなるクラスで、描画領域を指定します。Nodeはシーングラフの要素となるクラスで、画像の描画を行います。両クラス共プロパティとしてdiv要素を保持しています。

var scn = new DivSugar.Scene()
  .setSize(800, 600)
  .setImage('#000080')
  .appendTo(document.body);

var node = new DivSugar.Node()
  .setSize(300, 300)
  .setPosition(10, 20, 30)
  .setImage('image.jpg')
  .appendTo(scn);

DivSugarはTaskクラスも提供します。登録されたすべてのTaskは毎フレームonUpdateメソッドが呼ばれ、破棄時にはonDestroyメソッドが呼び出されます。

var task = new DivSugar.Task().appendTo(DivSugar.rootTask);

task.onUpdate = function() {
  node.rotate(this.deltaTime * 0.1, this.deltaTime * 0.2, this.deltaTime * 0.3);
};

task.onDestroy = function() {
  scn.removeChild(node);
};

また、NodeクラスのplayAnimationメソッドで、一連のアニメーションを自動的に再生することができます。

node.playAnimation([
  ['to', { size: [100, 100], opacity: 0 }, 500, DivSugar.Ease.quadInOut],
  ['wait', 500],
  ['to', { size: [200, 200], opacity: 1 }, 1000, DivSugar.Ease.linear],
  ['play', someAnim],
  ['call', someFunc],
  ['repeat', 10]
]);

サンプル

  1. 簡単なアプリケーション (デモ | コード)
  2. Taskによるアニメーション (デモ | コード)
  3. playAnimationによるアニメーション (デモ | コード)
  4. 光源処理とビルボードエフェクト (デモ | コード)
  5. キー/マウス入力 (デモ | コード)

ドキュメント

ライセンス

  • MITライセンス