はじめに
いつもは「マンガで分かるプログラミング用語辞典」でマンガを描いている柳井です。最近「マンガで分かる Java入門講座」という約100回の講座を作成しました。その際、大量のマンガを作成するために、専用のアプリケーションを開発しました。「HTML5」＋「JavaScript」＋「WebGL」で、3D空間にキャラクターを配置してマンガを作成するソフトです。
この開発には「three.js」というWebGLを簡単に利用できるライブラリを使用しました。このライブラリを利用すると、わずかなステップで、3Dプログラミングを行うことが可能です。「three.js」はWeb上で公開されており、ダウンロードして自由に利用できます。本記事では、この「three.js」の使い方とマンガ作成ソフトでの使用例を、コードを元に紹介していきます。
対象読者
以下の読者を対象にしています。
- JavaScriptでプログラミングを書ける人。
- jQueryを使ったプログラムを書いたことがある人。
- HTML5のCanvasを使ったプログラムを書いたことがある人。
必要な環境
「Google Chrome」や「Mozilla Firefox」といった、WebGLに対応したブラウザが必要です。「Internet Explorer」は、WebGLが利用できませんので実行環境として適していません。
「HTML5」と「WebGL」
「HTML5」の「Canvas」を利用すると、ブラウザでグラフィックスプログラミングを行うことができます。また、「Google Chrome」や「Mozilla Firefox」といった「WebGL」に対応しているブラウザでは、3Dプログラミングを行うことができます。
「Canvas」で作成した画像は、「WebGL」のテクスチャとして利用可能です。また、「WebGL」から出力した画像は「Canvas」に張り付け可能です。そのため、「Canvas」と「WebGL」を使えば、2Dと3Dの技術を横断することができます。
本記事では、こういった技術を利用して、3D空間上にキャラクターやフキダシ、集中線や背景といったオブジェクトを3Dで作成して、マンガのコマを描画していきます。また、3D空間上の物体を選択してドラッグする方法も紹介します。
こういった技術を学ぶことで、ゲームや3Dツールなど、さまざまな応用が可能になります。
