CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

three.js – CanvasRenderer


Canvasで3D表現を行う「three.js」のCanvasRenderer

three.js

three.js」は、Canvasで3D表現を可能にする、非常に洗練されたJavaScriptライブラリです。
WebGLによるGPUを用いた表示能力は素晴らしいです(PCの能力に因りますが)。
three.jsの解説をするのであれば、普通は立方体とか球を回したりするのでしょうが、ここではちょっと気になったCanvasRendererを試します。

CanvasRenderer

CanvasRendererはthree.jsが持つ描画モードで、Canvasのコンテキストは2Dです。つまり、GPUは使用しません。
3Dゲームのようなリッチな表示は期待できませんが、(比較的)GPU能力の低いノートPCなどでも同じように表示できるメリットがあります。また、ベクターグラフィック好きにはたまらない(自分がそうです)、ベクターデータを使ったマテリアルが用意されています。
それでは、さっそくサンプルコードです。

HTML

JavaScript – threejs_canvas.js

htmlの方は特に説明は必要ないですね。Canvasが設置されるコンテナ、divタグを置いているだけです。bodyがロードされたらthree.jsの初期化と、アニメーションの開始であるanimate()を呼んでいます。

JavaScriptの方は、コメントを読めば大体想像はつくと思いますが、特徴的な所を解説したいと思います。
まず、上の方にあるdrawCircle関数ですが、これは単に円を描画して返す関数です。マテリアル作成に使用します。これは

で使用されます。マテリアルParticleCanvasMaterialに渡すオプション、programプロパティに指定します。
尚、Canvasの描画を使えるマテリアルは、今のところパーティクル用のParticleCanvasMaterialしか用意されていないようです。

ここでは100個のビルボード(パーティクル)をランダムな位置に作成しています。マテリアルは先ほど作ったものです。
作成したビルボードは、コンテナ的に使用するgroup、THREE.Object3Dにaddで格納します。

ここでCanvasRendererを作成しています。setClearColorHexメソッドは、Canvasをクリアする色を指定します(指定しないと背景は透明になります)。CanvasRendererは2DのCanvasに、フレーム毎に「描画>クリア」を繰り返しているわけです。

ここではwindow.requestAnimationFrameに毎フレーム処理させる関数を登録しています。three.jsのレンダラーは勝手にどんどん描画されていく訳ではなく、毎フレームレンダリングの呼び出しを行います。面倒に感じますが、最初からプロキシーが用意されているとも言えるので、使い勝手がよいです。

レンダリングを実行させています(毎フレーム)。
これを実行すると下のような画が出ます。

fig_001

止まったままだと3D空間がわからないので回転させてみます。
render()関数に追記します。

JavaScript – threejs_canvas.js(一部)

groupのrotationプロパティを使用し、Y軸に1フレーム1度で回転させています。角度はラジアンで指定します。

ai2canvas

さて、円を回転させただけではつまらないので、なにかグラフィックを表示させでみましょう。とはいえ、Canvasのコマンドを手動で入力して絵を描かされるのは非人間的です(たぶん)。
ここでは、AdobeのillustratorからCanvasコマンドを書き出せるプラグインを使います。

Ai2Canvas
※IllustratorCS6用はここにあります。

プラグインを入れると「書き出し」に<canvas>(html)>が追加されるので、これで書きだします。

fig_002.jpg

こんな感じでCanvasのコマンドに変換されました!

fig_003.jpg

書き出されたHTMLのdraw()内にCanvasの描画コマンドが連なっているので、これを先ほどのJavaScriptにコピペし、「mat = new THREE.ParticleCanvasMaterial({program:drawCircle});」のprogramに指定してやります。
ただし、このままだとなぜかマテリアルの上下が反転してしまう為、ビルボードを作っているループの中でobj.scale.y = -1;とでもしておきましょう。

ここまでで、下のような表示がされます。(※要Canvas対応ブラウザ)

上端と左端のクリッピングがうまくいっていない気がしますが、目立つようであればrendererを作った直後に、

とでもして、クリップしてしまえばいいかもしれません。

使用したファイル一式はこちらです。threejs_cr.zip

Modernizr

ここからは本編の内容からは離れますが、ちょっとした工夫です。

もし、このコンテンツをWinXP+IE8など、Canvasを使用できないブラウザで閲覧した場合にエラー&なにも表示されない状態になります。非対応ブラウザでCanvasをエミュレートするものもありますが、バグ項目も増えますし、制限もあるようです。
ここでは、Canvasが使用できないブラウザの場合にアラートを出すようにしてみます。

Modernizrは、ブラウザの対応状況をチェックしてCSS振り分けを支援するJavaScriptです。
例えば、Canvasに対応しているブラウザを使用した時にはhtmlタグ内に<html class=”js canvas”>等のようにclassが指定されます。CSSでは.canvas p{キャンバス使用可の時のCSS}等とセレクタを書ける訳です。
JavaScriptからチェックするときは、Modernizr.canvasと書けば、Canvas対応ブラウザの時はtrueが返ります。

fig_004.jpg

Modernizrのサイトでダウンロードのリンクを踏むと、チェックしたい機能の一覧ページとなります。必要なものだけ選別すれば、Modernizrのファイルサイズを節約できるという訳です。ここではCanvasのみチェックします(html5shiv、Modernizr.loadはデフォルトでチェックが入ってますがそのままでOKです※※)。
HTML内のJavaScriptで初期化している部分を書き換えます。

HTML

Modernizr.canvasがtrueだったら初期化を、そうでなければ”This browser is not supporting canvas.”の文字列を表示します。

※※html5shivはIE8以下でHTML5タグの使用等を可能に、Modernize.loadはCSSファイル等のロードを振り分けします。

関連記事
BACK TO TOP