はじめに
数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今1つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。
three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。
今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることが可能です。
本記事では、jThreeで最も重要な仕様であるGOMLと、そのうちのbody要素について紹介します。
次回行うhead要素に関する解説も必要なので、今回はブラウザへの描画テストは行いません。
対象読者
- HTML、CSS、jQueryの基礎を理解している方
- 3DCG・WebGLコンテンツを手軽に作ってみたい方
- MMDモデルを自分のサイト上で3Dのまま躍らせてみたい方
jThreeがサポートする環境
jThreeを利用するには、jQueryの2.0.0または1.10.0以降の読み込みが必須です。
OSはWindows 7でのみテストしましたが、ブラウザの要件を満たしているとMac OS XやLinux、Androidでも動作するようです。
ブラウザは動作テストを行ったもののみ以下に記述しますが、それ以外にもSleipnirやAndroid 4.4標準ブラウザでも動作する可能性があります。
- Internet Explorer：11.0.7以上
- Google Chrome：最新版
- Firefox：最新版
- Opera：最新版
なお、後述するサンプルはWindows 7（64bit）、Google Chrome最新版で動作確認しています。
3Dオブジェクトを記述する「GOMLファイル」とは
jThreeがjQueryの記法によってWebGLの操作を可能にした秘密は、GOMLファイルにあります。
GOML（Graphics Object Markup Language）とは、HTMLの仕様を参考に策定された3Dオブジェクトのマークアップ言語です。このGOMLで記述されたファイルを「GOMLファイル」と呼んでいます。拡張子は「.goml」です。
WebGL上に描画したい3Dオブジェクトはすべてこのファイルに記述し、jThreeでjQueryのごとくGOMLファイルのDOMを操作できます。
- jQuery→HTMLで書かれたファイルのDOMを操作する
- jThree→GOMLで書かれたファイルのDOMを操作する
タグ名を新しく覚える必要があり、難しいと思われるかもしれません。
しかし、属性名がHTMLと同じものが多かったり、CSSがstyle属性によって定義されていたりで、HTMLを知っている人ならなじみのある形式に見えるはずです。
既存のファイルとGOMLファイルの関係
サーバーに置いたGOMLファイルをいきなり読み込んでも、ブラウザは解釈してくれません。HTMLの要素へリンクし、JSファイルで取得・パースすることでサイト上にコンテンツが描画されます。
こう書くと面倒くさそうですが、jThreeがイイ感じに自動処理してくれます。
GOMLファイルはAjaxで取得しますので、HTMLファイルと同じサーバー上に置く必要があります。
また、GOMLファイル内に記述した相対リンクは、HTMLファイルの位置を基準にします。そのため、GOMLはHTMLの拡張のような感覚で捉えて、2つのファイルを同じディレクトリ内に設置するのをオススメします。
JSファイルは、従来通り外部サーバーでも構いません。
