「three.js」でつくるお手軽3Dマンガ作成ソフト - 前編

JavaScriptとWebGLによるはじめての3Dプログラミング（1）

　「HTML5」＋「JavaScript」＋「WebGL」で作成した、お手軽マンガ作成Webアプリ「箱人形マンガ（Box Comic）」の開発で利用した「three.js」の使い方と、マンガ作成ソフトでの使用例を、コードを元に紹介していきます。今回は、立方体と板ポリゴンの表示、そして画像や「Canvas」をテクスチャとして利用する方法を紹介します。

はじめに

　いつもは「マンガで分かるプログラミング用語辞典」でマンガを描いている柳井です。最近「マンガで分かる Java入門講座」という約100回の講座を作成しました。その際、大量のマンガを作成するために、専用のアプリケーションを開発しました。「HTML5」＋「JavaScript」＋「WebGL」で、3D空間にキャラクターを配置してマンガを作成するソフトです。

「マンガで分かる Java入門講座」

「箱人形マンガ（Box Comic）」

• マンガで分かる Java入門講座
• 箱人形マンガ（Box Comic）
• 箱人形マンガ（Box Comic） - 操作方法説明

　この開発には「three.js」というWebGLを簡単に利用できるライブラリを使用しました。このライブラリを利用すると、わずかなステップで、3Dプログラミングを行うことが可能です。「three.js」はWeb上で公開されており、ダウンロードして自由に利用できます。本記事では、この「three.js」の使い方とマンガ作成ソフトでの使用例を、コードを元に紹介していきます。

「箱人形マンガ（Box Comic）」での作例

対象読者

　以下の読者を対象にしています。

• JavaScriptでプログラミングを書ける人。
• jQueryを使ったプログラムを書いたことがある人。
• HTML5のCanvasを使ったプログラムを書いたことがある人。

必要な環境

　「Google Chrome」や「Mozilla Firefox」といった、WebGLに対応したブラウザが必要です。「Internet Explorer」は、WebGLが利用できませんので実行環境として適していません。

• Google Chrome
• Mozilla Firefox

「HTML5」と「WebGL」

　「HTML5」の「Canvas」を利用すると、ブラウザでグラフィックスプログラミングを行うことができます。また、「Google Chrome」や「Mozilla Firefox」といった「WebGL」に対応しているブラウザでは、3Dプログラミングを行うことができます。

　「Canvas」で作成した画像は、「WebGL」のテクスチャとして利用可能です。また、「WebGL」から出力した画像は「Canvas」に張り付け可能です。そのため、「Canvas」と「WebGL」を使えば、2Dと3Dの技術を横断することができます。

　本記事では、こういった技術を利用して、3D空間上にキャラクターやフキダシ、集中線や背景といったオブジェクトを3Dで作成して、マンガのコマを描画していきます。また、3D空間上の物体を選択してドラッグする方法も紹介します。

　こういった技術を学ぶことで、ゲームや3Dツールなど、さまざまな応用が可能になります。