Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/06/21 14:00

ダウンロード サンプル (335.1 KB)

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

目次

はじめに

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

「マンガで分かる Java入門講座」
「箱人形マンガ(Box Comic)」

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

「箱人形マンガ(Box Comic)」での作例
「箱人形マンガ(Box Comic)」

対象読者

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

  • 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ツールなど、さまざまな応用が可能になります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

バックナンバー

連載:JavaScriptとWebGLによるはじめての3Dプログラミング
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5